The Simple Stuff

Essential Styling Out of the Box

We include everything you need right out of the box—like basic styles for tables, definition lists, and other essentials.

Tables

Column 1 Column 2 Column 3 Column 4
Row 1 Value 1 Row 1 Value 2 Row 1 Value 3 Row 1 Value 4
Row 2 Value 1 Row 2 Value 2 Row 2 Value 3 Row 2 Value 4
Row 3 Value 1 Row 3 Value 2 Row 3 Value 3 Row 3 Value 4
Total 1 Total 2 Total 3 Total 4 
<table>
    <thead>
      <tr>
        <th scope="row">Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Row 1 Value 1</th>
        <td>Row 1 Value 2</td>
        <td>Row 1 Value 3</td>
        <td>Row 1 Value 4</td>
      </tr>
      <tr>
        <th scope="row">Row 2 Value 1</th>
        <td>Row 2 Value 2</td>
        <td>Row 2 Value 3</td>
        <td>Row 2 Value 4</td>
      </tr>
      <tr>
        <th scope="row">Row 3 Value 1</th>
        <td>Row 3 Value 2</td>
        <td>Row 3 Value 3</td>
        <td>Row 3 Value 4</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Total 1</th>
        <th>Total 2</th>
        <th>Total 3</th>
        <th>Total 4</th>
      </tr>
    </tfoot>
  </table>

Horizontal Rule

<hr />

Details

Details/Summary example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis, in euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis consequat ante. 

<details>
    <summary>Details/Summary example</summary>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit lorem, feugiat congue lacus
      laoreet quis. Praesent maximus ex nec justo iaculis, in euismod eros dictum. Cras ac lorem sit amet purus
      malesuada blandit. Mauris gravida augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In
      lobortis consequat ante.
    </p>
  </details>

Definition Lists

Term 1
Definition for term 1.
Term 2
Definition for term 2.
Term 3
Definition for term 3.
<dl>
    <dt>Term 1</dt>
    <dd>Definition for term 1.</dd>
    <dt>Term 2</dt>
    <dd>Definition for term 2.</dd>
    <dt>Term 3</dt>
    <dd>Definition for term 3.</dd>
  </dl>