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 gridDocumentationCSS 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 columns 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

Documentation

Accessibility

AttributeApplied toOutcome
title.pf-c-description-listProvides an accessible title for the description list. Required

Usage

ClassApplied toOutcome
.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<div>Initiates a description list component text element. Required
.pf-m-horizontal.pf-c-description-listModifies the description list component term and description pair to a horizontal layout.
.pf-m-auto-column-widths.pf-c-description-listModifies the description list to format automatically.
.pf-m-inline-grid.pf-c-description-listModifies the description list display to inline-grid.
.pf-m-{1,2,3}-col{-on-[md, lg, xl, 2xl]}.pf-c-description-listModifies the description list number of columns.

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