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
ExamplesResponsive column definitionsAuto-column-widthInline gridPropsCSS Variables

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
isHorizontalbooleanNofalseSets the description list component term and description pair to a horizontal layout.
isAutoColumnWidthsbooleanNoSets the description list to format automatically.
isInlineGridbooleanNoModifies the description list display to inline-grid.
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
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--RowGapc_description_list_RowGap
1.5rem
.pf-c-description-list--pf-c-description-list--ColumnGapc_description_list_ColumnGap
1.5rem
.pf-c-description-list--pf-c-description-list--GridTemplateColumns--countc_description_list_GridTemplateColumns_count
1
.pf-c-description-list--pf-c-description-list--GridTemplateColumns--widthc_description_list_GridTemplateColumns_width
1fr
.pf-c-description-list--pf-c-description-list--GridTemplateColumnsc_description_list_GridTemplateColumns
repeat(1, 1fr)
.pf-c-description-list--pf-c-description-list__group--RowGapc_description_list__group_RowGap
0.5rem
.pf-c-description-list--pf-c-description-list__group--ColumnGapc_description_list__group_ColumnGap
1rem
.pf-c-description-list--pf-c-description-list__group--GridTemplateColumnsc_description_list__group_GridTemplateColumns
auto
.pf-c-description-list--pf-c-description-list__group--GridColumnc_description_list__group_GridColumn
auto
.pf-c-description-list--pf-c-description-list__term--FontWeightc_description_list__term_FontWeight
700
.pf-c-description-list--pf-c-description-list__term--FontSizec_description_list__term_FontSize
0.875rem
.pf-c-description-list--pf-c-description-list--m-horizontal__term--widthc_description_list_m_horizontal__term_width
14ch
.pf-c-description-list--pf-c-description-list--m-horizontal__description--widthc_description_list_m_horizontal__description_width
minmax(10ch, auto)
.pf-c-description-list--pf-c-description-list--m-horizontal__group--GridTemplateColumnsc_description_list_m_horizontal__group_GridTemplateColumns
14ch minmax(10ch, auto)
.pf-c-description-list--pf-c-description-list--m-1-col--GridTemplateColumns--countc_description_list_m_1_col_GridTemplateColumns_count
1
.pf-c-description-list.pf-m-horizontal--pf-c-description-list__group--GridTemplateColumnsc_description_list__group_GridTemplateColumns
14ch minmax(10ch, auto)
.pf-c-description-list.pf-m-auto-column-widths--pf-c-description-list--GridTemplateColumns--widthc_description_list_GridTemplateColumns_width
minmax(8ch, max-content)
.pf-c-description-list.pf-m-1-col--pf-c-description-list--GridTemplateColumns--countc_description_list_GridTemplateColumns_count
1
.pf-c-description-list.pf-m-2-col--pf-c-description-list--GridTemplateColumns--countc_description_list_GridTemplateColumns_count
undefined
.pf-c-description-list.pf-m-3-col--pf-c-description-list--GridTemplateColumns--countc_description_list_GridTemplateColumns_count
undefined