<h1>Heading 1</h1>
<h1>{{ h1_text|default(h1_text) }}</h1>
{
  "h1_text": "Heading 1"
}
  • Content:
    h1,
    .h1,
    %h1 {
      @include themify {
        color: $heading-1-color;
      }
    
      margin-bottom: 1.5rem;
      font-family: $heading-1-font-family;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.1em;
    }
    
  • URL: /components/raw/h1/_heading-1.scss
  • Filesystem Path: components/21-atoms/headings/heading-1/_heading-1.scss
  • Size: 199 Bytes

Headings

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

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