Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
Horizontal 3 col on lg
- 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
Auto-column-width
Default auto column 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
Auto fit
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
Props
DescriptionList
Name | Type | Required | Default | Description |
---|---|---|---|---|
autoFitMinModifier | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; } | No | ||
children | React.ReactNode | No | null | Anything that can be rendered inside of the list |
className | string | No | '' | Additional classes added to the list |
columnModifier | { default?: '1Col' | '2Col' | '3Col'; md?: '1Col' | '2Col' | '3Col'; lg?: '1Col' | '2Col' | '3Col'; xl?: '1Col' | '2Col' | '3Col'; '2xl'?: '1Col' | '2Col' | '3Col'; } | No | Sets the number of columns on the description list | |
isAutoColumnWidths | boolean | No | Sets the description list to format automatically. | |
isAutoFit | boolean | No | Sets the description list to auto fit. | |
isHorizontal | boolean | No | false | Sets the description list component term and description pair to a horizontal layout. |
isInlineGrid | boolean | No | Modifies the description list display to inline-grid. |
DescriptionListDescription
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | Anything that can be rendered inside of list description |
className | string | No | Additional classes added to the DescriptionListDescription |
DescriptionListGroup
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | any | No | Any elements that can be rendered in the list group | |
className | string | No | Additional classes added to the DescriptionListGroup |
DescriptionListTerm
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | Yes | Anything that can be rendered inside of list term | |
className | string | No | Additional classes added to the DescriptionListTerm |
CSS variables
.pf-c-description-list | --pf-c-description-list--RowGap | 1.5rem | |
.pf-c-description-list | --pf-c-description-list--ColumnGap | 1.5rem | |
.pf-c-description-list | --pf-c-description-list--GridTemplateColumns--count | 1 | |
.pf-c-description-list | --pf-c-description-list--GridTemplateColumns--width | 1fr | |
.pf-c-description-list | --pf-c-description-list--GridTemplateColumns | repeat(1, 1fr) | |
.pf-c-description-list | --pf-c-description-list__group--RowGap | 0.5rem | |
.pf-c-description-list | --pf-c-description-list__group--ColumnGap | 1rem | |
.pf-c-description-list | --pf-c-description-list__group--GridTemplateColumns | auto | |
.pf-c-description-list | --pf-c-description-list__group--GridColumn | auto | |
.pf-c-description-list | --pf-c-description-list__term--FontWeight | 700 | |
.pf-c-description-list | --pf-c-description-list__term--FontSize | 0.875rem | |
.pf-c-description-list | --pf-c-description-list--m-vertical__group--GridTemplateColumns | repeat(1) | |
.pf-c-description-list | --pf-c-description-list--m-horizontal__term--width | 12ch | |
.pf-c-description-list | --pf-c-description-list--m-horizontal__description--width | minmax(10ch, auto) | |
.pf-c-description-list | --pf-c-description-list--m-horizontal__group--GridTemplateColumns | 12ch minmax(10ch, auto) | |
.pf-c-description-list | --pf-c-description-list--m-1-col--GridTemplateColumns--count | 1 | |
.pf-c-description-list | --pf-c-description-list--m-auto-fit--GridTemplateColumns--min | 15.625rem | |
.pf-c-description-list | --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min | 15.625rem | |
.pf-c-description-list | --pf-c-description-list__text--m-help-text--TextDecorationColor | #8a8d90 | |
.pf-c-description-list | --pf-c-description-list__text--m-help-text--TextDecorationThickness | 1px | |
.pf-c-description-list | --pf-c-description-list__text--m-help-text--TextDecorationOffset | 0.25rem | |
.pf-c-description-list | --pf-c-description-list__text--m-help-text--hover--TextDecorationColor | #151515 | |
.pf-c-description-list | --pf-c-description-list__text--m-help-text--focus--TextDecorationColor | #151515 | |
.pf-c-description-list[class*="pf-m-horizontal"] | --pf-c-description-list__term--width | 12ch | |
.pf-c-description-list.pf-m-auto-column-widths | --pf-c-description-list--GridTemplateColumns--width | minmax(8ch, max-content) | |
.pf-c-description-list.pf-m-auto-fit | --pf-c-description-list--GridTemplateColumns--minmax--min | undefined | |
.pf-c-description-list__text.pf-m-help-text:hover | --pf-c-description-list__text--m-help-text--TextDecorationColor | #151515 | |
.pf-c-description-list__text.pf-m-help-text:focus | --pf-c-description-list__text--m-help-text--TextDecorationColor | #151515 | |
.pf-c-description-list.pf-m-1-col | --pf-c-description-list--GridTemplateColumns--count | 1 | |
.pf-c-description-list.pf-m-2-col | --pf-c-description-list--GridTemplateColumns--count | undefined | |
.pf-c-description-list.pf-m-3-col | --pf-c-description-list--GridTemplateColumns--count | undefined | |
.pf-c-description-list.pf-m-horizontal | --pf-c-description-list__group--GridTemplateColumns | 12ch minmax(10ch, auto) | |
.pf-c-description-list.pf-m-vertical | --pf-c-description-list__group--GridTemplateColumns | repeat(1) | |
View source on GitHub