Skip to content
Patternfly Logo

Description list

Examples

Default

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Term help text

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

Compact

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Compact horizontal

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Fluid horizontal

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

Responsive horizontal, vertical group layout

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
tabindex="0"
.pf-c-description-list__text.pf-m-help-text
Inserts the .pf-c-description-list__text into the tab order of the page so that it is focusable. Required when the element is clickable

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-compact
.pf-c-description-list
Modifies the description list for compact horizontal and vertical spacing.
.pf-m-fluid
.pf-c-description-list.pf-m-horizontal
Modifies the description list term width to be fluid.
.pf-m-help-text
.pf-c-description-list__text
Indicates there is more information available for the description list component term text.
.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}
.pf-c-description-list
Modifies the description list component term and description pair to a horizontal layout.
.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}
.pf-c-description-list
Modifies the description list component term and description pair to a vertical 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-[sm, 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-vertical__group--GridTemplateColumns
repeat(1)
.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--m-auto-fit--GridTemplateColumns--min
15.625rem
.pf-c-description-list--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min
15.625rem
.pf-c-description-list--pf-c-description-list__text--m-help-text--TextDecorationColor
#8a8d90
.pf-c-description-list--pf-c-description-list__text--m-help-text--TextDecorationThickness
1px
.pf-c-description-list--pf-c-description-list__text--m-help-text--TextDecorationOffset
0.25rem
.pf-c-description-list--pf-c-description-list__text--m-help-text--hover--TextDecorationColor
#151515
.pf-c-description-list--pf-c-description-list__text--m-help-text--focus--TextDecorationColor
#151515
.pf-c-description-list[class*=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
undefined
.pf-c-description-list__text.pf-m-help-text:hover--pf-c-description-list__text--m-help-text--TextDecorationColor
#151515
.pf-c-description-list__text.pf-m-help-text:focus--pf-c-description-list__text--m-help-text--TextDecorationColor
#151515
.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
.pf-c-description-list.pf-m-horizontal--pf-c-description-list__group--GridTemplateColumns
12ch minmax(10ch, auto)
.pf-c-description-list.pf-m-vertical--pf-c-description-list__group--GridTemplateColumns
repeat(1)

View source on GitHub