### Typography

Typography - Font Family Roboto

Copy

    <div style="position:relative;padding-top:4rem">
      <div class="text-sans-serif container">
        <h2 class="h2 mb-5">
          <span>Typography - Font Family Roboto</span>
        </h2>
        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 1</small>
          </div>

          <div class="col-sm-9">
            <h1 class="mb-0">H1 Material Kit</h1>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 2</small>
          </div>

          <div class="col-sm-9">
            <h2 class="mb-0">H2 Material Kit</h2>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 3</small>
          </div>

          <div class="col-sm-9">
            <h3 class="mb-0">H3 Material Kit</h3>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 4</small>
          </div>

          <div class="col-sm-9">
            <h4 class="mb-0">H4 Material Kit</h4>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 5</small>
          </div>

          <div class="col-sm-9">
            <h5 class="mb-0">H5 Material Kit</h5>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 6</small>
          </div>

          <div class="col-sm-9">
            <h6 class="mb-0">H6 Material Kit</h6>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Lead text</small>
          </div>

          <div class="col-sm-9">
            <p class="lead mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Paragraph</small>
          </div>

          <div class="col-sm-9">
            <p class="mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Small</small>
          </div>

          <div class="col-sm-9">
            <p class="text-sm mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Tiny</small>
          </div>

          <div class="col-sm-9">
            <p class="text-xs mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>
      </div>
    </div>

Typography - Font Family Monospace

Copy

    <div style="position:relative;padding-top:4rem">
      <div class="text-monospace container ">
        <h2 class="h2 mb-5">
          <span>Typography - Font Family Monospace</span>
        </h2>
        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 1</small>
          </div>

          <div class="col-sm-9">
            <h1 class="mb-0">H1 Material Kit</h1>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 2</small>
          </div>

          <div class="col-sm-9">
            <h2 class="mb-0">H2 Material Kit</h2>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 3</small>
          </div>

          <div class="col-sm-9">
            <h3 class="mb-0">H3 Material Kit</h3>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 4</small>
          </div>

          <div class="col-sm-9">
            <h4 class="mb-0">H4 Material Kit</h4>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 5</small>
          </div>

          <div class="col-sm-9">
            <h5 class="mb-0">H5 Material Kit</h5>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Heading 6</small>
          </div>

          <div class="col-sm-9">
            <h6 class="mb-0">H6 Material Kit</h6>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Lead text</small>
          </div>

          <div class="col-sm-9">
            <p class="lead mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Paragraph</small>
          </div>

          <div class="col-sm-9">
            <p class="mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Small</small>
          </div>

          <div class="col-sm-9">
            <p class="text-sm mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>

        <div class="py-3 align-items-center row">
          <div class="col-sm-3">
            <small class="text-uppercase font-weight-bold">Tiny</small>
          </div>

          <div class="col-sm-9">
            <p class="text-xs mb-0">
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that&#39;s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </p>
          </div>
        </div>
      </div>
    </div>