--- id: 'Description list' section: components cssPrefix: pf-v5-c-description-list ---## Examples ### Default ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Term help text ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Default, two column ```html
Name
This is a long description that should wrap to multiple lines in a multi-column layout.
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Default, three column on lg breakpoint ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Horizontal ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Horizontal, two column ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Horizontal, three column on lg breakpoint ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Compact ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Compact horizontal ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Fluid horizontal ```html
Name
example
Namespace
mary-test
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. ```html
Name
This is a long description that should wrap to multiple lines in a multi-column layout.
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ## Auto fit ### Auto-fit basic ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Auto-fit, min width modified, grid template columns ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Auto-fit, min width modified, responsive grid template columns ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ## Responsive column definitions ### Default, responsive columns ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Horizontal, responsive columns ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Responsive, horizontal, vertical group layout ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ## Auto-column-width ### Default, auto columns width ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Horizontal, auto column width ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ## Inline grid ### Default, inline grid ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Display variant ```html
Name
example
Namespace
mary-test
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 ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Display lg and card variant ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Display 2xl and card variant ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Display and card variant, three column on lg breakpoint ```html
Name
example
Namespace
mary-test
Labels
example
``` ### Display and card variant, horizontal, modified term width ```html
Name
example
Namespace
mary-test
Labels
example
``` ## With icons ### Icons on terms ```html
This is a long description that should wrap to multiple lines in cases where the viewport is quite narrow.
example
Namespace
mary-test
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` | `
` | Initiates the description list component. **Required** | | `.pf-v5-c-description-list__group` | `
` | Initiates a description list component group. **Required** | | `.pf-v5-c-description-list__term` | `
` | Initiates a description list component term. **Required** | | `.pf-v5-c-description-list__description` | `
` | Initiates a description list component description. **Required** | | `.pf-v5-c-description-list__text` | ``, `
` | Initiates a description list component text element. Use a `` when a child of `.pf-v5-c-description-list__term`. **Required** | | `.pf-v5-c-description-list__term-icon` | `` | 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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). | | `--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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |