Heading

<h1><a href="#">Heading H1</a></h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>
<h2 class="teaser-section-heading">Teaser Section Heading</h2>
<h3 class="section-heading--primary">Section Heading Primary</h3>
<h4 class="section-heading--secondary">Section Heading Secondary</h4>
<h5 class="section-heading--tertiary">Section Heading Tertiary</h5>
<h1>
    <a href="#">Heading H1</a>
</h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>

<h2 class="teaser-section-heading">Teaser Section Heading</h2>
<h3 class="section-heading--primary">Section Heading Primary</h3>
<h4 class="section-heading--secondary">Section Heading Secondary</h4>
<h5 class="section-heading--tertiary">Section Heading Tertiary</h5>
/* No context defined. */
  • Content:
    //
    // Headlines
    //
    
    // H1
    %h1,
    h1 {
      @extend %heading-font-heavy;
      @extend %manual-hyphenation;
    
      margin-top: 0;
      margin-bottom: $spacer-lg;
      color: $h1-color;
      font-size: $font-size-xl;
      line-height: $heading-line-height;
    }
    
    // H2
    %h2,
    h2 {
      @extend %heading-font-heavy;
      @extend %manual-hyphenation;
    
      margin-top: 0;
      margin-bottom: $spacer-base;
      color: $h2-color;
      font-size: $font-size-lg;
      line-height: $heading-line-height;
    }
    
    // H3
    %h3,
    h3 {
      @extend %heading-font-heavy;
      @extend %manual-hyphenation;
    
      margin-top: 0;
      margin-bottom: $spacer-md;
      color: $h3-color;
      font-size: $font-size-md;
      line-height: $heading-line-height;
    }
    
    // H4
    %h4,
    h4 {
      @extend %heading-font-bold;
      @extend %manual-hyphenation;
    
      margin-top: 0;
      margin-bottom: $spacer-sm;
      color: $h4-color;
      font-size: $font-size-sm;
      line-height: $heading-line-height;
    }
    
    // H5
    %h5,
    h5 {
      @extend %heading-font-bold;
      @extend %manual-hyphenation;
    
      margin-top: 0;
      margin-bottom: $spacer-xs;
      color: $h5-color;
      font-size: $font-size-base;
      line-height: $heading-line-height;
    }
    
    // H6
    %h6,
    h6 {
      @extend %heading-font-heavy;
      @extend %manual-hyphenation;
    
      margin-top: 0;
      margin-bottom: $spacer-xs;
      color: $h6-color;
      font-size: $font-size-base;
      line-height: $heading-line-height;
    }
    
    // Remove links stylings inside headlines
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      > a:not([class]) {
        @extend %link-unstyled;
      }
    }
    
    .teaser-section-heading {
      @extend %h2;
    
      margin: 0 auto $spacer-base;
      font-size: $font-size-lg;
      text-align: center;
      text-transform: uppercase;
    }
    
    .upcase-heading {
      @extend %h5;
    
      margin: 0 auto $spacer-md;
      font-size: $font-size-xxl;
      text-transform: uppercase;
    }
    
    // Prevent older Browsers from screwing up with max-content widths
    @supports (width: max-content) {
      .teaser-section-heading {
        width: max-content;
        border-bottom: 4px solid $teaser-section-heading-border-color;
      }
    
      .teaser-section-heading__full-width {
        width: 100%;
        border: 0;
      }
    }
    
    .section-heading--primary {
      @extend %h1;
    
      margin-top: $spacer-lg;
      margin-bottom: $spacer-base;
      color: $h2-color;
      text-align: center;
    }
    
    .section-heading--secondary {
      @extend %h3;
    
      padding-top: $spacer-sm;
      border-top: 8px solid $section-heading-border-color;
      margin-bottom: $spacer-sm;
    }
    
    .section-heading--tertiary {
      @extend %h5;
    
      margin-bottom: $spacer-base;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      %h1,
      h1 {
        font-size: $font-size-xxxl;
      }
    
      // H2
      %h2,
      h2 {
        font-size: $font-size-xl;
      }
    
      // H3
      %h3,
      h3 {
        font-size: $font-size-lg;
      }
    
      // H4
      %h4,
      h4 {
        font-size: $font-size-md;
      }
    
      // H5
      %h5,
      h5 {
        font-size: $font-size-sm;
      }
    
      .teaser-section-heading {
        margin-bottom: $spacer-lg;
        font-size: $font-size-xl;
      }
    }
    
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/05-atoms/text/block/heading/_heading.scss
  • Size: 2.8 KB

@todo:

find a solution to make it work without a div wrapper for jsx