Description list

Examples

Basic

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Term help text

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Default 2 col

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Default 3 col on lg

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal using custom term width modifier

Name longer than the default term width: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal 2 col

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal 3 col on lg

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Compact

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Compact horizontal

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Fluid horizontal

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Column fill

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

Large display size

displaySize 2xl

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Responsive column definitions

Default responsive columns

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal responsive columns

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Responsive horizontal, vertical group layout

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto-column-width

Default auto column width

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal auto column width

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Inline grid

Default inline grid

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Card variants

A card component can be used in place of a description list group.

Description list with card

isSelectable

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Description list with large display size and card

displaySize 2xl

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display size with card, three column on large breakpoint

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display size with card, horizontal, modified term width

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto fit

Auto-fit basic

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto-fit, min width modified grid template columns

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

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

Name: example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

With icons

Icons on terms

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Props

DescriptionList

*required
Name	Type	Default	Description
autoFitMinModifier	{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }		Sets the minimum column size for the auto-fit (isAutoFit) layout at various breakpoints.
children	React.ReactNode	null	Anything that can be rendered inside of the list
className	string	''	Additional classes added to the list
columnModifier	{ default?: '1Col' \| '2Col' \| '3Col'; sm?: '1Col' \| '2Col' \| '3Col'; md?: '1Col' \| '2Col' \| '3Col'; lg?: '1Col' \| '2Col' \| '3Col'; xl?: '1Col' \| '2Col' \| '3Col'; '2xl'?: '1Col' \| '2Col' \| '3Col'; }		Sets the number of columns on the description list at various breakpoints
displaySize	'default' \| 'lg' \| '2xl'	'default'	Sets the display size of the descriptions in the description list.
horizontalTermWidthModifier	{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }		Sets the horizontal description list's term column width at various breakpoints.
isAutoColumnWidths	boolean		Sets the description list to format automatically.
isAutoFit	boolean		Sets the description list to auto fit.
isCompact	boolean		Sets the description list to compact styling.
isFillColumns	boolean		Sets the the default placement of description list groups to fill from top to bottom.
isFluid	boolean		Sets a horizontal description list to have fluid styling.
isHorizontal	boolean	false	Sets the description list component term and description pair to a horizontal layout.
isInlineGrid	boolean		Modifies the description list display to inline-grid.
orientation	{ sm?: 'vertical' \| 'horizontal'; md?: 'vertical' \| 'horizontal'; lg?: 'vertical' \| 'horizontal'; xl?: 'vertical' \| 'horizontal'; '2xl'?: 'vertical' \| 'horizontal'; }		Indicates how the menu will align at various breakpoints.
termWidth	string		Sets the description list's term column width.

DescriptionListDescription

*required
Name	Type	Default	Description
children	React.ReactNode	null	Anything that can be rendered inside of list description
className	string		Additional classes added to the DescriptionListDescription

DescriptionListGroup

*required
Name	Type	Default	Description
children	any		Any elements that can be rendered in the list group
className	string		Additional classes added to the DescriptionListGroup

DescriptionListTerm

*required
Name	Type	Description
childrenrequired	React.ReactNode	Anything that can be rendered inside of list term
className	string	Additional classes added to the DescriptionListTerm
icon	React.ReactNode	Icon that is rendered inside of list term to the left side of the children

DescriptionListTermHelpText

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Anything that can be rendered inside of list term
className	string		Additional classes added to the DescriptionListTermHelpText

DescriptionListTermHelpTextButton

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Anything that can be rendered inside of list term
className	string		Additional classes added to the DescriptionListTerm

