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

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

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

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<span>, <div>Initiates a description list component text element. Use a <span> when a child of .pf-c-description-list__term. 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.
--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}.pf-c-description-listModifies the min value of the grid-template-columns declaration.
--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}.pf-c-description-list.pf-m-horizontalModifies the value for --pf-c-description-list--m-horizontal__term--width declaration.

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
14ch
.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
14ch minmax(10ch, auto)
.pf-c-description-list--pf-c-description-list--m-1-col--GridTemplateColumns--count
1
.pf-c-description-list.pf-m-horizontal--pf-c-description-list__group--GridTemplateColumns
14ch minmax(10ch, auto)
.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-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