Description List#

Description list consists of terms and descriptions.

Merchant: Yee Store
Payment Amount: €1.243,25
Tinka Product: Pay In 14 Days
Loading Value: placeholder content

Properties

Highlight

Spacing

Examples#

Customising Colour#

Term: Description
Term: Description

Grouping pairs of DT and DD#

Term: Description
Term: Description

<dt> and <dd> do not have to be grouped together. But it might be useful to do it.

Assign .group.dl to the wrapper to maintain the look of a description list.

You can also opt for .contents class for the wrapper. (Read more about display: contents here)

Term: Description
Term: Description

Bring your own divider#

Assign .dl-divider to empty <div> to manually add a border.

Term: Description
Term: Description

On the children level, use with-divider to add a divider line onto the element.

Term: Description
Term: Description

No Dividers#

Use no-divider to remove a divider on the child elements. This way you can still maintain the border on the .dl element.

Alternatively, use border-transparent on the .dl element to disable divider for everyone.

Term: Description
Term: Description
Term: Description
Term: Description

Term: Description
Term: Description
Term: Description
Term: Description

Adjust the spacing#

Use .dl-spacing-normal or .dl-spacing-snug to implement different spacing on the list. You can even use modifiers in Tailwind to implement a responsive design.

By default, .dl impelements the style of .dl-spacing-normal.

Choose to highlight descriptions instead of terms#

Depending on your context, the description might be more important than the terms.

Use .dl-highlight-terms or .dl-highlight-descriptions to make the term or the description standout.

By default, .dl impelements the style of .dl-highlight-terms.

Term: Description
Term: Description
Term: Description (an one-off highlight)

Term: Description
Term: Description

Adjust layout#

By default, .dl implements a CSS grid layout with 6 columns without gutters. Terms and Descriptions each span 3 columns to create a half-and-half layout.

If you have an item that has especially long content. You can opt for an uneven layout by assigning col-span-* classes to the elements.

Term: Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description

Advanced: Stacking#

If you do not want columns at all (for super narrow spaces):

Non-Responsive:

Term: Description
Term: Description

Responsive:

Term: Description
Term: Description