@momentum-ui/react-collaboration/scss/typography/examples/default.html

Cisco Momentum UI Framework for React Collaboration Applications

<div class="row">
  <div class="columns medium-4 p">
    <strong>TITLE</strong>
    <div>
      62pt, Line 80 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h1 class="title-heading">Inter Thin</h1>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>H1</strong>
    <div>
      48pt, Line 64 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h1>Inter Thin</h1>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>H2</strong>
    <div>
      36pt, Line 48 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h2>Inter Light</h2>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>H3</strong>
    <div>
      26pt, Line 32 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h3>Inter Light</h3>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>H4</strong>
    <div>
      20pt, Line 32 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h4>Inter Light</h4>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>H5</strong>
    <div>
      16pt, Line 24 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h5>Inter Light</h5>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>H6</strong>
    <div>
      14pt, Line 24 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h6>Inter Light</h6>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>BODY</strong>
    <div>
      16pt, Line 24 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <h5>Inter Light</h5>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>BODY-SMALL</strong>
    <div>
      12pt, Line 16 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <p class="body-small">Inter Regular</p>
  </div>
</div>
<div class="row">
  <div class="columns medium-4 p">
    <strong>BODY-SMALLEST</strong>
    <div>
      10pt, Line 16 <br />
      #333333
    </div>
  </div>
  <div class="columns medium-8">
    <p class="body-smallest">Inter Regular</p>
  </div>
</div>