Description list

A description list contains terms and their corresponding descriptions.

Examples

Default

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Term help text

Name: example
Namespace: mary-test
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: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Default, three column on lg breakpoint

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal, two column

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal, three column on lg breakpoint

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Compact

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Compact horizontal

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Fluid horizontal

Name: example
Namespace: mary-test
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: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto fit

Auto-fit basic

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto-fit, min width modified, grid template columns

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

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

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Responsive column definitions

Default, responsive columns

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal, responsive columns

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Responsive, horizontal, vertical group layout

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto-column-width

Default, auto columns width

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal, auto column width

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Inline grid

Default, inline grid

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display variant

Name: example
Namespace: mary-test
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: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display lg and card variant

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display 2xl and card variant

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display and card variant, three column on lg breakpoint

Name: example
Namespace: mary-test
Labels: example

Display and card variant, horizontal, modified term width

Name: example
Namespace: mary-test
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: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Documentation

Accessibility

Attribute	Applied to	Outcome
`title`	`.pf-c-description-list`	Provides an accessible title for the description list. Required
`tabindex="0"`	`.pf-c-description-list__text.pf-m-help-text`	Inserts the `.pf-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-c-description-list`	`<dl>`	Initiates the description list component. Required
`.pf-c-description-list__group`	`<div>`	Initiates a description list component group. Required
`.pf-c-description-list__term`	`<dt>`	Initiates a description list component term. Required
`.pf-c-description-list__description`	`<dd>`	Initiates a description list component description. Required
`.pf-c-description-list__text`	`<span>`, `<div>`	Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. Required
`.pf-c-description-list__term-icon`	`<span>`	Initiates a description list component term icon element.
`.pf-m-compact`	`.pf-c-description-list`	Modifies the description list for compact horizontal and vertical spacing.
`.pf-m-display-lg`	`.pf-c-description-list`	Modifies the description list to have large display styling.
`.pf-m-display-2xl`	`.pf-c-description-list`	Modifies the description list to have 2xl display styling.
`.pf-m-fluid`	`.pf-c-description-list.pf-m-horizontal`	Modifies the description list term width to be fluid.
`.pf-m-help-text`	`.pf-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-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-c-description-list`	Modifies the description list component term and description pair to a vertical layout.
`.pf-m-fill-columns`	`.pf-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-c-description-list`	Modifies the description list to format automatically.
`.pf-m-inline-grid`	`.pf-c-description-list`	Modifies the description list display to inline-grid.
`.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}`	`.pf-c-description-list`	Modifies the description list number of columns.
`--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}`	`.pf-c-description-list`	Modifies the min value of the `grid-template-columns` declaration at optional breakpoint.
`--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}`	`.pf-c-description-list.pf-m-horizontal`	Modifies the description list term width at optional breakpoint.

CSS variables


	.pf-c-description-list	--pf-c-description-list--RowGap	1.5rem
--pf-c-description-list--RowGap --pf-global--gutter--md $pf-global--gutter--md $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-description-list	--pf-c-description-list--ColumnGap	1.5rem
--pf-c-description-list--ColumnGap --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-description-list	--pf-c-description-list--GridTemplateColumns--count	1
	.pf-c-description-list	--pf-c-description-list--GridTemplateColumns--width	1fr
	.pf-c-description-list	--pf-c-description-list--GridTemplateColumns--min	0
	.pf-c-description-list	--pf-c-description-list--GridTemplateColumns	repeat(1, 1fr)
--pf-c-description-list--GridTemplateColumns repeat(--pf-c-description-list--GridTemplateColumns--count, --pf-c-description-list--GridTemplateColumns--width) repeat(1, 1fr)
	.pf-c-description-list	--pf-c-description-list__group--RowGap	0.5rem
--pf-c-description-list__group--RowGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__group--ColumnGap	0.5rem
--pf-c-description-list__group--ColumnGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__group--GridTemplateColumns	auto
	.pf-c-description-list	--pf-c-description-list__group--GridTemplateRows	auto 1fr
	.pf-c-description-list	--pf-c-description-list__group--GridColumn	auto
	.pf-c-description-list	--pf-c-description-list--m-compact--RowGap	1rem
--pf-c-description-list--m-compact--RowGap --pf-global--gutter $pf-global--gutter $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-description-list	--pf-c-description-list--m-compact--ColumnGap	0.5rem
--pf-c-description-list--m-compact--ColumnGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__term--Display	inline
	.pf-c-description-list	--pf-c-description-list__term--sm--Display	flex
	.pf-c-description-list	--pf-c-description-list__term--FontWeight	700
--pf-c-description-list__term--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-description-list	--pf-c-description-list__term--FontSize	0.875rem
--pf-c-description-list__term--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-description-list	--pf-c-description-list__term--LineHeight	1.3
--pf-c-description-list__term--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-description-list	--pf-c-description-list__term-icon--MinWidth	0.625rem
--pf-c-description-list__term-icon--MinWidth --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-description-list	--pf-c-description-list__term-icon--MarginRight	0.5rem
--pf-c-description-list__term-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__term-icon--Color	#6a6e73
--pf-c-description-list__term-icon--Color --pf-global--icon--Color--light $pf-global--icon--Color--light $pf-color-black-600 #6a6e73
	.pf-c-description-list	--pf-c-description-list--m-vertical__group--GridTemplateColumns	repeat(1)
--pf-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-c-description-list--GridTemplateColumns--count) repeat(1)
	.pf-c-description-list	--pf-c-description-list--m-vertical__group--GridTemplateRows	auto 1fr
	.pf-c-description-list	--pf-c-description-list--m-horizontal__term--width	12ch
	.pf-c-description-list	--pf-c-description-list--m-horizontal__description--width	minmax(10ch, auto)
	.pf-c-description-list	--pf-c-description-list--m-horizontal__group--GridTemplateColumns	12ch minmax(10ch, auto)
