Metadata list

The metadata list pattern can be used to provide additional information about a particular item of content such as a search result, news article, event or publication. A metadata list consists of a number of label and value pairs.

Rules for metadata list

  • Full width metadata items must appear above any others.
  • Metadata items should be used sparingly to avoid creating visual clutter.
  • Each text label should be no longer than 20 characters.
  • Icons may be used to represent the types of metadata being shown.
  • If icons are used then all similar items, that use this pattern, must also have icons.
  • Icons must be visually distinct from one another.
  • A metadata item's value may be a link.
  • Metadata is styled in a lighter grey colour unless the inherit-colour class is added.

Options available

Icons - inline

Metadata items default layout is in a single line. This example uses icons to represent each type of metadata.

Example
Date
18 July 2019
Time
8.00am to 10.00am
Location
Byre Theatre
Code 
<!-- Begin pattern: metadata-list //-->
<dl class="metadata-list">
    <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
    <dt><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt><dd>8.00am to 10.00am</dd>
    <dt><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt><dd><a href="#">Byre Theatre</a></dd>
</dl>
<!-- End pattern: metadata-list //-->

Icons - full width

Metadata items can be changed to each occupy a single line by adding the metadata-list--full class. This example uses icons to represent each type of metadata.

Example
Date
18 July 2019
Time
8.00am to 10.00am
Location
Byre Theatre
Code 
<!-- Begin pattern: metadata-list //-->
<dl class="metadata-list">
    <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd class="metadata-list--full">18 July 2019</dd>
    <dt class="metadata-list--full"><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt><dd class="metadata-list--full">8.00am to 10.00am</dd>
    <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt><dd class="metadata-list--full"><a href="#">Byre Theatre</a></dd>
</dl>
<!-- End pattern: metadata-list //-->

Text labels

Using text labels may be more appropriate if icons are unable to clearly represent each type of metadata. Add the class metadata-list--no-icon to remove the additional layout styling used for icons.

This example places each metadata item on its own line. This example also uses the inherit--colour class so the inherited text colour is used.

  • Caution should be used when using inline layout and text based labels as this will become harder to read when spanning multiple lines.
Example
Date
18 July 2019
Time
8.00am to 10.00am
Location
Byre Theatre
Code 
<!-- Begin pattern: metadata-list //-->
<dl class="metadata-list inherit--colour">
    <dt class="metadata-list--full metadata-list--no-icon">Date</dt><dd class="metadata-list--full">18 July 2019</dd>
    <dt class="metadata-list--full metadata-list--no-icon">Time</dt><dd class="metadata-list--full">8.00am to 10.00am</dd>
    <dt class="metadata-list--full metadata-list--no-icon">Location</dt><dd class="metadata-list--full"><a href="#">Byre Theatre</a></dd>
</dl>
<!-- End pattern: metadata-list //-->

Hidden labels

Labels can be hidden entirely using the sr-only class. These are still made available for screen reader users so the label text should still be provided. This example places the metadata inline.

Example
Date
18 July 2019
Time
8.00am to 10.00am
Location
Byre Theatre
Code 
<!-- Begin pattern: metadata-list //-->
<dl class="metadata-list">
    <dt class="sr-only">Date</dt><dd>18 July 2019</dd>
    <dt class="sr-only">Time</dt><dd>8.00am to 10.00am</dd>
    <dt class="sr-only">Location</dt><dd><a href="#">Byre Theatre</a></dd>
</dl>
<!-- End pattern: metadata-list //-->