The main popover component. The following properties can also be passed into another component that has a property specifically for passing in popover properties.
*required
Name	Type	Default	Description
bodyContentrequired	React.ReactNode \| ((hide: () => void) => React.ReactNode)		Body content of the popover. If you want to close the popover after an action within the body content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
alertSeverityScreenReaderText	string		Text announced by screen reader when alert severity variant is set to indicate severity level.
alertSeverityVariant	'custom' \| 'info' \| 'warning' \| 'success' \| 'danger'		Severity variants for an alert popover. This modifies the color of the header to match the severity.
animationDuration	number	300	The duration of the CSS fade transition animation.
appendTo	HTMLElement \| ((ref?: HTMLElement) => HTMLElement) \| 'inline'	() => document.body	The element to append the popover to. Defaults to "inline".
aria-label	string	''	Accessible label for the popover, required when header is not present.
children	ReactElement<any>		The trigger reference element to which the popover is relatively placed to. If you cannot wrap the element with the Popover, you can use the triggerRef prop instead. Usage: <Popover><Button>Reference</Button></Popover>
className	string	''	Additional classes added to the popover.
closeBtnAriaLabel	string	'Close'	Accessible label for the close button.
distance	number	25	Distance of the popover to its target. Defaults to 25.
elementToFocus	HTMLElement \| SVGElement \| string		The element to focus when the popover becomes visible. By default the first focusable element will receive focus.
enableFlip	boolean	true	If true, tries to keep the popover in view by flipping it if necessary. If the position is set to 'auto', this prop is ignored.
flipBehavior	\| 'flip' \| ( \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end' )[]	[ 'top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end' ]	The desired position to flip the popover to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the popover on the left.
footerContent	React.ReactNode \| ((hide: () => void) => React.ReactNode)	null	Footer content of the popover. If you want to close the popover after an action within the footer content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. footerContent={hide => <Button onClick={() => hide()}>Close</Button>}
hasAutoWidth	boolean	false	Removes fixed-width and allows width to be defined by contents.
hasNoPadding	boolean	false	Allows content to touch edges of popover container.
headerComponent	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	'h6'	Sets the heading level to use for the popover header. Defaults to h6.
headerContent	React.ReactNode \| ((hide: () => void) => React.ReactNode)	null	Simple header content to be placed within a title. If you want to close the popover after an action within the header content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
headerIcon	React.ReactNode	null	Icon to be displayed in the popover header. *
hideOnOutsideClick	boolean	true	Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user).
id	string		Id used as part of the various popover elements (popover-${id}-header/body/footer).
isVisible	boolean	null	True to show the popover programmatically. Used in conjunction with the shouldClose prop. By default, the popover child element handles click events automatically. If you want to control this programmatically, the popover will not auto-close if the close button is clicked, the escape key is used, or if a click occurs outside the popover. Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.
maxWidth	string	popoverMaxWidth && popoverMaxWidth.value	Maximum width of the popover (default 18.75rem).
minWidth	string	popoverMinWidth && popoverMinWidth.value	Minimum width of the popover (default 6.25rem).
onHidden	() => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned out.
onHide	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition out.
onMount	() => void	(): void => null	Lifecycle function invoked when the popover has been mounted to the DOM.
onShow	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition in.
onShown	() => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned in.
position	\| PopoverPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Popover position. Note: With the enableFlip property set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior property.
shouldClose	(event: MouseEvent \| KeyboardEvent, hideFunction?: () => void) => void	(): void => null	Callback function that is only invoked when isVisible is also controlled. Called when the popover close button is clicked, the enter key was used on it, or the escape key is used.
shouldOpen	(event: MouseEvent \| KeyboardEvent, showFunction?: () => void) => void	(): void => null	Callback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.
showClose	boolean	true	Flag indicating whether the close button should be shown.
triggerAction	'click' \| 'hover'	'click'	Sets an interaction to open popover, defaults to "click"
triggerRef	HTMLElement \| (() => HTMLElement) \| React.RefObject<any>		The trigger reference element to which the popover is relatively placed to. If you can wrap the element with the popover, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Popover triggerRef={() => document.getElementById('reference-element')} />
withFocusTrap	boolean		Whether to trap focus in the popover.
zIndex	number	9999	The z-index of the popover.

Card

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the Card
className	string		Additional classes added to the Card
component	unknown	'div'	Sets the base component to render. defaults to div
id	string	''	ID of the Card. Also passed back in the CardHeader onExpand callback.
isClickable	boolean	false	Flag indicating that the card is clickable and contains some action that triggers on click.
isClicked	boolean	false	Flag indicating whether a card that is either only clickable or that is both clickable and selectable is currently clicked and has clicked styling.
isCompact	boolean	false	Modifies the card to include compact styling. Should not be used with isLarge.
isDisabled	boolean	false	Flag indicating that a clickable or selectable card is disabled.
isExpanded	boolean	false	Flag indicating if a card is expanded. Modifies the card to be expandable.
isFullHeight	boolean	false	Cause component to consume the available height of its container
isLarge	boolean	false	Modifies the card to be large. Should not be used with isCompact.
isPlain	boolean	false	Modifies the card to include plain styling; this removes border and background
isSelectable	boolean	false	Flag indicating that the card is selectable.
isSelected	boolean	false	Flag indicating whether a card that is either selectable only or both clickable and selectable is currently selected and has selected styling.
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
variant	'default' \| 'secondary'	'default'	Card background color variant

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-description-list	--pf-v6-c-description-list--RowGap	1.5rem
--pf-v6-c-description-list--RowGap --pf-t--global--spacer--gap--group-to-group--vertical--default --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-description-list	--pf-v6-c-description-list--ColumnGap	3rem
--pf-v6-c-description-list--ColumnGap --pf-t--global--spacer--gap--group-to-group--horizontal--default --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-description-list	--pf-v6-c-description-list--GridTemplateColumns--count	1
	.pf-v6-c-description-list	--pf-v6-c-description-list--GridTemplateColumns--width	1fr
	.pf-v6-c-description-list	--pf-v6-c-description-list--GridTemplateColumns--min	0
	.pf-v6-c-description-list	--pf-v6-c-description-list__group--RowGap	0.5rem
