The metadata component is a way to organise and explain a block of key-value pairs of related information.
When to use this component
Use the metadata component when you need to display a group of properties and their associated values for an object, product or system. For example, a product's specification.
How to use this component
A description list (
<dl>) is used to divide the metadata information into terms (
<dt>) and descriptions (
Use the grid system to build the layout of two columns of metadata, setting the number of columns (
.ons-col-<n>@m) to ensure the terms display on a single line where possible.
metadataLabel to succinctly 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)