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>
<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>
<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>
<h4 class="section-heading--secondary">Section Heading Secondary</h4>
<h5 class="section-heading--tertiary">Section Heading Tertiary</h5>
 
{
  "text": "Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aimi lorem gibson."
}
  • Content: 
    //
// Headlines
//

// H1
%h1,
h1 {
  @extend %heading-font-heavy;
  @extend %manual-hyphenation;

  margin-top: 0;
  margin-bottom: $spacer-base;
  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-sm;
  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-sm;
  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-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;
}

//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  %h1,
  h1 {
    margin-bottom: $spacer-lg;
    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;
  }

  // H6
  %h6,
  h6 {
    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.9 KB

@todo:

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