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>