Eyebrow

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>
  • Content:
    @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;
        }
    }
    
  • URL: /components/raw/eyebrow/_index.scss
  • Filesystem Path: resources/styles/atoms/headings/eyebrow/_index.scss
  • Size: 731 Bytes