Skip to content
Patternfly Logo

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
Labels
example
Pod selector
Annotation
2 Annotations

Default 2 col

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Default 3 col on lg

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal 2 col

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal 3 col on lg

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

Auto-column-width

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

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

Props

DescriptionList

NameTypeRequiredDefaultDescription
autoFitMinModifier{ default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }No
childrenReact.ReactNodeNonullAnything that can be rendered inside of the list
classNamestringNo''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'; }NoSets the number of columns on the description list
isAutoColumnWidthsbooleanNoSets the description list to format automatically.
isAutoFitbooleanNoSets the description list to auto fit.
isHorizontalbooleanNofalseSets the description list component term and description pair to a horizontal layout.
isInlineGridbooleanNoModifies the description list display to inline-grid.

DescriptionListDescription

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered inside of list description
classNamestringNoAdditional classes added to the DescriptionListDescription

DescriptionListGroup

NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the list group
classNamestringNoAdditional classes added to the DescriptionListGroup

DescriptionListTerm

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesAnything that can be rendered inside of list term
classNamestringNoAdditional classes added to the DescriptionListTerm

CSS variables

.pf-c-description-list--pf-c-description-list--RowGap
1.5rem
.pf-c-description-list--pf-c-description-list--ColumnGap
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--pf-c-description-list__group--RowGap
0.5rem
.pf-c-description-list--pf-c-description-list__group--ColumnGap
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--pf-c-description-list__term--FontSize
0.875rem
.pf-c-description-list--pf-c-description-list--m-vertical__group--GridTemplateColumns
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--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--pf-c-description-list__text--m-help-text--TextDecorationColor
#8a8d90
.pf-c-description-list--pf-c-description-list__text--m-help-text--TextDecorationThickness
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--pf-c-description-list__text--m-help-text--focus--TextDecorationColor
#151515
.pf-c-description-list[class*="pf-m-horizontal"]--pf-c-description-list__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__text.pf-m-help-text:hover--pf-c-description-list__text--m-help-text--TextDecorationColor
#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.pf-m-1-col--pf-c-description-list--GridTemplateColumns--count
1
.pf-c-description-list.pf-m-2-col--pf-c-description-list--GridTemplateColumns--count
undefined
.pf-c-description-list.pf-m-3-col--pf-c-description-list--GridTemplateColumns--count
undefined
.pf-c-description-list.pf-m-horizontal--pf-c-description-list__group--GridTemplateColumns
12ch minmax(10ch, auto)
.pf-c-description-list.pf-m-vertical--pf-c-description-list__group--GridTemplateColumns
repeat(1)

View source on GitHub