--- id: 'Description list' section: components cssPrefix: pf-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 2 col ```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 3 col on lg ```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 2 col ```html
Name
example
Namespace
mary-test
Labels
example
Pod selector
Annotation
2 Annotations
``` ### Horizontal 3 col on lg ```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
``` ## 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-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` | `
` | Initiates the description list component. **Required** | | `.pf-c-description-list__group` | `
` | Initiates a description list component group. **Required** | | `.pf-c-description-list__term` | `
` | Initiates a description list component term. **Required** | | `.pf-c-description-list__description` | `
` | Initiates a description list component description. **Required** | | `.pf-c-description-list__text` | ``, `
` | Initiates a description list component text element. Use a `` when a child of `.pf-c-description-list__term`. **Required** | | `.pf-c-description-list__term-icon` | `` | Initiates a description list component term icon element. | | `.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-fill-columns` | `.pf-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-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 at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). | | `--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-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). |