Examples
Term help text
- Name
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Default, two column
- Name
-
This is a long description that should wrap to multiple lines in a multi-column layout.
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Default, three column on lg breakpoint
- Name
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Horizontal, two column
- Name
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Horizontal, three column on lg breakpoint
- 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
Column fill
Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. Note: using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row.
- Name
-
This is a long description that should wrap to multiple lines in a multi-column layout.
- 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
Display variant
- Name
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Card variants
Cards can be used as description list group wrappers. Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.
Description list group wrapper as card
- Name
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Display lg and card variant
- Name
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Display 2xl and card variant
- Name
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Display and card variant, three column on lg breakpoint
- Name
-
example
- Namespace
- Labels
-
example
Display and card variant, horizontal, modified term width
- Name
-
example
- Namespace
- Labels
-
example
With icons
Icons on terms
- This is a long description that should wrap to multiple lines in cases where the viewport is quite narrow.
-
example
- Namespace
- Labels
-
example
- Pod selector
-
- Annotation
-
2 Annotations
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
title | .pf-v5-c-description-list | Provides an accessible title for the description list. Required |
tabindex="0" | .pf-v5-c-description-list__text.pf-m-help-text | Inserts the .pf-v5-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-v5-c-description-list | <dl> | Initiates the description list component. Required |
.pf-v5-c-description-list__group | <div> | Initiates a description list component group. Required |
.pf-v5-c-description-list__term | <dt> | Initiates a description list component term. Required |
.pf-v5-c-description-list__description | <dd> | Initiates a description list component description. Required |
.pf-v5-c-description-list__text | <span>, <div> | Initiates a description list component text element. Use a <span> when a child of .pf-v5-c-description-list__term. Required |
.pf-v5-c-description-list__term-icon | <span> | Initiates a description list component term icon element. |
.pf-m-compact | .pf-v5-c-description-list | Modifies the description list for compact horizontal and vertical spacing. |
.pf-m-display-lg | .pf-v5-c-description-list | Modifies the description list to have large display styling. |
.pf-m-display-2xl | .pf-v5-c-description-list | Modifies the description list to have 2xl display styling. |
.pf-m-fluid | .pf-v5-c-description-list.pf-m-horizontal | Modifies the description list term width to be fluid. |
.pf-m-help-text | .pf-v5-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-v5-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-v5-c-description-list | Modifies the description list component term and description pair to a vertical layout. |
.pf-m-fill-columns | .pf-v5-c-description-list | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
.pf-m-auto-column-widths | .pf-v5-c-description-list | Modifies the description list to format automatically. |
.pf-m-inline-grid | .pf-v5-c-description-list | Modifies the description list display to inline-grid. |
.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]} | .pf-v5-c-description-list | Modifies the description list number of columns. |
--pf-v5-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width} | .pf-v5-c-description-list | Modifies the min value of the grid-template-columns declaration at optional breakpoint. |
--pf-v5-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width} | .pf-v5-c-description-list.pf-m-horizontal | Modifies the description list term width at optional breakpoint. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-description-list | --pf-v5-c-description-list--RowGap | 1.5rem | ||
--pf-v5-c-description-list--RowGap --pf-v5-global--gutter--md $pf-v5-global--gutter--md $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--ColumnGap | 1.5rem | ||
--pf-v5-c-description-list--ColumnGap --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--GridTemplateColumns--count | 1 | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--GridTemplateColumns--width | 1fr | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--GridTemplateColumns--min | 0 | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--GridTemplateColumns | repeat(1, 1fr) | ||
--pf-v5-c-description-list--GridTemplateColumns repeat(--pf-v5-c-description-list--GridTemplateColumns--count, --pf-v5-c-description-list--GridTemplateColumns--width) repeat(1, 1fr) | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__group--RowGap | 0.5rem | ||
--pf-v5-c-description-list__group--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__group--ColumnGap | 0.5rem | ||
--pf-v5-c-description-list__group--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__group--GridTemplateColumns | auto | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list__group--GridTemplateRows | auto 1fr | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list__group--GridColumn | auto | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-compact--RowGap | 1rem | ||
--pf-v5-c-description-list--m-compact--RowGap --pf-v5-global--gutter $pf-v5-global--gutter $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-compact--ColumnGap | 0.5rem | ||
--pf-v5-c-description-list--m-compact--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term--Display | inline | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term--sm--Display | flex | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term--FontWeight | 700 | ||
--pf-v5-c-description-list__term--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term--FontSize | 0.875rem | ||
--pf-v5-c-description-list__term--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term--LineHeight | 1.3 | ||
--pf-v5-c-description-list__term--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3 | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term-icon--MinWidth | 0.75rem | ||
--pf-v5-c-description-list__term-icon--MinWidth --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term-icon--MarginRight | 0.5rem | ||
--pf-v5-c-description-list__term-icon--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__term-icon--Color | #6a6e73 | ||
--pf-v5-c-description-list__term-icon--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-vertical__group--GridTemplateColumns | repeat(1) | ||
--pf-v5-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-v5-c-description-list--GridTemplateColumns--count) repeat(1) | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-vertical__group--GridTemplateRows | auto 1fr | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-horizontal__term--width | 12ch | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-horizontal__description--width | minmax(10ch, auto) | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-horizontal__group--GridTemplateColumns | 12ch minmax(10ch, auto) | ||
--pf-v5-c-description-list--m-horizontal__group--GridTemplateColumns --pf-v5-c-description-list__term--width --pf-v5-c-description-list--m-horizontal__description--width --pf-v5-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto) | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-horizontal__group--GridTemplateRows | auto | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-1-col--GridTemplateColumns--count | 1 | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-2-col--GridTemplateColumns--count | 2 | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-3-col--GridTemplateColumns--count | 3 | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min | 15.625rem | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min | 15.625rem | ||
--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min 15.625rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__text--m-help-text--TextDecorationColor | #8a8d90 | ||
--pf-v5-c-description-list__text--m-help-text--TextDecorationColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness | 1px | ||
--pf-v5-c-description-list__text--m-help-text--TextDecorationThickness --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__text--m-help-text--TextDecorationOffset | 0.25rem | ||
| .pf-v5-c-description-list | --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor | #151515 | ||
--pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor | #151515 | ||
--pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-display-lg__description--FontSize | 1.125rem | ||
--pf-v5-c-description-list--m-display-lg__description--FontSize --pf-v5-global--FontSize--lg $pf-v5-global--FontSize--lg pf-font-prem(18px) 1.125rem | ||||
| .pf-v5-c-description-list | --pf-v5-c-description-list--m-display-2xl__description--FontSize | 1.5rem | ||
--pf-v5-c-description-list--m-display-2xl__description--FontSize --pf-v5-global--FontSize--2xl $pf-v5-global--FontSize--2xl pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-description-list[class*=pf-m-horizontal] | --pf-v5-c-description-list__term--width | 12ch | ||
--pf-v5-c-description-list__term--width --pf-v5-c-description-list--m-horizontal__term--width 12ch | ||||
| .pf-v5-c-description-list.pf-m-auto-column-widths | --pf-v5-c-description-list--GridTemplateColumns--width | minmax(8ch, max-content) | ||
| .pf-v5-c-description-list.pf-m-auto-fit | --pf-v5-c-description-list--GridTemplateColumns--minmax--min | 0 | ||
--pf-v5-c-description-list--GridTemplateColumns--minmax--min --pf-v5-c-description-list--GridTemplateColumns--min 0 | ||||
| .pf-v5-c-description-list.pf-m-compact | --pf-v5-c-description-list--RowGap | 1rem | ||
--pf-v5-c-description-list--RowGap --pf-v5-c-description-list--m-compact--RowGap --pf-v5-global--gutter $pf-v5-global--gutter $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-description-list.pf-m-compact | --pf-v5-c-description-list--ColumnGap | 0.5rem | ||
--pf-v5-c-description-list--ColumnGap --pf-v5-c-description-list--m-compact--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-description-list.pf-m-fluid | --pf-v5-c-description-list--m-horizontal__term--width | fit-content(20ch) | ||
| .pf-v5-c-description-list.pf-m-display-lg | --pf-v5-c-description-list__description--FontSize | 1.125rem | ||
--pf-v5-c-description-list__description--FontSize --pf-v5-c-description-list--m-display-lg__description--FontSize --pf-v5-global--FontSize--lg $pf-v5-global--FontSize--lg pf-font-prem(18px) 1.125rem | ||||
| .pf-v5-c-description-list.pf-m-display-2xl | --pf-v5-c-description-list__description--FontSize | 1.5rem | ||
--pf-v5-c-description-list__description--FontSize --pf-v5-c-description-list--m-display-2xl__description--FontSize --pf-v5-global--FontSize--2xl $pf-v5-global--FontSize--2xl pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-description-list__text.pf-m-help-text:hover | --pf-v5-c-description-list__text--m-help-text--TextDecorationColor | #151515 | ||
--pf-v5-c-description-list__text--m-help-text--TextDecorationColor --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-description-list__text.pf-m-help-text:focus | --pf-v5-c-description-list__text--m-help-text--TextDecorationColor | #151515 | ||
--pf-v5-c-description-list__text--m-help-text--TextDecorationColor --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-description-list.pf-m-1-col | --pf-v5-c-description-list--GridTemplateColumns--count | 1 | ||
--pf-v5-c-description-list--GridTemplateColumns--count --pf-v5-c-description-list--m-1-col--GridTemplateColumns--count 1 | ||||
| .pf-v5-c-description-list.pf-m-2-col | --pf-v5-c-description-list--GridTemplateColumns--count | 2 | ||
--pf-v5-c-description-list--GridTemplateColumns--count --pf-v5-c-description-list--m-2-col--GridTemplateColumns--count 2 | ||||
| .pf-v5-c-description-list.pf-m-3-col | --pf-v5-c-description-list--GridTemplateColumns--count | 3 | ||
--pf-v5-c-description-list--GridTemplateColumns--count --pf-v5-c-description-list--m-3-col--GridTemplateColumns--count 3 | ||||
| .pf-v5-c-description-list.pf-m-horizontal | --pf-v5-c-description-list__group--GridTemplateColumns | 12ch minmax(10ch, auto) | ||
--pf-v5-c-description-list__group--GridTemplateColumns --pf-v5-c-description-list--m-horizontal__group--GridTemplateColumns --pf-v5-c-description-list__term--width --pf-v5-c-description-list--m-horizontal__description--width --pf-v5-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto) | ||||
| .pf-v5-c-description-list.pf-m-horizontal | --pf-v5-c-description-list__group--GridTemplateRows | auto | ||
--pf-v5-c-description-list__group--GridTemplateRows --pf-v5-c-description-list--m-horizontal__group--GridTemplateRows auto | ||||
| .pf-v5-c-description-list.pf-m-vertical | --pf-v5-c-description-list__group--GridTemplateColumns | repeat(1) | ||
--pf-v5-c-description-list__group--GridTemplateColumns --pf-v5-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-v5-c-description-list--GridTemplateColumns--count) repeat(1) | ||||
| .pf-v5-c-description-list.pf-m-vertical | --pf-v5-c-description-list__group--GridTemplateRows | auto 1fr | ||
--pf-v5-c-description-list__group--GridTemplateRows --pf-v5-c-description-list--m-vertical__group--GridTemplateRows auto 1fr | ||||
View source on GitHub
