Cookies on

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Description list

Use a description list to organise and display important information about a business, object, product or system.

Example not found: design-system/components/metadata/example-metadata

How to use this component

A description list (<dl>) is used to divide the description list information into terms (<dt>) and descriptions (<dd>).

Use the grid system to build the layout of two columns of description list, setting the number of columns (.ons-col-<n>@m) to ensure the terms display on a single line where possible.

Use the metadataLabel to effectively describe the description list.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Metadata’ component on GitHub (opens in a new tab)