Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.
Each row of the detail list comprises a:
- label, a descriptive or informative label for your content, for example, 'Location'
- content, the piece of information itself, for example, 'East Gippsland'.
The detail list is used to display:
- metadata, for example, ‘Published date' (which shows as '22 March 2023’)
- status, for example of a program or grant.
Only use the detail list for simple information. For data or complex information, consider using a table.
- Use single words only for the label.
- Include a link if you need to.
- Keep the summary content and labels clear and concise.
- Align all summary content to the longest label.
- Don't use labels for unrelated summary content.
- Don't use it to surface information that is not important to users.
- Don't use with complex or long form content.
When a link is present, the detail list uses the link colour for interaction states.