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.

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

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