Headings

All heading elements grow in size at the 768px breakpoint (with the exception of <h6>). Sizes are noted in brackets below for mobile/desktop.

  <h1>h1 heading (26px/30px)</h1>
  <h2>h2 heading (22px/26px)</h2>
  <h3>h3 heading (18px/22px)</h3>
  <h4>h4 heading (16px/18px)</h4>
  <h5>h5 heading (14px/16px)</h5>
  <h6>h6 heading (14px/14px)</h6>

ch-h1 to ch-h6 classes are also available for when you want to match the heading font styles but use a different HTML element.

  <p class="ch-h1">h1 heading style</p>
  <p class="ch-h2">h2 heading style</p>
  <p class="ch-h3">h3 heading style</p>
  <p class="ch-h4">h4 heading style</p>
  <p class="ch-h5">h5 heading style</p>
  <p class="ch-h6">h6 heading style</p>

Font scale

<p class="ch-fs--1">Scale 1 (12px)</p>
<p class="ch-fs--2">Scale 2 (14px)</p>
<p class="ch-fs--3">Scale 3 (16px)</p>
<p class="ch-fs--4">Scale 4 (20px)</p>
<p class="ch-fs--5">Scale 5 (24px)</p>
<p class="ch-fs--6">Scale 6 (30px)</p>
<p class="ch-fs--7">Scale 7 (34px)</p>
<p class="ch-fs--8">Scale 8 (42px)</p>
<p class="ch-fs--9">Scale 9 (50px)</p>
<p class="ch-fs--10">Scale 10 (60px)</p>

<!-- Responsive -->
<p class="[sl,sm,md,lg]:ch-fs--[1-10]">Responsive font sizes</p>

Paragraphs

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <a href="#typography">Praesent risus leo, dictum in vehicula sit amet</a>,
  feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare
  consequat.
</p>
<p class="ch-fs--3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <a href="#typography">Praesent risus leo, dictum in vehicula sit amet</a>,
  feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare
  consequat.
</p>
<p class="ch-body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <a href="#typography">Praesent risus leo, dictum in vehicula sit amet</a>,
  feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare
  consequat.
</p>
<p class="ch-measure">
  Climb leg rub face on everything give attitude nap all day for under the bed.
  Chase mice attack feet but rub face on everything hopped up on goofballs.
</p>

Semantic text elements

Horizontal rules

<hr class="ch-mv--4" />
<hr class="ch-mv--4 ch-bg--ac-blue" />
<hr class="ch-mv--4 ch-bg--ac-green ch-width--6 ch-mh--auto" />

Text divider

A horizontal rule that includes text you specify. Utility classes can be used to change the default styling.

<div class="ch-card">
  <div class="ch-card__content">
    Cash price
    <span class="ch-text-divider ch-mv--2">or</span>
    Monthly payment
  </div>
</div>

<div class="ch-card">
  <div class="ch-card__content">
    Black
    <span class="ch-text-divider ch-mv--2 ch-bc--ac-teal">divider</span>
    White
  </div>
</div>

<div class="ch-card">
  <div class="ch-card__content">
    Bark
    <span class="ch-text-divider ch-mv--2 ch-mh--6 ch-bc--grey-5 ch-fs--4">
      or
    </span>
    Bite
  </div>
</div>