typography-variants.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DS in CSS</title>
  <link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>
<body class="cb-baseline">
  <h1 class="cb-h4 cb-bolder"><a class="cb-link" href="./index.html">DS in CSS</a></h1>
  <h2 class="cb-h5 cb-margin-bottom-large">
    Typography variants
  </h2>
 
  <table class="cb-table">
    <thead class="cb-thead">
      <tr class="cb-tr">
        <th class="cb-th">Variant</th>
        <th class="cb-th">class name</th>
        <th class="cb-th">Description</th>
      </tr>
    </thead>
    <tbody class="cb-tbody">
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-h1">h1</span>
        </td>
        <td class="cb-td cb-monospace">.cb-h1</td>
          <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 72px;
font-weight: 300;
line-height: 1.167;
letter-spacing: 1px;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-h2">h2</span>
        </td>
        <td class="cb-td cb-monospace">.cb-h2</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 60px;
font-weight: 900;
line-height: 60px;
letter-spacing: px;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-h3">h3</span>
        </td>
        <td class="cb-td cb-monospace">.cb-h3</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 48px;
font-weight: 400;
line-height: 1.167;
letter-spacing: 0px;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-h4">h4</span>
        </td>
        <td class="cb-td cb-monospace">.cb-h4</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 34px;
font-weight: 400;
line-height: 40px;
letter-spacing: normal;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-h5">h5</span>
        </td>
        <td class="cb-td cb-monospace">.cb-h5</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 24px;
font-weight: 400;
line-height: 32px;
letter-spacing: normal;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-h6">h6</span>
        </td>
        <td class="cb-td cb-monospace">.cb-h6</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 20px;
font-weight: 500;
line-height: 32px;
letter-spacing: normal;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-body3">body3 (default)</span>
        </td>
        <td class="cb-td cb-monospace">.cb-body3</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: normal;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-body2">body2</span>
        </td>
        <td class="cb-td cb-monospace">.cb-body2</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: normal;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-callout">callout</span>
        </td>
        <td class="cb-td cb-monospace">.cb-callout</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 14px;
font-weight: 600;
line-height: 20px;
letter-spacing: normal;
text-transform: uppercase;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-body1">body1</span>
        </td>
        <td class="cb-td cb-monospace">.cb-body1</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 14px;
font-weight: 600;
line-height: 24px;
letter-spacing: normal;</pre>
        </td>
      </tr>
      <tr class="cb-tr">
        <td class="cb-td">
          <span class="cb-caption">caption</span>
        </td>
        <td class="cb-td cb-monospace">.cb-caption</td>
        <td class="cb-td">
          <pre class="cb-body2 cb-monospace cb-no-margin">font-size: 13px;
font-weight: 400;
line-height: 18px;
letter-spacing: normal;</pre>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>