Davidson Styleguide

Heading 

<!-- Default -->
<h1 class="">
    <span class="heading__text">This is an H1.</span>
</h1>


<!-- H 2 -->
<h2 class="">
    <span class="heading__text">This is an H2.</span>
</h2>


<!-- H 3 -->
<h3 class="">
    <span class="heading__text">This is an H3.</span>
</h3>


<!-- H 4 -->
<h4 class="">
    <span class="heading__text">This is an H4.</span>
</h4>


<!-- H 5 -->
<h5 class="">
    <span class="heading__text">This is an H5.</span>
</h5>


<!-- H 6 -->
<h6 class="">
    <span class="heading__text">This is an H6.</span>
</h6>


{% if heading is not empty %}
<h{{ heading.level }} class="{{ heading.variant }}">
  <span class="heading__text">{{ heading.headline }}</span>
</h{{ heading.level }}>
{% endif %}
 
/* Default */
{
  "heading": {
    "level": 1,
    "headline": "This is an H1."
  }
}


/* H 2 */
{
  "heading": {
    "level": 2,
    "headline": "This is an H2."
  }
}


/* H 3 */
{
  "heading": {
    "level": 3,
    "headline": "This is an H3."
  }
}


/* H 4 */
{
  "heading": {
    "level": 4,
    "headline": "This is an H4."
  }
}


/* H 5 */
{
  "heading": {
    "level": 5,
    "headline": "This is an H5."
  }
}


/* H 6 */
{
  "heading": {
    "level": 6,
    "headline": "This is an H6."
  }
}
  • Content: 
    // Normalize heading sizes; headings in a 
// display context should have an additional 
// font style applied to them.

h1,
h2,
h3,
h4,
h5,
h6 {
  @include rr-font-compute(l, tight);
  font-weight: normal;
}

@each $tag, $config in $editorial-headings {
  #{$tag} {
    @include rr-heading($tag, $editorial-headings);
    margin-top: 0;
    margin-bottom: rr-gridbase(2);
  }
}

.editorial__content {
  @each $tag, $config in $editorial-headings {
    #{$tag} {
      @include rr-heading($tag, $editorial-headings);
      margin-top: 0;
      margin-bottom: rr-gridbase(2);
    }
  }
}
  • URL: /components/raw/heading/heading.scss
  • Filesystem Path: patterns/atoms/text/heading/heading.scss
  • Size: 588 Bytes

Headings h2 - h6 can be used in text areas to make content readable and to establish a hierarchy on the page. The h1 heading is reserved for page headers only. Most organism-level patterns include the option for a heading to introduce the secion. For flexibility, many patterns use the headline-group molecule (see molecules > text > headline-group) instead of standalone headings.

It is important that heading levels on a page go in order. For example, an H3 can be followed by another H3 or an H4, not an H5. This is an important part of making your content accessible. Read WebAIM’s recommendations about headings for more information.