PatternFly

Description list

A description list contains terms and their corresponding descriptions.

Examples

Default

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Term help text

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Default, two column

Name
This is a long description that should wrap to multiple lines in a multi-column layout.
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Default, three column on lg breakpoint

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal, two column

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal, three column on lg breakpoint

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Compact

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Compact horizontal

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Fluid horizontal

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Column fill

Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. Note: using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row.

Name
This is a long description that should wrap to multiple lines in a multi-column layout.
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Auto fit

Auto-fit basic

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Auto-fit, min width modified, grid template columns

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Auto-fit, min width modified, responsive grid template columns

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Responsive column definitions

Default, responsive columns

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal, responsive columns

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Responsive, horizontal, vertical group layout

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Auto-column-width

Default, auto columns width

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal, auto column width

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Inline grid

Default, inline grid

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Display variant

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Card variants

Cards can be used as description list group wrappers. Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.

Description list group wrapper as card

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Display lg and card variant

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Display 2xl and card variant

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Display and card variant, three column on lg breakpoint

Name
example
Namespace
Labels
example

Display and card variant, horizontal, modified term width

Name
example
Namespace
Labels
example

With icons

Icons on terms

This is a long description that should wrap to multiple lines in cases where the viewport is quite narrow.
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Documentation

Accessibility

Attribute
Applied to
Outcome
title
.pf-v5-c-description-list
Provides an accessible title for the description list. Required
tabindex="0"
.pf-v5-c-description-list__text.pf-m-help-text
Inserts the .pf-v5-c-description-list__text into the tab order of the page so that it is focusable. Required when the element is clickable

Usage