--pf-c-description-list--m-horizontal__group--GridTemplateColumns --pf-c-description-list__term--width --pf-c-description-list--m-horizontal__description--width --pf-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto)
	.pf-c-description-list	--pf-c-description-list--m-horizontal__group--GridTemplateRows	auto
	.pf-c-description-list	--pf-c-description-list--m-1-col--GridTemplateColumns--count	1
	.pf-c-description-list	--pf-c-description-list--m-2-col--GridTemplateColumns--count	2
	.pf-c-description-list	--pf-c-description-list--m-3-col--GridTemplateColumns--count	3
	.pf-c-description-list	--pf-c-description-list--m-auto-fit--GridTemplateColumns--min	15.625rem
	.pf-c-description-list	--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min	15.625rem
--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min --pf-c-description-list--m-auto-fit--GridTemplateColumns--min 15.625rem
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--TextDecorationColor	#8a8d90
--pf-c-description-list__text--m-help-text--TextDecorationColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--TextDecorationThickness	1px
--pf-c-description-list__text--m-help-text--TextDecorationThickness --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--TextDecorationOffset	0.25rem
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--hover--TextDecorationColor	#151515
--pf-c-description-list__text--m-help-text--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--focus--TextDecorationColor	#151515
--pf-c-description-list__text--m-help-text--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-description-list	--pf-c-description-list--m-display-lg__description--FontSize	1.125rem
--pf-c-description-list--m-display-lg__description--FontSize --pf-global--FontSize--lg $pf-global--FontSize--lg pf-font-prem(18px) 1.125rem
	.pf-c-description-list	--pf-c-description-list--m-display-2xl__description--FontSize	1.5rem
--pf-c-description-list--m-display-2xl__description--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-description-list[class*=pf-m-horizontal]	--pf-c-description-list__term--width	12ch
--pf-c-description-list__term--width --pf-c-description-list--m-horizontal__term--width 12ch
	.pf-c-description-list.pf-m-auto-column-widths	--pf-c-description-list--GridTemplateColumns--width	minmax(8ch, max-content)
	.pf-c-description-list.pf-m-auto-fit	--pf-c-description-list--GridTemplateColumns--minmax--min	0
--pf-c-description-list--GridTemplateColumns--minmax--min --pf-c-description-list--GridTemplateColumns--min 0
	.pf-c-description-list.pf-m-compact	--pf-c-description-list--RowGap	1rem
--pf-c-description-list--RowGap --pf-c-description-list--m-compact--RowGap --pf-global--gutter $pf-global--gutter $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-description-list.pf-m-compact	--pf-c-description-list--ColumnGap	0.5rem
--pf-c-description-list--ColumnGap --pf-c-description-list--m-compact--ColumnGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list.pf-m-fluid	--pf-c-description-list--m-horizontal__term--width	fit-content(20ch)
	.pf-c-description-list.pf-m-display-lg	--pf-c-description-list__description--FontSize	1.125rem
--pf-c-description-list__description--FontSize --pf-c-description-list--m-display-lg__description--FontSize --pf-global--FontSize--lg $pf-global--FontSize--lg pf-font-prem(18px) 1.125rem
	.pf-c-description-list.pf-m-display-2xl	--pf-c-description-list__description--FontSize	1.5rem
--pf-c-description-list__description--FontSize --pf-c-description-list--m-display-2xl__description--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-description-list__text.pf-m-help-text:hover	--pf-c-description-list__text--m-help-text--TextDecorationColor	#151515
--pf-c-description-list__text--m-help-text--TextDecorationColor --pf-c-description-list__text--m-help-text--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-description-list__text.pf-m-help-text:focus	--pf-c-description-list__text--m-help-text--TextDecorationColor	#151515
--pf-c-description-list__text--m-help-text--TextDecorationColor --pf-c-description-list__text--m-help-text--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-description-list.pf-m-1-col	--pf-c-description-list--GridTemplateColumns--count	1
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-1-col--GridTemplateColumns--count 1
	.pf-c-description-list.pf-m-2-col	--pf-c-description-list--GridTemplateColumns--count	2
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-2-col--GridTemplateColumns--count 2
	.pf-c-description-list.pf-m-3-col	--pf-c-description-list--GridTemplateColumns--count	3
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-3-col--GridTemplateColumns--count 3
	.pf-c-description-list.pf-m-horizontal	--pf-c-description-list__group--GridTemplateColumns	12ch minmax(10ch, auto)
--pf-c-description-list__group--GridTemplateColumns --pf-c-description-list--m-horizontal__group--GridTemplateColumns --pf-c-description-list__term--width --pf-c-description-list--m-horizontal__description--width --pf-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto)
	.pf-c-description-list.pf-m-horizontal	--pf-c-description-list__group--GridTemplateRows	auto
--pf-c-description-list__group--GridTemplateRows --pf-c-description-list--m-horizontal__group--GridTemplateRows auto
	.pf-c-description-list.pf-m-vertical	--pf-c-description-list__group--GridTemplateColumns	repeat(1)
--pf-c-description-list__group--GridTemplateColumns --pf-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-c-description-list--GridTemplateColumns--count) repeat(1)
	.pf-c-description-list.pf-m-vertical	--pf-c-description-list__group--GridTemplateRows	auto 1fr
--pf-c-description-list__group--GridTemplateRows --pf-c-description-list--m-vertical__group--GridTemplateRows auto 1fr

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines