Pattern Library

<h3 class="heading" data-scheme="page">
  About us
</h3>

• Even though the design sources mention heading levels (1-6), this has no bearing on the <h1> to <h6> elements.
• Heading levels 1 and 2 (<h1>, <h2>) are reserved for naming the site, and the logical section of the site (or page construct) respectively.
• All heading schemes mentioned below should however be interchangeable with the <h1> to <h6> elements, and other blocks of text.

Pattern scope:

Atom – The smallest possible pattern, independent

Design source:

Figma

Relevant assets:

Stylesheets:

• Shared stylesheets [See index.css]
• /css/patterns/heading.css

• Scheme: Page-level 

  This heading describes and introduces the entire page

  Example

  Open type in a new window

  Code sample

  <h3 class="heading" data-scheme="page">
    About us
  </h3>

  Notes

  • Use the attribute: data-scheme="page".
  • This heading can only be used once in a page
• Scheme: Section-level 

  Introduce a section of a page

  Example

  Open type in a new window

  Code sample

  <h4 class="heading" data-scheme="section">
    Meet the team
  </h4>

  Notes

  • Use the attribute: data-scheme="section".
  • This heading can be used several times in a page
• Scheme: Block-level 

  Introduce a subsection of a section, or block.

  Example

  Open type in a new window

  Code sample

  <h5 class="heading" data-scheme="block">
    Your support team
  </h5>

  Notes

  • Use the attribute: data-scheme="block".
  • This heading can be used several times in a section
• Scheme: Paragraph-level 

  Introduce a paragraph, or break a block up into further logical chunks.

  Example

  Open type in a new window

  Code sample

  <h6 class="heading" data-scheme="paragraph">
    Harry, the support pup.
  </h5>

  Notes

  • Use the attribute: data-scheme="paragraph".
  • This heading can be used several times in a block of content.
• Variant: Uppercase 

  Sometimes a little oomph is required. Use this data-variant, while retaining sensible content.

  Example

  Open type in a new window

  Code sample

  <h6 class="heading" data-scheme="paragraph" data-variant="uppercase">
    Harry, the support pup.
  </h5>

  Notes

  • Use the attribute: data-variant="uppercase".
  • You can use this variant interchangeably with the schemes above
  • You can use this variant interchangeably with the thin variant using: data-variant="uppercase thin".
  • Make sure to keep the actual content sentence case (as per the example). Uppercase content will be spelled out in screenreaders, as if it was an acronym.
• Variant: Thin 

  Remove the default bold font-weight from the heading by using this attribute.

  Example

  Open type in a new window

  Code sample

  <h6 class="heading" data-scheme="paragraph" data-variant="thin">
    Harry, the support pup.
  </h5>

  Notes

  • Use the attribute: data-variant="thin".
  • You can use this variant interchangeably with the schemes above
  • You can use this variant interchangeably with the uppercase variant using: data-variant="uppercase thin".
• Mode: Icon before 

  The block-level heading scheme supports icons before its content

  Example

  Open type in a new window

  Code sample

  <h4 class="heading" data-scheme="block" data-mode="icon-before" data-icon="spark">
    Quick responses
  </h4>

  Notes

  • As with other icons, make sure you specify the correct data-mode and then specify which icon you'd like by using data-icon.
  • This only works on block-level headings
• Mode: Icon above 

  The block-level heading scheme supports double-sized icons above its content too

  Example

  Open type in a new window

  Code sample

  <h4 class="heading" data-scheme="block" data-mode="icon-above" data-icon="spark">
    Quick responses
  </h4>

  Notes

  • As with other icons, make sure you specify the correct data-mode and then specify which icon you'd like by using data-icon.
  • This only works on block-level headings