Paired values list

The paired values list pattern can be used to group together content that consists of a list of name and value pairs. These are displayed in an aligned grid with each pair on a separate line.

Rules for paired values list

  • Each item-pair's name should be unique and plain text only.
  • Item-pair values can meanwhile contain other types of simple content such as links and lists.
  • If a value is becoming overly complex or much longer than others in the list, consider separating it over a number of paired values or using a different pattern entirely.

Options available

List of paired values

A common use of this pattern would be to display the days of the week with associated opening times.

Example
Monday
9.00am to 5.00pm
Tuesday
9.00am to 5.00pm
Wednesday
9.00am to 5.00pm
Thursday
9.00am to 5.00pm
Friday
9.00am to 5.00pm
Saturday
Closed
Sunday
Closed
Code 
<!-- Begin pattern: paired-values-list //-->
<dl class="paired-values-list">
    <dt class="paired-values-list__name">Monday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Tuesday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Wednesday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Thursday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Friday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Saturday</dt>
    <dd class="paired-values-list__value">Closed</dd>
    <dt class="paired-values-list__name">Sunday</dt>
    <dd class="paired-values-list__value">Closed</dd>
</dl>
<!-- End pattern: paired-values-list //-->

List of paired values, with highlighted pair

For a repeating weekly list of days it may be beneficial to highlight the current day to aid quick identification of the corresponding time. This example demonstrates how it should display if viewed on a Thursday.

Example
Monday
9.00am to 5.00pm
Tuesday
9.00am to 5.00pm
Wednesday
9.00am to 5.00pm
Thursday
9.00am to 5.00pm
Friday
9.00am to 5.00pm
Saturday
Closed
Sunday
Closed
Code 
<!-- Begin pattern: paired-values-list //-->
<dl class="paired-values-list">
    <dt class="paired-values-list__name">Monday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Tuesday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Wednesday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name font-weight--bold">Thursday</dt>
    <dd class="paired-values-list__value font-weight--bold">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Friday</dt>
    <dd class="paired-values-list__value">9.00am to 5.00pm</dd>
    <dt class="paired-values-list__name">Saturday</dt>
    <dd class="paired-values-list__value">Closed</dd>
    <dt class="paired-values-list__name">Sunday</dt>
    <dd class="paired-values-list__value">Closed</dd>
</dl>
<!-- End pattern: paired-values-list //-->

List of paired values, with horizontal dividing lines

For a longer list it may be beneficial to introduce dividing lines to add greater visual separation between pairs. The lines will span the width of the wrapping element. This example is set to one-third the width of the main container.

Example
Monday
9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm
Tuesday
9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm
Wednesday
9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm
Thursday
9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm
Friday
9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm
Saturday
9.00am to 12.30pm and 1.00pm to 4.30pm
Sunday
9.00am to 12.30pm and 1.00pm to 4.30pm
Code 
<div class="row"><div class="col-md-4">
<!-- Begin pattern: paired-values-list //-->
<dl class="paired-values-list paired-values-list--divided">
    <dt class="paired-values-list__name">Monday</dt>
    <dd class="paired-values-list__value">9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm</dd>
    <dt class="paired-values-list__name">Tuesday</dt>
    <dd class="paired-values-list__value">9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm</dd>
    <dt class="paired-values-list__name">Wednesday</dt>
    <dd class="paired-values-list__value">9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm</dd>
    <dt class="paired-values-list__name font-weight--bold">Thursday</dt>
    <dd class="paired-values-list__value font-weight--bold">9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm</dd>
    <dt class="paired-values-list__name">Friday</dt>
    <dd class="paired-values-list__value">9.00am to 12.30pm, 1.00pm to 4.30pm, and 5.00pm to 8.30pm</dd>
    <dt class="paired-values-list__name">Saturday</dt>
    <dd class="paired-values-list__value">9.00am to 12.30pm and 1.00pm to 4.30pm</dd>
    <dt class="paired-values-list__name">Sunday</dt>
    <dd class="paired-values-list__value">9.00am to 12.30pm and 1.00pm to 4.30pm</dd>
</dl>
<!-- End pattern: paired-values-list //-->
</div></div>

Additional style options

This example shows a variety of the different types of value that can be used, the size of text has been reduced using the font-scale-reset class and the name of each pair has been set to bold to add visual emphasis. This example is set to half the width of the main container and placed on a light grey background. The collapse-top and collapse-bottom helper classes have been used to remove all top and bottom padding and margins so that the list fits exactly within its container element.

Example
Text block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragraphs of text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Linked text
Lorem ipsum dolor sit amet
Unordered list
  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit, sed do eiusmod tempor.
  • Incididunt ut labore et dolore magna aliqua.
List of linked text
Ordered list
  1. Lorem ipsum dolor sit amet.
  2. Consectetur adipiscing elit, sed do eiusmod tempor.
  3. Incididunt ut labore et dolore magna aliqua.
  4. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  5. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Code 
</div><div class="sta-grey-light"><div class="container"><div class="row"><div class="col-md-6">
<!-- Begin pattern: paired-values-list //-->
<dl class="paired-values-list paired-values-list--divided font-scale-reset collapse-top collapse-bottom">
    <dt class="paired-values-list__name font-weight--bold">Text block</dt>
    <dd class="paired-values-list__value">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
    <dt class="paired-values-list__name font-weight--bold">Paragraphs of text</dt>
    <dd class="paired-values-list__value"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></dd>
    <dt class="paired-values-list__name font-weight--bold">Linked text</dt>
    <dd class="paired-values-list__value"><a href="#">Lorem ipsum dolor sit amet</a></dd>
    <dt class="paired-values-list__name font-weight--bold">Unordered list</dt>
    <dd class="paired-values-list__value"><ul><li>Lorem ipsum dolor sit amet.</li><li>Consectetur adipiscing elit, sed do eiusmod tempor.</li><li>Incididunt ut labore et dolore magna aliqua.</li></ul></dd>
    <dt class="paired-values-list__name font-weight--bold">List of linked text</dt>
    <dd class="paired-values-list__value"><ul><li><a href="#">Lorem ipsum dolor sit amet</a></li><li><a href="#">Consectetur adipiscing elit, sed do eiusmod tempor</a></li><li><a href="#">Incididunt ut labore et dolore magna aliqua</a></li></ul></dd>
    <dt class="paired-values-list__name font-weight--bold">Ordered list</dt>
    <dd class="paired-values-list__value"><ol><li>Lorem ipsum dolor sit amet.</li><li>Consectetur adipiscing elit, sed do eiusmod tempor.</li><li>Incididunt ut labore et dolore magna aliqua.</li><li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li><li> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</li></ol></dd>
</dl>
<!-- End pattern: paired-values-list //-->
</div></div></div></div><div class="container">