.accented is this

<h1 class="accented">And the Headline</h1>
<p>
    Elit veritatis sit sint voluptas nisi ad Beatae consectetur accusantium iste officia similique molestiae voluptatum. Repellat minima ex aut neque excepturi cumque esse repellendus Eum sint hic nam quos harum?
</p>

<h2 class="accented -secondary">And the Headline</h2>
<p>
    Adipisicing earum eaque illo eum quas asperiores. Tempora cum architecto consequuntur est et doloremque, minus Natus dolorem soluta officia dignissimos delectus Ipsam cupiditate facere nulla nesciunt non? Ea placeat fuga
</p>
  • Content:
    @use "/resources/styles/config";
    
    .accented {
        $b: &;
    
        --accented-color: var(--color, #{config.$primary});
    
        &::after {
            content: '';
            background-color: var(--accented-color);
            border: 0;
            display: flex;
            height: .25rem;
            margin: .5rem 0 2rem;
            width: 2rem;
        }
    
        &.-secondary {
            --accented-color: var(--color, #{config.$secondary});
        }
    }
    
  • URL: /components/raw/accented/_index.scss
  • Filesystem Path: resources/styles/atoms/headings/accented/_index.scss
  • Size: 413 Bytes