--pf-v6-c-description-list__group--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__group--ColumnGap	1rem
--pf-v6-c-description-list__group--ColumnGap --pf-t--global--spacer--gap--group--horizontal --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__group--GridTemplateColumns	auto
	.pf-v6-c-description-list	--pf-v6-c-description-list__group--GridTemplateRows	auto 1fr
	.pf-v6-c-description-list	--pf-v6-c-description-list__group--GridColumn	auto
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-compact--RowGap	1rem
--pf-v6-c-description-list--m-compact--RowGap --pf-t--global--spacer--gap--group-to-group--vertical--compact --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-compact--ColumnGap	0.5rem
--pf-v6-c-description-list--m-compact--ColumnGap --pf-t--global--spacer--gap--group-to-group--horizontal--compact --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__term--Display	inline
	.pf-v6-c-description-list	--pf-v6-c-description-list__term--sm--Display	flex
	.pf-v6-c-description-list	--pf-v6-c-description-list__term--FontWeight	500
--pf-v6-c-description-list__term--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-description-list	--pf-v6-c-description-list__term--FontSize	0.75rem
--pf-v6-c-description-list__term--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__term--LineHeight	1.5
--pf-v6-c-description-list__term--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-description-list	--pf-v6-c-description-list__term-icon--MinWidth	0.75rem
--pf-v6-c-description-list__term-icon--MinWidth --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__term-icon--MarginInlineEnd	0.5rem
--pf-v6-c-description-list__term-icon--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__term-icon--Color	(In light theme) #707070
--pf-v6-c-description-list__term-icon--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns	repeat(1)
--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-v6-c-description-list--GridTemplateColumns--count) repeat(1)
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-vertical__group--GridTemplateRows	auto 1fr
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__term--width	12ch
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__description--width	minmax(10ch, auto)
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns	12ch minmax(10ch, auto)
--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns --pf-v6-c-description-list__term--width --pf-v6-c-description-list--m-horizontal__description--width --pf-v6-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto)
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__group--GridTemplateRows	auto
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-1-col--GridTemplateColumns--count	1
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-2-col--GridTemplateColumns--count	2
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-3-col--GridTemplateColumns--count	3
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--min	15.625rem
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min	15.625rem
--pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min --pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--min 15.625rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__text--m-help-text--TextDecorationLine	underline
--pf-v6-c-description-list__text--m-help-text--TextDecorationLine --pf-t--global--text-decoration--help-text--line--default --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-description-list	--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle	dashed
--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle --pf-t--global--text-decoration--help-text--style--default --pf-t--global--text-decoration--style--200 dashed
	.pf-v6-c-description-list	--pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset	0.25rem
	.pf-v6-c-description-list	--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationLine	underline
--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationLine --pf-t--global--text-decoration--help-text--line--hover --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-description-list	--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle	dashed
--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle --pf-t--global--text-decoration--help-text--style--hover --pf-t--global--text-decoration--style--200 dashed
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-display-lg__description--FontSize	1rem
--pf-v6-c-description-list--m-display-lg__description--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-display-2xl__description--FontSize	1.5rem
--pf-v6-c-description-list--m-display-2xl__description--FontSize --pf-t--global--font--size--heading--lg --pf-t--global--font--size--2xl --pf-t--global--font--size--600 1.5rem
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__term--width-on-sm	inherit
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__term--width-on-md	inherit
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__term--width-on-lg	inherit
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__term--width-on-xl	inherit
	.pf-v6-c-description-list	--pf-v6-c-description-list--m-horizontal__term--width-on-2xl	inherit
	.pf-v6-c-description-list	--pf-v6-c-description-list__term--width	12ch
--pf-v6-c-description-list__term--width --pf-v6-c-description-list--m-horizontal__term--width 12ch
	.pf-v6-c-description-list.pf-m-auto-column-widths	--pf-v6-c-description-list--GridTemplateColumns--width	minmax(8ch, max-content)
	.pf-v6-c-description-list.pf-m-auto-fit	--pf-v6-c-description-list--GridTemplateColumns--minmax--min	0
--pf-v6-c-description-list--GridTemplateColumns--minmax--min --pf-v6-c-description-list--GridTemplateColumns--min 0
	.pf-v6-c-description-list.pf-m-compact	--pf-v6-c-description-list--RowGap	1rem
