Heading

Best use

• A section heading between two components.

Typically, you will use headings as part of the Standard component, inserting them with the Formats menu. However, the Heading component offers some advanced options:

• Full-width
  Checking this box will only have an effect on single-column page layouts (most of your pages are probably two-column layouts). It is best used above other components, like Router, that are wider than typical text content.
• Short Paragraph
  This will appear just below the heading and is best used for a quick description of the next component on the page.
• Call to Action
  This is button-style link that will appear to the right of the heading. You might use it when your Heading is above a list of upcoming events and you want to add a link to past events.
• Anchor
  An anchor allows you to create a link directly to a section of a page. When you click the link, your browser will automatically scroll to this anchor. Use only lowercase letters, numbers, and dashes for the anchor. Example: my-heading-anchor. This anchor can then be added to an Internal link in the Anchor field. For External links, anchors can be appended to the URL with a # sign. Example: https://www.reed.edu/example.html#my-heading-anchor 

Below is an example of the Heading component using heading level 3. When using this component, be sure to select the correct heading level that matches your page's content hierarchy. For more information about selecting the right headings, review our Accessibility Best Practices.