Heading

When to use this component

Headings create structure. They provide a quick way to scan the main sections of a website.

How it works

  • Use only one heading 1 (h1) per page.
  • Don’t skip headings: e.g. do not jump from H1 to H3.
  • Headings of the same weight should never directly follow one another.
  • At least one paragraph of content should follow each heading.
  • Use sentence case for headings.
  • Headings have no closing punctuation, with the exception of question marks for questions.
  • Don’t use links in page headings.

Variants

There a few style variants for headings:

  • Overview title: Style variant that can be used above an overview, mostly as the page title. This variant is always styled as a heading 1 (h1).
  • Collection title: Style variant that can be used above a collection of teasers or tiles. This variant is always styled as a heading 2 (h2)

Simply add the title class on any heading element (according SEO guidelines) to apply this style. It isn’t required to use these classes on the default heading element provided.

Web accessibility

  • Headings should be visually and syntactically connected to their content.
{% if type == "overview-title" %}
  <{{ heading|default('h1') }} class="overview-title"><span class="overview-title-colon">{{ heading_text }}<span class="colon" aria-hidden="true"></span></span></{{ heading|default('h1') }}>
{% elseif type == "collection-title" %}
  <{{ heading|default('h2') }} class="collection-title"><span>{{ heading_text }}</span></{{ heading|default('h2') }}>
{% else %}
  <{{ type }}>{{ heading_text }}</{{ type }}>
{% endif %}
<h1>Heading 1</h1>
{
  "heading_text": "Heading 1",
  "type": "h1"
}
  • Content:
    h1,
    .h1,
    %h1,
    h2,
    .h2,
    %h2,
    h3,
    .h3,
    %h3,
    h4,
    .h4,
    %h4,
    h5,
    .h5,
    %h5 {
      margin: 0 0 .8rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.5;
    
      button {
        display: flex;
        padding: 0;
        border: 0;
        background: none;
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
        line-height: inherit;
        cursor: pointer;
    
        i {
          font-size: inherit;
        }
      }
    }
    
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/21-atoms/heading/_heading.scss
  • Size: 407 Bytes