example.html

<main class="container container--lg" style="background: white; min-height: 100vh;">
  <div class="push-md--bottom">
    <div class="push-sm--bottom">
      <p>The base type is 1rem (16px) over 1.4 line height</p>
      <a href="#" class="txt--underline">Anchor</a>
      <em>Emphasis</em>
      <small>Small</small>
      <strong>Strong</strong>
      <u>Underline</u>
      <kbd>CTRL+C</kbd>
      <mark>Highlighted text</mark>
    </div>

    <h1>Heading</h1>
    <h2>Heading</h2>
    <h3>Heading</h3>
    <h4>Heading</h4>
    <h5>Heading</h5>
    <h6>Heading</h6>
  </div>

  <div class="push-md--bottom">
    <div class="push-xs--bottom">
      <button class="btn btn--primary">Button Primary</button>
      <button class="btn btn--secondary">Button Secondary</button>
      <button class="btn btn--tertiary">Button Tertiary</button>
    </div>

    <a href="#" class="btn btn--secondary">Link Button</a>

    <input type="submit" value="Submit Button" class="btn btn--secondary" />

    <button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
    <button class="btn btn--secondary btn--small">Small Button</button>
  </div>

  <form class="push-md--bottom">
    <label for="nameField" class="u-display-b txt--bold push-xs--bottom">Name</label>
    <input type="text" placeholder="Lázaro Nixon" id="nameField" class="input">

    <label for="iceCreamField" class="u-display-b txt--bold push-xs--bottom">Choose a flavor:</label>
    <input list="iceCreamFlavors" id="iceCreamField" class="input" />
    <datalist id="iceCreamFlavors">
        <option value="Chocolate">
        <option value="Coconut">
        <option value="Mint">
        <option value="Strawberry">
        <option value="Vanilla">
    </datalist>

    <label for="ageRangeField" class="u-display-b txt--bold push-xs--bottom">Age Range</label>
    <select id="ageRangeField" class="input input--select">
      <option value="0-13">0-13</option>
      <option value="14-17">14-17</option>
      <option value="18-23">18-23</option>
      <option value="24+">24+</option>
    </select>

    <label for="commentField" class="u-display-b txt--bold  push-xs--bottom">Comment</label>
    <textarea placeholder="Hi Nixon …" id="commentField" rows="3" class="input"></textarea>

    <fieldset>
      <legend class="txt--bold push-xs--bottom">Choose your options</legend>

      <div class="flex flex--align-center push-xs--bottom">
        <input type="checkbox" id="option1" name="option1" value="1" checked>
        <label for="option1" class="flush push-xs--left">Option 1</label>
      </div>
      <div class="flex flex--align-center push-xs--bottom">
        <input type="checkbox" id="option2" name="option2" value="2">
        <label for="option2" class="flush push-xs--left">Option 2</label>
      </div>
      <div class="flex flex--align-center">
        <input type="checkbox" id="option3" name="option3" value="3">
        <label for="option3" class="flush push-xs--left">Option 3</label>
      </div>
    </fieldset>

    <fieldset>
      <legend class="txt--bold push-xs--bottom">Choose your option</legend>

      <div class="flex flex--align-center push-xs--bottom">
        <input type="radio" id="radio1" name="radio" value="1" checked>
        <label for="radio1" class="flush push-xs--left">Option 1</label>
      </div>
      <div class="flex flex--align-center push-xs--bottom">
        <input type="radio" id="radio2" name="radio" value="2">
        <label for="radio2" class="flush push-xs--left">Option 2</label>
      </div>
      <div class="flex flex--align-center">
        <input type="radio" id="radio3" name="radio" value="3">
        <label for="radio3" class="flush push-xs--left">Option 3</label>
      </div>
    </fieldset>

    <input type="submit" value="Save changes" class="btn btn--primary">
  </form>

  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Height</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Stephen Curry</td>
        <td>27</td>
        <td>1,91</td>
        <td>Akron, OH</td>
      </tr>
      <tr>
        <td>Klay Thompson</td>
        <td>25</td>
        <td>2,01</td>
        <td>Los Angeles, CA</td>
      </tr>
    </tbody>
  </table>

  <ul class="list--unindented">
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
    <li>Unordered list item 3</li>
  </ul>

  <ol class="list--unindented">
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
    <li>Ordered list item 3</li>
  </ol>

  <dl>
    <dt class="push-xs--bottom">Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
  </dl>

  <div class="push-md--bottom">
    <code>.block { color: #9b4dca; }</code>
  </div>

  <pre><code>.block { color: #9b4dca; }</code></pre>

  <blockquote>
    <p class="flush">Friends don’t spy; true friendship is about privacy, too.</p>
    <cite class="txt--sm">– Stephen King</cite>
  </blockquote>

  <hr>

  <div style="height: 85px;">
    <dialog open>
      <form method="dialog">
        <span>This is a native dialog with a close button.</span>
        <button type="submit" value="dismiss" class="push-xs--left txt--lg">&times;</button>
      </form>
    </dialog>
  </div>
</main>