--pf-v6-c-description-list--RowGap --pf-v6-c-description-list--m-compact--RowGap --pf-t--global--spacer--gap--group-to-group--vertical--compact --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-description-list.pf-m-compact	--pf-v6-c-description-list--ColumnGap	0.5rem
--pf-v6-c-description-list--ColumnGap --pf-v6-c-description-list--m-compact--ColumnGap --pf-t--global--spacer--gap--group-to-group--horizontal--compact --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-description-list.pf-m-fluid	--pf-v6-c-description-list--m-horizontal__term--width	fit-content(20ch)
	.pf-v6-c-description-list.pf-m-display-lg	--pf-v6-c-description-list__description--FontSize	1rem
--pf-v6-c-description-list__description--FontSize --pf-v6-c-description-list--m-display-lg__description--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-description-list.pf-m-display-2xl	--pf-v6-c-description-list__description--FontSize	1.5rem
--pf-v6-c-description-list__description--FontSize --pf-v6-c-description-list--m-display-2xl__description--FontSize --pf-t--global--font--size--heading--lg --pf-t--global--font--size--2xl --pf-t--global--font--size--600 1.5rem
	.pf-v6-c-description-list__text.pf-m-help-text:is(:hover, :focus)	--pf-v6-c-description-list__text--m-help-text--TextDecorationLine	underline
--pf-v6-c-description-list__text--m-help-text--TextDecorationLine --pf-v6-c-description-list__text--m-help-text--hover--TextDecorationLine --pf-t--global--text-decoration--help-text--line--hover --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-description-list__text.pf-m-help-text:is(:hover, :focus)	--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle	dashed
--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle --pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle --pf-t--global--text-decoration--help-text--style--hover --pf-t--global--text-decoration--style--200 dashed
	.pf-v6-c-description-list.pf-m-1-col	--pf-v6-c-description-list--GridTemplateColumns--count	1
--pf-v6-c-description-list--GridTemplateColumns--count --pf-v6-c-description-list--m-1-col--GridTemplateColumns--count 1
	.pf-v6-c-description-list.pf-m-2-col	--pf-v6-c-description-list--GridTemplateColumns--count	2
--pf-v6-c-description-list--GridTemplateColumns--count --pf-v6-c-description-list--m-2-col--GridTemplateColumns--count 2
	.pf-v6-c-description-list.pf-m-3-col	--pf-v6-c-description-list--GridTemplateColumns--count	3
--pf-v6-c-description-list--GridTemplateColumns--count --pf-v6-c-description-list--m-3-col--GridTemplateColumns--count 3
	.pf-v6-c-description-list.pf-m-horizontal	--pf-v6-c-description-list__group--GridTemplateColumns	12ch minmax(10ch, auto)
--pf-v6-c-description-list__group--GridTemplateColumns --pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns --pf-v6-c-description-list__term--width --pf-v6-c-description-list--m-horizontal__description--width --pf-v6-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto)
	.pf-v6-c-description-list.pf-m-horizontal	--pf-v6-c-description-list__group--GridTemplateRows	auto
--pf-v6-c-description-list__group--GridTemplateRows --pf-v6-c-description-list--m-horizontal__group--GridTemplateRows auto
	.pf-v6-c-description-list.pf-m-vertical	--pf-v6-c-description-list__group--GridTemplateColumns	repeat(1)
--pf-v6-c-description-list__group--GridTemplateColumns --pf-v6-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-v6-c-description-list--GridTemplateColumns--count) repeat(1)
	.pf-v6-c-description-list.pf-m-vertical	--pf-v6-c-description-list__group--GridTemplateRows	auto 1fr
--pf-v6-c-description-list__group--GridTemplateRows --pf-v6-c-description-list--m-vertical__group--GridTemplateRows auto 1fr

View source on GitHub

Description list

Examples

Basic

Term help text

Default 2 col

Default 3 col on lg

Horizontal

Horizontal using custom term width modifier

Horizontal 2 col

Horizontal 3 col on lg

Compact

Compact horizontal

Fluid horizontal

Column fill

Large display size

Responsive column definitions

Default responsive columns

Horizontal responsive columns

Responsive horizontal, vertical group layout

Auto-column-width

Default auto column width

Horizontal auto column width

Inline grid

Default inline grid

Card variants

Description list with card

Description list with large display size and card

Display size with card, three column on large breakpoint

Display size with card, horizontal, modified term width

Auto fit

Auto-fit basic

Auto-fit, min width modified grid template columns

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

With icons

Icons on terms

Props

DescriptionList

DescriptionListDescription

DescriptionListGroup

DescriptionListTerm

DescriptionListTermHelpText

DescriptionListTermHelpTextButton

Popover

Card

CSS variables