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

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

Attribute
Applied to
Outcome
title
.pf-c-description-list
Provides an accessible title for the description list. Required

Usage

Class
Applied to
Outcome
.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-list
Modifies the description list component term and description pair to a horizontal layout.
.pf-m-auto-column-widths
.pf-c-description-list
Modifies the description list to format automatically.
.pf-m-inline-grid
.pf-c-description-list
Modifies the description list display to inline-grid.
.pf-m-{1,2,3}-col{-on-[md, lg, xl, 2xl]}
.pf-c-description-list
Modifies the description list number of columns.
--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}
.pf-c-description-list
Modifies 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-horizontal
Modifies 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
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