Summary List

Structure

Each summary list item contains:

Key (optional)

• Visual indicator that relates the item to a chart or infographic on the same screen
• Four variants available (typically colour-coded or styled distinctly)
• Only use when the summary list relates to a chart or data visualization
• Helps users connect summary information to corresponding chart elements

When to include a key:

• When the summary list accompanies a chart on the same screen
• When visual correlation between data and summary is helpful
• When colour coding or visual indicators aid understanding

Label (required)

• Describes what the value represents
• Should be concise and clear (typically 1-5 words)
• Use sentence case, keep labels short and descriptive
• Should wrap over multiple lines if space doesn't allow
• Avoid abbreviations unless widely understood

Value (required)

• The information or data being displayed
• Can be text, numbers, dates, or short phrases
• Should wrap over multiple lines if space doesn't allow
• Use appropriate formatting for the data type (e.g., dates, currency)

Value guidelines:

• Format consistently (dates, numbers, currencies)
• Use "Not provided" or similar for missing data rather than leaving blank
• Keep values concise when possible
• Use proper typography for specific data types

Text links (optional)

• One or more action links for each item (e.g., "Change", "Edit", "Remove")
• Always aligned to the right
• Provide actions related to the specific summary list item

When to include text links:

• When users can edit or change the information
• When actions are available for individual items
• On review or confirmation screens where corrections may be needed

When to omit text links:

• When information is read-only
• When no actions are available for the item
• On the final confirmation screens after submission