<div>
  <h2 class="sb:typography-heading">Headings</h2>
  <p class="sb:typography-title">
    Heading 1
    <i>.text-h1</i>
  </p>
  <h1 class="sb:typography-text">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </h1>
  <p class="sb:typography-title">
    Heading 2
    <i>.text-h2</i>
  </p>
  <h2 class="sb:typography-text">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </h2>
  <p class="sb:typography-title">
    Heading 3
    <i>.text-h3</i>
  </p>
  <h3 class="sb:typography-text">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </h3>
  <p class="sb:typography-title">
    Heading 4
    <i>.text-h4</i>
  </p>
  <h4 class="sb:typography-text">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </h4>
  <p class="sb:typography-title">
    Heading 5
    <i>.text-h5 .font-bold</i>
  </p>
  <h5 class="sb:typography-text">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </h5>
  <p class="sb:typography-title">
    Heading 6
    <i>.text-h6 .font-bold</i>
  </p>
  <h6 class="sb:typography-text">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </h6>
  <h2 class="sb:typography-heading">Body</h2>
  <p class="sb:typography-title">
    Body large
    <i>.text-lg</i>
  </p>
  <div class="sb:typography-text--lg">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </div>
  <p class="sb:typography-title">
    Body base
    <i>.text-base</i>
  </p>
  <div class="sb:typography-text--base">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </div>
  <p class="sb:typography-title">
    Body small
    <i>.text-sm</i>
  </p>
  <div class="sb:typography-text--sm">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </div>
  <p class="sb:typography-title">
    Body extra small
    <i>.text-xs</i>
  </p>
  <div class="sb:typography-text--xs">
    <span>
      Where you put your money matters.
      <br />
      A bank that finances a sustainable tomorrow.
    </span>
  </div>
</div>