## Examples

### Basic


import DescriptionListBasic from "./DescriptionListBasic.tsx?raw"

<LiveExample src={DescriptionListBasic} />

### Term help text


import DescriptionListWithTermHelpText from "./DescriptionListWithTermHelpText.tsx?raw"

<LiveExample src={DescriptionListWithTermHelpText} />

### Default 2 col


import DescriptionListDefaultTwoCol from "./DescriptionListDefaultTwoCol.tsx?raw"

<LiveExample src={DescriptionListDefaultTwoCol} />

### Default 3 col on lg


import DescriptionListDefaultThreeColLg from "./DescriptionListDefaultThreeColLg.tsx?raw"

<LiveExample src={DescriptionListDefaultThreeColLg} />

### Horizontal


import DescriptionListHorizontal from "./DescriptionListHorizontal.tsx?raw"

<LiveExample src={DescriptionListHorizontal} />

### Horizontal using custom term width modifier


import DescriptionListHorizontalCustomTermWidth from "./DescriptionListHorizontalCustomTermWidth.tsx?raw"

<LiveExample src={DescriptionListHorizontalCustomTermWidth} />

### Horizontal 2 col


import DescriptionListHorizontalTwoCol from "./DescriptionListHorizontalTwoCol.tsx?raw"

<LiveExample src={DescriptionListHorizontalTwoCol} />

### Horizontal 3 col on lg


import DescriptionListHorizontalThreeColLg from "./DescriptionListHorizontalThreeColLg.tsx?raw"

<LiveExample src={DescriptionListHorizontalThreeColLg} />

### Compact


import DescriptionListCompact from "./DescriptionListCompact.tsx?raw"

<LiveExample src={DescriptionListCompact} />

### Compact horizontal


import DescriptionListCompactHorizontal from "./DescriptionListCompactHorizontal.tsx?raw"

<LiveExample src={DescriptionListCompactHorizontal} />

### Fluid horizontal


import DescriptionListFluidHorizontal from "./DescriptionListFluidHorizontal.tsx?raw"

<LiveExample src={DescriptionListFluidHorizontal} />

### Column fill


import DescriptionListColumnFill from "./DescriptionListColumnFill.tsx?raw"

<LiveExample src={DescriptionListColumnFill} />

### Large display size


import DescriptionListWithLargeDisplaySize from "./DescriptionListWithLargeDisplaySize.tsx?raw"

<LiveExample src={DescriptionListWithLargeDisplaySize} />

## Responsive column definitions

### Default responsive columns


import DescriptionListDefaultResponsiveColumns from "./DescriptionListDefaultResponsiveColumns.tsx?raw"

<LiveExample src={DescriptionListDefaultResponsiveColumns} />

### Horizontal responsive columns


import DescriptionListHorizontalResponsiveColumns from "./DescriptionListHorizontalResponsiveColumns.tsx?raw"

<LiveExample src={DescriptionListHorizontalResponsiveColumns} />

### Responsive horizontal, vertical group layout


import DescriptionListResponsiveHoriVertGroup from "./DescriptionListResponsiveHoriVertGroup.tsx?raw"

<LiveExample src={DescriptionListResponsiveHoriVertGroup} />

## Auto-column-width

### Default auto column width


import DescriptionListDefaultAutoColumn from "./DescriptionListDefaultAutoColumn.tsx?raw"

<LiveExample src={DescriptionListDefaultAutoColumn} />

### Horizontal auto column width


import DescriptionListHorizontalAutoColumn from "./DescriptionListHorizontalAutoColumn.tsx?raw"

<LiveExample src={DescriptionListHorizontalAutoColumn} />

## Inline grid

### Default inline grid


import DescriptionListDefaultInlineGrid from "./DescriptionListDefaultInlineGrid.tsx?raw"

<LiveExample src={DescriptionListDefaultInlineGrid} />

## Card variants

A [card component](/components/card) can be used in place of a description list group.

### Description list with card


import DescriptionListWithCard from "./DescriptionListWithCard.tsx?raw"

<LiveExample src={DescriptionListWithCard} />

### Description list with large display size and card


import DescriptionListWithLargeDisplaySizeAndCard from "./DescriptionListWithLargeDisplaySizeAndCard.tsx?raw"

<LiveExample src={DescriptionListWithLargeDisplaySizeAndCard} />

### Display size with card, three column on large breakpoint


import DescriptionListDisplaySizeAndCardThreeColumn from "./DescriptionListDisplaySizeAndCardThreeColumn.tsx?raw"

<LiveExample src={DescriptionListDisplaySizeAndCardThreeColumn} />

### Display size with card, horizontal, modified term width


import DescriptionListDisplaySizeAndCardHorizontalTermWidth from "./DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx?raw"

<LiveExample src={DescriptionListDisplaySizeAndCardHorizontalTermWidth} />

## Auto fit

### Auto-fit basic


import DescriptionListAutoFitBasic from "./DescriptionListAutoFitBasic.tsx?raw"

<LiveExample src={DescriptionListAutoFitBasic} />

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


import DescriptionListAutoFitMinWidthModified from "./DescriptionListAutoFitMinWidthModified.tsx?raw"

<LiveExample src={DescriptionListAutoFitMinWidthModified} />

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


import DescriptionListAutoFitMinWidthResponsive from "./DescriptionListAutoFitMinWidthResponsive.tsx?raw"

<LiveExample src={DescriptionListAutoFitMinWidthResponsive} />

## With icons

### Icons on terms


import DescriptionListIconsOnTerms from "./DescriptionListIconsOnTerms.tsx?raw"

<LiveExample src={DescriptionListIconsOnTerms} />