<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."
}
//
// 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;
}
}
find a solution to make it work without a div wrapper for jsx