No notes defined.
<div class="eyebrow">primary 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">secondary 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 -highlighted">highlighted 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">secondary highlighted 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>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
.eyebrow {
$b: &;
--eyebrow-color: var(--color, #{config.$primary});
--eyebrow-color-contrast: var(--color-contrast, #{blackwhite(config.$primary)});
color: var(--eyebrow-color);
font-size: 1rem;
font-weight: bold;
margin-bottom: .25rem;
text-transform: uppercase;
&.-secondary {
--eyebrow-color: var(--color, #{config.$secondary});
--eyebrow-color-contrast: var(--color-contrast, #{blackwhite(config.$secondary)});
}
&.-highlighted {
background-color: var(--eyebrow-color);
color: var(--eyebrow-color-contrast);
display: inline-block;
padding: 0 .25rem;
}
}