Class
Applied to
Outcome
.pf-v5-c-description-list
<dl>
Initiates the description list component. Required
.pf-v5-c-description-list__group
<div>
Initiates a description list component group. Required
.pf-v5-c-description-list__term
<dt>
Initiates a description list component term. Required
.pf-v5-c-description-list__description
<dd>
Initiates a description list component description. Required
.pf-v5-c-description-list__text
<span>, <div>
Initiates a description list component text element. Use a <span> when a child of .pf-v5-c-description-list__term. Required
.pf-v5-c-description-list__term-icon
<span>
Initiates a description list component term icon element.
.pf-m-compact
.pf-v5-c-description-list
Modifies the description list for compact horizontal and vertical spacing.
.pf-m-display-lg
.pf-v5-c-description-list
Modifies the description list to have large display styling.
.pf-m-display-2xl
.pf-v5-c-description-list
Modifies the description list to have 2xl display styling.
.pf-m-fluid
.pf-v5-c-description-list.pf-m-horizontal
Modifies the description list term width to be fluid.
.pf-m-help-text
.pf-v5-c-description-list__text
Indicates there is more information available for the description list component term text.
.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}
.pf-v5-c-description-list
Modifies the description list component term and description pair to a horizontal layout.
.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}
.pf-v5-c-description-list
Modifies the description list component term and description pair to a vertical layout.
.pf-m-fill-columns
.pf-v5-c-description-list
Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.
.pf-m-auto-column-widths
.pf-v5-c-description-list
Modifies the description list to format automatically.
.pf-m-inline-grid
.pf-v5-c-description-list
Modifies the description list display to inline-grid.
.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}
.pf-v5-c-description-list
Modifies the description list number of columns.
--pf-v5-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}
.pf-v5-c-description-list
Modifies the min value of the grid-template-columns declaration at optional breakpoint.
--pf-v5-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}
.pf-v5-c-description-list.pf-m-horizontal
Modifies the description list term width at optional breakpoint.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-description-list--pf-v5-c-description-list--RowGap
1.5rem
.pf-v5-c-description-list--pf-v5-c-description-list--ColumnGap
1.5rem
.pf-v5-c-description-list--pf-v5-c-description-list--GridTemplateColumns--count
1
.pf-v5-c-description-list--pf-v5-c-description-list--GridTemplateColumns--width
1fr
.pf-v5-c-description-list--pf-v5-c-description-list--GridTemplateColumns--min
0
.pf-v5-c-description-list--pf-v5-c-description-list--GridTemplateColumns
repeat(1, 1fr)
.pf-v5-c-description-list--pf-v5-c-description-list__group--RowGap
0.5rem
.pf-v5-c-description-list--pf-v5-c-description-list__group--ColumnGap
0.5rem
.pf-v5-c-description-list--pf-v5-c-description-list__group--GridTemplateColumns
auto
.pf-v5-c-description-list--pf-v5-c-description-list__group--GridTemplateRows
auto 1fr
.pf-v5-c-description-list--pf-v5-c-description-list__group--GridColumn
auto
.pf-v5-c-description-list--pf-v5-c-description-list--m-compact--RowGap
1rem
.pf-v5-c-description-list--pf-v5-c-description-list--m-compact--ColumnGap
0.5rem
.pf-v5-c-description-list--pf-v5-c-description-list__term--Display
inline
.pf-v5-c-description-list--pf-v5-c-description-list__term--sm--Display
flex
.pf-v5-c-description-list--pf-v5-c-description-list__term--FontWeight
700
.pf-v5-c-description-list--pf-v5-c-description-list__term--FontSize
0.875rem
.pf-v5-c-description-list--pf-v5-c-description-list__term--LineHeight
1.3
.pf-v5-c-description-list--pf-v5-c-description-list__term-icon--MinWidth
0.75rem
.pf-v5-c-description-list--pf-v5-c-description-list__term-icon--MarginRight
0.5rem
.pf-v5-c-description-list--pf-v5-c-description-list__term-icon--Color
#6a6e73
.pf-v5-c-description-list--pf-v5-c-description-list--m-vertical__group--GridTemplateColumns
repeat(1)
.pf-v5-c-description-list--pf-v5-c-description-list--m-vertical__group--GridTemplateRows
auto 1fr
.pf-v5-c-description-list--pf-v5-c-description-list--m-horizontal__term--width
12ch
.pf-v5-c-description-list--pf-v5-c-description-list--m-horizontal__description--width
minmax(10ch, auto)
.pf-v5-c-description-list--pf-v5-c-description-list--m-horizontal__group--GridTemplateColumns
12ch minmax(10ch, auto)
.pf-v5-c-description-list--pf-v5-c-description-list--m-horizontal__group--GridTemplateRows
auto
.pf-v5-c-description-list--pf-v5-c-description-list--m-1-col--GridTemplateColumns--count
1
.pf-v5-c-description-list--pf-v5-c-description-list--m-2-col--GridTemplateColumns--count
2
.pf-v5-c-description-list--pf-v5-c-description-list--m-3-col--GridTemplateColumns--count
3
.pf-v5-c-description-list--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min
15.625rem
.pf-v5-c-description-list--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min
15.625rem
.pf-v5-c-description-list--pf-v5-c-description-list__text--m-help-text--TextDecorationColor
#8a8d90
.pf-v5-c-description-list--pf-v5-c-description-list__text--m-help-text--TextDecorationThickness
1px
.pf-v5-c-description-list--pf-v5-c-description-list__text--m-help-text--TextDecorationOffset
0.25rem
.pf-v5-c-description-list--pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor
#151515
.pf-v5-c-description-list--pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor
#151515
.pf-v5-c-description-list--pf-v5-c-description-list--m-display-lg__description--FontSize
1.125rem
.pf-v5-c-description-list--pf-v5-c-description-list--m-display-2xl__description--FontSize
1.5rem
.pf-v5-c-description-list[class*=pf-m-horizontal]--pf-v5-c-description-list__term--width
12ch
.pf-v5-c-description-list.pf-m-auto-column-widths--pf-v5-c-description-list--GridTemplateColumns--width
minmax(8ch, max-content)
.pf-v5-c-description-list.pf-m-auto-fit--pf-v5-c-description-list--GridTemplateColumns--minmax--min
0
.pf-v5-c-description-list.pf-m-compact--pf-v5-c-description-list--RowGap
1rem
.pf-v5-c-description-list.pf-m-compact--pf-v5-c-description-list--ColumnGap
0.5rem
.pf-v5-c-description-list.pf-m-fluid--pf-v5-c-description-list--m-horizontal__term--width
fit-content(20ch)
.pf-v5-c-description-list.pf-m-display-lg--pf-v5-c-description-list__description--FontSize
1.125rem
.pf-v5-c-description-list.pf-m-display-2xl--pf-v5-c-description-list__description--FontSize
1.5rem
.pf-v5-c-description-list__text.pf-m-help-text:hover--pf-v5-c-description-list__text--m-help-text--TextDecorationColor
#151515
.pf-v5-c-description-list__text.pf-m-help-text:focus--pf-v5-c-description-list__text--m-help-text--TextDecorationColor
#151515
.pf-v5-c-description-list.pf-m-1-col--pf-v5-c-description-list--GridTemplateColumns--count
1
.pf-v5-c-description-list.pf-m-2-col--pf-v5-c-description-list--GridTemplateColumns--count
2
.pf-v5-c-description-list.pf-m-3-col--pf-v5-c-description-list--GridTemplateColumns--count
3
.pf-v5-c-description-list.pf-m-horizontal--pf-v5-c-description-list__group--GridTemplateColumns
12ch minmax(10ch, auto)
.pf-v5-c-description-list.pf-m-horizontal--pf-v5-c-description-list__group--GridTemplateRows
auto
.pf-v5-c-description-list.pf-m-vertical--pf-v5-c-description-list__group--GridTemplateColumns
repeat(1)
.pf-v5-c-description-list.pf-m-vertical--pf-v5-c-description-list__group--GridTemplateRows
auto 1fr

View source on GitHub