There are no notes for this item.
<div class="heading__eyebrow -primary">interesting eyebrow</div>
<h1 class="heading--accent heading--accent-secondary">And the Headline</h1>
<p>
Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
.heading {
&__eyebrow {
font-size: 1rem;
font-weight: bold;
margin-bottom: .25rem;
text-transform: uppercase;
@include color-modifiers(primary secondary);
}
&--accent {
&::after {
content: '';
background-color: $plain-text;
border: 0;
display: flex;
height: .25rem;
margin: .5rem 0 2rem;
width: 2rem;
}
@include color-modifiers(primary secondary, '-') using ($color) {
&::after {
background-color: $color;
}
}
}
}