skip to content

Description lists

Use a description (or “definition”) list to highlight key information, such a contact details. Use a Table if the information is more complex than simple key/value pairs.

Light theme

Email
shaunbailey@shaunbailey.co.uk

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.
Email
shaunbailey@shaunbailey.co.uk

Markup

The container must be a <dl> and must have class="ds-descriptions". Each row is wrapped in an unattributed <div>.

<dl class="ds-descriptions">
  <div>
    <dt>Facebook</dt>
    <dd><a href="https://www.facebook.com/shaunbaileyuk">www.facebook.com/shaunbaileyuk</a></dd>
  </div>
  <div>
    <dt>Homepage</dt>
    <div>
      <dd><a href="https://shaunbailey.uk/">https://shaunbailey.uk</a></dd>
    </div>
  </div>
  <div>
    <dt>Instagram</dt>
    <dd><a href="https://www.instagram.com/shaunbaileyam/">https://www.instagram.com/shaunbaileyam</a></dd>
  </div>
  <div>
    <dt>Email</dt>
    <dd>shaunbailey@shaunbailey.co.uk</dd>
  </div>
</dl>