Description list

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

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

Default 2 col

Name: Example
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

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

Auto-column-width

Default auto column 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

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

Props

DescriptionList

Name	Type	Required	Default	Description
autoFitMinModifier	{ default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }	No
children	React.ReactNode	No	null	Anything that can be rendered inside of the list
className	string	No	''	Additional classes added to the list
columnModifier	{ default?: '1Col' \| '2Col' \| '3Col'; md?: '1Col' \| '2Col' \| '3Col'; lg?: '1Col' \| '2Col' \| '3Col'; xl?: '1Col' \| '2Col' \| '3Col'; '2xl'?: '1Col' \| '2Col' \| '3Col'; }	No		Sets the number of columns on the description list
isAutoColumnWidths	boolean	No		Sets the description list to format automatically.
isAutoFit	boolean	No		Sets the description list to auto fit.
isHorizontal	boolean	No	false	Sets the description list component term and description pair to a horizontal layout.
isInlineGrid	boolean	No		Modifies the description list display to inline-grid.

DescriptionListDescription

Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Anything that can be rendered inside of list description
className	string	No		Additional classes added to the DescriptionListDescription

DescriptionListGroup

Name	Type	Required	Default	Description
children	any	No		Any elements that can be rendered in the list group
className	string	No		Additional classes added to the DescriptionListGroup

DescriptionListTerm

Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Anything that can be rendered inside of list term
className	string	No		Additional classes added to the DescriptionListTerm

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	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	1rem
--pf-c-description-list__group--ColumnGap --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.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__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--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-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	undefined
--pf-c-description-list--GridTemplateColumns--minmax--min --pf-c-description-list--GridTemplateColumns--min undefined
	.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	undefined
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-2-col--GridTemplateColumns--count undefined
	.pf-c-description-list.pf-m-3-col	--pf-c-description-list--GridTemplateColumns--count	undefined
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-3-col--GridTemplateColumns--count undefined
	.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