Style Guide Menu

Common HTML elements


Lists Back to top

Unordered list

  • List item
  • List item
  • List item
<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Ordered list

  1. List item
  2. List item
  3. List item
<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>

Undecorated list

  • List item
  • List item
  • List item
<ul class="list-bare">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Inline list

  • List item
  • List item
  • List item
<ul class="list-inline">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Tables Back to top

Tables should only be used for tabular data, and contain a <caption> element with a description of the table contents for assistive technologies. The <table> element should be wrapped in a <div> element with the class table-overflow-x to allow scrolling on smaller devices which may not be able to fit the table within the width of the viewport.

An example of how to mark up a table in HTML
Col heading Col heading Col heading
Row heading Cell Cell
Row heading Cell Cell
Row heading Cell Cell
Col footer value Col footer value Col footer value
<div class="table-overflow-x">
    <table>
        <caption><span class="visuallyhidden">An example of how to mark up a table in HTML</span></caption>
        <thead>
            <tr>
                <th scope="col">Col heading</th>
                <th scope="col">Col heading</th>
                <th scope="col">Col heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Row heading</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr>
                <th scope="row">Row heading</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr>
                <th scope="row">Row heading</th>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Col footer value</td>
                <td>Col footer value</td>
                <td>Col footer value</td>
            </tr>
        </tfoot>
    </table>
</div>

Horizontal rules Back to top

Normal rule

Some content.


Content after rule.

<p>Some content.</p>
<hr>
<p>Content after rule.</p>

Dashed rule

Some content.


Content after rule.

<p>Some content.</p>
<hr class="dashed">
<p>Content after rule.</p>