No notes defined.
<div class="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="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="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>
<div class="eyebrow -highlighted -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="eyebrow -highlighted -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>
.eyebrow {
font-size: 1rem;
font-weight: bold;
margin-bottom: .25rem;
text-transform: uppercase;
@include color-modifiers(primary secondary);
&.-highlighted {
@include color-modifiers(primary secondary) using ($color) {
background-color: $color;
color: blackwhite($color);
display: inline-block;
padding: 0 .25em;
}
}
}