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>
@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;
}