Description lists are a way to organise terms and definitions, making content easier to scan and understand at a glance.
Description lists make it easy to present terms and definitions clearly, helping users quickly scan and understand key information. You can also add styling or icons to enhance readability and make each term's purpose more obvious. With flexible formatting options, you have full control over how the lists appear, ensuring they meet your design and content.
When to use this component
Use description lists when you want to present terms and their definitions or related information in an organised, easy-to-read format. They are excellent for helping users quickly understand key details without overwhelming the page with too much text.
It's a good idea to use separate description entries for each key item, keeping each pair distinct to avoid confusion. For minor details, consider using a smaller font or subtle styling to keep it less prominent.
If users need to select or interact with options, it's better to use checkboxes, radio buttons, or toggle switches instead of static lists.
Description lists can also be a great alternative to tables when you want to emphasise information without sacrificing a clean, structured design.
Examples in GOSS products
- Card component to display data in a structure way
- Summary block component to show a summary of information
Accessibility considerations
Description lists are excellent for accessibility because they provide clear, structured information, which screen readers can navigate easily, making content accessible to users with different abilities.
The terms and descriptions should be concise and descriptive, helping users understand each item at a glance.
To enhance accessibility, ensure sufficient contrast between text and background, and use spacing and alignment to keep the list clear and readable.
Additionally, avoid using description lists for interactive elements, like options or controls, and test with assistive technologies to ensure compatibility.
Basic description list
A description list component with no additional configuration options, keeps things simple, presenting terms and their definitions in a clear, easy-to-read format.
By default, it displays a list of terms and descriptions without extra styling or interactive elements, making it perfect for straightforward information.
Each item in the list can be set up with a label for the term and a detail for the description, making it easy to organise and reference key details in a tidy, organised way.
- Defines a term or name
- Defines the description or explanation for the term.
- Username
- Your unique name to log in.
- Password
- A secret code to keep your account safe.
- Your email for updates and notifications.
<dl>
<dt>Defines a term or name</dt>
<dd>Defines the description or explanation for the term.</dd>
<dt>Username</dt>
<dd>Your unique name to log in.</dd>
<dt>Password</dt>
<dd>A secret code to keep your account safe.</dd>
<dt>Email</dt>
<dd>Your email for updates and notifications.</dd>
</dl>Lists in description list
A description list component with ordered and unordered list structures.
- Steps to complete the task
-
- Gather all necessary materials.
- Follow the instructions carefully.
- Submit your work for review.
- Key features of the product
-
- Easy to use
- Customisable settings
- Compatible with various devices
<dl>
<dt>Steps to complete the task</dt>
<dd>
<ol>
<li>Gather all necessary materials.</li>
<li>Follow the instructions carefully.</li>
<li>Submit your work for review.</li>
</ol>
</dd>
<dt>Key features of the product</dt>
<dd>
<ul>
<li>Easy to use</li>
<li>Customisable settings</li>
<li>Compatible with various devices</li>
</ul>
</dd>
</dl>Share this page
