# Heading

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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."
    }

`
File:

- 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

- Handle: @heading
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/text/heading/heading.html

# @todo:

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