No notes defined.

<div class="eyebrow -primary">interesting eyebrow</div>
<h1 class="accented -secondary">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>

<h1>This is a longer heading, for people who like to write much longer titles than other people.</h1>
<h2>This is a longer heading, for people who like to write much longer titles than other people.</h2>
<h3>This is a longer heading, for people who like to write much longer titles than other people.</h3>
<h4>This is a longer heading, for people who like to write much longer titles than other people.</h4>
<h5>This is a longer heading, for people who like to write much longer titles than other people.</h5>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
  • Content:
    @use "sass:map";
    @use "sass:math";
    @use "/resources/styles/common" as *;
    @use "/resources/styles/config";
    
    .heading {
        font-family: config.$font-family-heading;
        font-weight: normal;
        line-height: config.$line-height-heading;
        margin: 0 0 .5em;
    }
    
    h1,
    .h1 {
        @extend .heading;
        font-size: var(--font-size-h1);
    }
    
    h2,
    .h2 {
        @extend .heading;
        font-size: var(--font-size-h2);
    }
    
    h3,
    .h3 {
        @extend .heading;
        font-size: var(--font-size-h3);
    }
    
    h4,
    .h4 {
        @extend .heading;
        font-size: var(--font-size-h4);
    }
    
    h5,
    .h5 {
        @extend .heading;
    }
    
  • URL: /components/raw/heading/_index.scss
  • Filesystem Path: resources/styles/atoms/headings/heading/_index.scss
  • Size: 578 Bytes