Heading

<h1>
    <a href="#">Heading H1</a>
</h1>
<p>Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson.</p>

<h2>Heading H2</h2>
<p>Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson.</p>

<h3>Heading H3</h3>
<p>Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson.</p>

<h4>Heading H4</h4>
<p>Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson.</p>

<h5>Heading H5</h5>
<p>Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson.</p>

<h6>Heading H6</h6>
<p>Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson.</p>

<h2 class="teaser-section-heading">Teaser Section Heading</h2>
<h3 class="section-heading--primary">Section Heading Primary</h3>
<h1>
    <a href="#">Heading H1</a>
</h1>
<p>{{text}}</p>

<h2>Heading H2</h2>
<p>{{text}}</p>

<h3>Heading H3</h3>
<p>{{text}}</p>

<h4>Heading H4</h4>
<p>{{text}}</p>

<h5>Heading H5</h5>
<p>{{text}}</p>

<h6>Heading H6</h6>
<p>{{text}}</p>

<h2 class="teaser-section-heading">Teaser Section Heading</h2>
<h3 class="section-heading--primary">Section Heading Primary</h3>
{
  "text": "Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson."
}
  • Content:
    //
    // Headlines
    //
    
    // H1
    %h1,
    h1 {
      @extend %heading-font-heavy;
    
      margin-top: 0;
      margin-bottom: 0;
    
      font-size: $font-size-xl;
      line-height: $heading-line-height;
      color: $h1-color;
    }
    
    // H2
    %h2,
    h2 {
      @extend %heading-font-heavy;
    
      margin-top: 0;
      font-size: $font-size-lg;
      line-height: $heading-line-height;
      color: $h2-color;
    }
    
    // H3
    %h3,
    h3 {
      @extend %heading-font-heavy;
    
      margin-top: 0;
      font-size: $font-size-md;
      line-height: $heading-line-height;
      color: $h3-color;
    }
    
    // H4
    %h4,
    h4 {
      @extend %heading-font-bold;
    
      margin-top: 0;
      font-size: $font-size-sm;
      line-height: $heading-line-height;
      color: $h4-color;
    }
    
    // H5
    %h5,
    h5 {
      @extend %heading-font-bold;
    
      margin-top: 0;
      font-size: $font-size-base;
      line-height: $paragraph-line-height;
      color: $h5-color;
    }
    
    // H6
    %h6,
    h6 {
      @extend %heading-font-heavy;
    
      margin-top: 0;
      font-size: $font-size-base;
      line-height: $paragraph-line-height;
      color: $h6-color;
    }
    
    // Remove links stylings inside headlines
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      // hyphenate-limit-chars: 9 4 4;
      // hyphenate-limit-last: always;
      // hyphenate-limit-lines: 1;
      // TODO turn on when it's supported
      // see: http://clagnut.com/blog/2395
    
      hyphens: auto;
      word-wrap: break-word;
      overflow-wrap: break-word;
    
      > a:not([class]) {
        @extend %link-unstyled;
      }
    }
    
    .teaser-section-heading {
      @extend %h2;
    
      hyphens: manual;
      text-align: center;
      text-transform: uppercase;
      border-bottom: 4px solid $teaser-section-heading-border-color;
    }
    
    .section-heading--primary {
      @extend %h1;
    
      color: $h2-color;
      text-align: center;
    }
    
    .section-heading--secondary {
      @extend %h2;
    
      margin: 0 auto;
      text-align: center;
      text-transform: uppercase;
    }
    
    .section-heading--inverted {
      color: $brand-white;
    }
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      %h1,
      h1 {
        font-size: $font-size-2xl;
      }
    
      // 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;
      }
    
      // H6
      %h6,
      h6 {
        font-size: $font-size-sm;
      }
    
      .teaser-section-heading {
        font-size: $font-size-xl;
      }
    }
    
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/05-atoms/text/heading/_heading.scss
  • Size: 2.2 KB

@todo:

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