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.
- 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
<!-- 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.
- 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
<!-- 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.
- 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
<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.
- 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
- 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.
</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">
<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">