## Examples

### Default


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Term help text


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Default, two column


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Default, three column on lg breakpoint


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Horizontal


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Horizontal, two column


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Horizontal, three column on lg breakpoint


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Compact


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Compact horizontal


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Fluid horizontal


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

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


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

## Auto fit

### Auto-fit basic


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Auto-fit, min width modified, grid template columns


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Auto-fit, min width modified, responsive grid template columns


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

## Responsive column definitions

### Default, responsive columns


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Horizontal, responsive columns


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Responsive, horizontal, vertical group layout


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

## Auto-column-width

### Default, auto columns width


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### Horizontal, auto column width


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

## Inline grid

### Default, inline grid


import Example20 from './Example20.html?raw'

<LiveExample html={Example20} />

### Display variant


import Example21 from './Example21.html?raw'

<LiveExample html={Example21} />

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


import Example22 from './Example22.html?raw'

<LiveExample html={Example22} />

### Display lg and card variant


import Example23 from './Example23.html?raw'

<LiveExample html={Example23} />

### Display 2xl and card variant


import Example24 from './Example24.html?raw'

<LiveExample html={Example24} />

### Display and card variant, three column on lg breakpoint


import Example25 from './Example25.html?raw'

<LiveExample html={Example25} />

### Display and card variant, horizontal, modified term width


import Example26 from './Example26.html?raw'

<LiveExample html={Example26} />

{/* ## Auto term with is only supported in FF currently

### Horizontal 2 col auto term width
```hbs
{{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
``` */}

## With icons

### Icons on terms


import Example27 from './Example27.html?raw'

<LiveExample html={Example27} />

## Documentation

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `title` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
| `tabindex="0"` | `.pf-v6-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v6-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-v6-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
| `.pf-v6-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
| `.pf-v6-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
| `.pf-v6-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
| `.pf-v6-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-v6-c-description-list__term`. **Required** |
| `.pf-v6-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
| `.pf-m-compact` | `.pf-v6-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
| `.pf-m-display-lg` | `.pf-v6-c-description-list` | Modifies the description list to have large display styling. |
| `.pf-m-display-2xl` | `.pf-v6-c-description-list` | Modifies the description list to have 2xl display styling. |
| `.pf-m-fluid` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
| `.pf-m-help-text` | `.pf-v6-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-v6-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-v6-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
| `.pf-m-fill-columns` | `.pf-v6-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-v6-c-description-list` | Modifies the description list to format automatically. |
| `.pf-m-inline-grid` | `.pf-v6-c-description-list` | Modifies the description list display to inline-grid. |
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list number of columns. |
| `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/tokens/all-patternfly-tokens). |
| `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/tokens/all-patternfly-tokens). |

{/* | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element. |
| `.pf-m-order-first{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element to -1. |
| `.pf-m-order-last{-on-[breakpoint]}` | `..pf-v6-c-description-list__group` | Modifies the order of the flex layout element to $limit + 1. | */}