DS in CSS

Definition lists

Use the <dl>, <dt> and <dd> tags to create a definition list. Add the class .cb-definition-list to the <dl> tag.

In the example below, .cb-definition-list is combined with layout-related column classes (.cb-column-12-xs, .cb-column-6-sm, .cb-column-4-md and .cb-column-3-lg-up) to achieve a flexible responsive layout.

Name
Mary Ellen Richmond
Date of birth
Legacy ID
10000000045
<div class="cb-flex cb-flex-wrap-wrap">
  <dl class="cb-definition-list cb-column-12-xs cb-column-6-sm cb-column-4-md cb-column-3-lg-up">
    <dt>Name</dt>
    <dd>Mary Ellen Richmond</dd>
  </dl>
  <dl class="cb-definition-list cb-column-12-xs cb-column-6-sm cb-column-4-md cb-column-3-lg-up">
    <dt>Date of birth</dt>
    <dd><time datetime="1891-08-05">Aug 5, 1891</time></dd>
  </dl>
  <dl class="cb-definition-list cb-column-12-xs cb-column-6-sm cb-column-4-md cb-column-3-lg-up">
    <dt>Legacy ID</dt>
    <dd>10000000045</dd>
  </dl>
</div>

Unpadded definition lists

By default, definition lists have padding at the top, right, and bottom (it's actually applied to the <dt> and <dd> tags within the definition list).

You can remove the padding by adding the class .unpadded to the <dl> tag.

Name
Mary Ellen Richmond
Date of birth
Legacy ID
10000000045
<div class="cb-flex cb-flex-wrap-wrap">
  <dl class="cb-definition-list unpadded cb-column-12-xs cb-column-6-sm cb-column-4-md cb-column-3-lg-up">
    <dt>Name</dt>
    <dd>Mary Ellen Richmond</dd>
  </dl>
  <dl class="cb-definition-list unpadded cb-column-12-xs cb-column-6-sm cb-column-4-md cb-column-3-lg-up">
    <dt>Date of birth</dt>
    <dd><time datetime="1891-08-05">Aug 5, 1891</time></dd>
  </dl>
  <dl class="cb-definition-list unpadded cb-column-12-xs cb-column-6-sm cb-column-4-md cb-column-3-lg-up">
    <dt>Legacy ID</dt>
    <dd>10000000045</dd>
  </dl>
</div>