Typography

Headings, body text and other special typography utility classes.

Headings

These classes have built-in responsiveness.

Example	Class Name
H1 Block Large	.heading-size-h1-block-large
H1 Block	.heading-size-h1-block
H1 Block Small	.heading-size-h1-block-small
H1	.heading-size-h1
H2	.heading-size-h2
H3	.heading-size-h3-large
H3	.heading-size-h3
H3	.heading-size-h3-small
H4	.heading-size-h4
H5	.heading-size-h5
H6	.heading-size-h6

Body Text

Example	Class Name
Body Large	.text-body-large
Body	.text-body
Body Small	.text-body-small
Body XSmall	.text-body-xsmall

Specialty Typography Classes

Example	Class Name
Page Intro	.text-page-intro
Section Intro	.text-section-intro
Eyebrow Heading	.text-eyebrow
Blockquote	.text-blockquote
Caption	.text-caption

Links

Heading Link

Heading With a Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat auctor orci. Vivamus porttitor enim at eleifend maximus. Nam at scelerisque leo.

<h3 class="heading-size-h2">
  <a href="#">Heading With a Link</a>
</h3>

CTA Links

CTA Link

<a class="link-cta" href="#">CTA Link</a>

CTA Link With Arrow

<div class="padding-bottom-3">
  <a class="link-cta flex" href="#">
    <span class="container__animated-arrow-sm">
      <span class="">
              CTA Link With
      </span>
      <span class="keep-together">
         Arrow 
        <span class="animated-arrow-sm-wrapper">
           <i class="animated-arrow animated-arrow-orange animated-arrow-sm margin-left-2"></i>
        </span>
      </span>
    </span>
  </a>
</div>