Description list

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 2 col

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 3 col on lg

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 2 col

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

Horizontal 3 col on lg

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

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-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--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-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-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[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__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-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)

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines