Digital pattern library

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.

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


        
            Date
18 July 2019
            Time
8.00am to 10.00am
            Location
Byre Theatre

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


        
            Date
18 July 2019
            Time
8.00am to 10.00am
            Location
Byre Theatre

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


        
            Date
18 July 2019
            Time
8.00am to 10.00am
            Location
Byre Theatre

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


        
            Date
18 July 2019
            Time
8.00am to 10.00am
            Location
Byre Theatre