There are no notes for this item.
<div class="heading__eyebrow -primary">interesting eyebrow</div>
<h1>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>
<div class="heading__eyebrow -secondary">interesting eyebrow</div>
<h2>And the Headline</h2>
<p>
Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
</p>
<div class="heading__eyebrow">interesting eyebrow</div>
<h3>And the Headline</h3>
<p>
Ipsum sequi dolorem quam voluptatum tenetur? Quam consectetur doloremque sit vel assumenda Quas sunt eligendi adipisci alias exercitationem. Repellat impedit iure fugiat non qui. Labore quae quia magnam explicabo aliquam.
</p>
.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;
}
}
}
}