Resonance Style & Themable Components

Body Sizes 

<!-- Headings -->
<div class="row pt-2 ml-2 w-100 border">
    <div class="col">
        <h3>Body text sizes</h3>
        <div class="card">
            <!-- Display headings -->
            <p class="fs-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-2">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-3">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-4">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-5">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-6">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-xl">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-md">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-ms">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
            <p class="fs-xs">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
        </div>
    </div>
</div>
 
<!-- Headings -->
<div class="row pt-2 ml-2 w-100 border">
  <div class="col">
    <h3>Body text sizes</h3>
    <div class="card">
      <!-- Display headings -->
      <p class="fs-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-2">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-3">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-4">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-5">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-6">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-xl">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-md">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-ms">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
      <p class="fs-xs">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
    </div>
  </div>
</div>
 
/* No context defined. */

No notes defined.