Patternfly Logo

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

Default

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

Props

DescriptionList properties
NameTypeRequiredDefaultDescription
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.
isHorizontalbooleanNofalseSets the description list component term and description pair to a horizontal layout.
isInlineGridbooleanNoModifies the description list display to inline-grid.
DescriptionListDescription properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered inside of list description
classNamestringNoAdditional classes added to the DescriptionListDescription
DescriptionListGroup properties
NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the list group
classNamestringNoAdditional classes added to the DescriptionListGroup
DescriptionListTerm properties
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-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--GridTemplateColumns--min
15.625rem
.pf-c-description-list--pf-c-description-list--GridTemplateColumns--minmax--min
15.625rem
.pf-c-description-list.pf-m-horizontal--pf-c-description-list__group--GridTemplateColumns
12ch minmax(10ch, auto)
.pf-c-description-list.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
15.625rem
.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

View source on GitHub