Description list

A description list contains terms and their corresponding descriptions.

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

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 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	'lg' \| '2xl'		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	'default' \| '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)	() => document.body	The element to append the popover to. Defaults to "document.body".
aria-label	string	''	Accessible label for the popover, required when header is not present.
Deprecated: boundary	'scrollParent' \| 'window' \| 'viewport' \| HTMLElement		- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead.
children	ReactElement<any>		The reference element to which the popover is relatively placed to. If you cannot wrap the reference with the Popover, you can use the reference 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.
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	(tip?: TippyInstance) => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned out. Note: The tip argument is no longer passed and has been deprecated.
onHide	(tip?: TippyInstance) => void	(): void => null	Lifecycle function invoked when the popover begins to transition out. Note: The tip argument is no longer passed and has been deprecated.
onMount	(tip?: TippyInstance) => void	(): void => null	Lifecycle function invoked when the popover has been mounted to the DOM. Note: The tip argument is no longer passed and has been deprecated.
onShow	(tip?: TippyInstance) => void	(): void => null	Lifecycle function invoked when the popover begins to transition in. Note: The tip argument is no longer passed and has been deprecated.
onShown	(tip?: TippyInstance) => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned in. Note: The tip argument is no longer passed and has been deprecated.
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.
reference	HTMLElement \| (() => HTMLElement) \| React.RefObject<any>		The reference element to which the popover is relatively placed to. If you can wrap the reference with the popover, you can use the children prop instead. Usage: <Popover reference={() => document.getElementById('reference-element')} />
removeFindDomNodeBeta	boolean	false	Opt-in for updated popper that does not use findDOMNode.
shouldClose	(tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent \| KeyboardEvent) => 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. Note: The tip argument is no longer passed and has been deprecated.
shouldOpen	(showFunction?: () => void, event?: MouseEvent \| KeyboardEvent) => 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.
Deprecated: tippyProps	Partial<TippyProps>		- no longer used.
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	null	Content rendered inside the Card
className	string	''	Additional classes added to the Card
component	unknown	'article'	Sets the base component to render. defaults to article
hasSelectableInput	boolean	false	Flag indicating that the card should render a hidden input to make it selectable
id	string	''	ID of the Card. Also passed back in the CardHeader onExpand callback.
isCompact	boolean	false	Modifies the card to include compact styling. Should not be used with isLarge.
isDisabledRaised	boolean	false	Modifies a raised selectable card to have disabled styling
isExpanded	boolean	false	Flag indicating if a card is expanded. Modifies the card to be expandable.
isFlat	boolean	false	Modifies the card to include flat styling
isFullHeight	boolean	false	Cause component to consume the available height of its container
Deprecated: isHoverable	boolean	false	to make a card hoverable, use isSelectable or isSelectableRaised.
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
isRounded	boolean	false	Modifies the card to include rounded styling
isSelectable	boolean	false	Modifies the card to include selectable styling
isSelectableRaised	boolean	false	Specifies the card is selectable, and applies the new raised styling on hover and select
isSelected	boolean	false	Modifies the card to include selected styling
onSelectableInputChange	(labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void	() => {}	Callback that executes when the selectable input is changed
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.
selectableInputAriaLabel	string		Aria label to apply to the selectable input if one is rendered

CSS variables


	.pf-c-description-list	--pf-c-description-list--RowGap	1.5rem
--pf-c-description-list--RowGap --pf-global--gutter--md $pf-global--gutter--md $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-description-list	--pf-c-description-list--ColumnGap	1.5rem
--pf-c-description-list--ColumnGap --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 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--min	0
	.pf-c-description-list	--pf-c-description-list--GridTemplateColumns	repeat(1, 1fr)
--pf-c-description-list--GridTemplateColumns repeat(--pf-c-description-list--GridTemplateColumns--count, --pf-c-description-list--GridTemplateColumns--width) repeat(1, 1fr)
	.pf-c-description-list	--pf-c-description-list__group--RowGap	0.5rem
--pf-c-description-list__group--RowGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__group--ColumnGap	0.5rem
--pf-c-description-list__group--ColumnGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__group--GridTemplateColumns	auto
	.pf-c-description-list	--pf-c-description-list__group--GridTemplateRows	auto 1fr
	.pf-c-description-list	--pf-c-description-list__group--GridColumn	auto
	.pf-c-description-list	--pf-c-description-list--m-compact--RowGap	1rem
--pf-c-description-list--m-compact--RowGap --pf-global--gutter $pf-global--gutter $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-description-list	--pf-c-description-list--m-compact--ColumnGap	0.5rem
--pf-c-description-list--m-compact--ColumnGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__term--Display	inline
	.pf-c-description-list	--pf-c-description-list__term--sm--Display	flex
	.pf-c-description-list	--pf-c-description-list__term--FontWeight	700
--pf-c-description-list__term--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-description-list	--pf-c-description-list__term--FontSize	0.875rem
--pf-c-description-list__term--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-description-list	--pf-c-description-list__term--LineHeight	1.3
--pf-c-description-list__term--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-description-list	--pf-c-description-list__term-icon--MinWidth	0.625rem
--pf-c-description-list__term-icon--MinWidth --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-description-list	--pf-c-description-list__term-icon--MarginRight	0.5rem
--pf-c-description-list__term-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list	--pf-c-description-list__term-icon--Color	#6a6e73
--pf-c-description-list__term-icon--Color --pf-global--icon--Color--light $pf-global--icon--Color--light $pf-color-black-600 #6a6e73
	.pf-c-description-list	--pf-c-description-list--m-vertical__group--GridTemplateColumns	repeat(1)
--pf-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-c-description-list--GridTemplateColumns--count) repeat(1)
	.pf-c-description-list	--pf-c-description-list--m-vertical__group--GridTemplateRows	auto 1fr
	.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--m-horizontal__group--GridTemplateColumns --pf-c-description-list__term--width --pf-c-description-list--m-horizontal__description--width --pf-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto)
	.pf-c-description-list	--pf-c-description-list--m-horizontal__group--GridTemplateRows	auto
	.pf-c-description-list	--pf-c-description-list--m-1-col--GridTemplateColumns--count	1
	.pf-c-description-list	--pf-c-description-list--m-2-col--GridTemplateColumns--count	2
	.pf-c-description-list	--pf-c-description-list--m-3-col--GridTemplateColumns--count	3
	.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--m-auto-fit--GridTemplateColumns--minmax--min --pf-c-description-list--m-auto-fit--GridTemplateColumns--min 15.625rem
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--TextDecorationColor	#8a8d90
--pf-c-description-list__text--m-help-text--TextDecorationColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--TextDecorationThickness	1px
--pf-c-description-list__text--m-help-text--TextDecorationThickness --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 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__text--m-help-text--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-description-list	--pf-c-description-list__text--m-help-text--focus--TextDecorationColor	#151515
--pf-c-description-list__text--m-help-text--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-description-list	--pf-c-description-list--m-display-lg__description--FontSize	1.125rem
--pf-c-description-list--m-display-lg__description--FontSize --pf-global--FontSize--lg $pf-global--FontSize--lg pf-font-prem(18px) 1.125rem
	.pf-c-description-list	--pf-c-description-list--m-display-2xl__description--FontSize	1.5rem
--pf-c-description-list--m-display-2xl__description--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-description-list[class*=pf-m-horizontal]	--pf-c-description-list__term--width	12ch
--pf-c-description-list__term--width --pf-c-description-list--m-horizontal__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	0
--pf-c-description-list--GridTemplateColumns--minmax--min --pf-c-description-list--GridTemplateColumns--min 0
	.pf-c-description-list.pf-m-compact	--pf-c-description-list--RowGap	1rem
--pf-c-description-list--RowGap --pf-c-description-list--m-compact--RowGap --pf-global--gutter $pf-global--gutter $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-description-list.pf-m-compact	--pf-c-description-list--ColumnGap	0.5rem
--pf-c-description-list--ColumnGap --pf-c-description-list--m-compact--ColumnGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-description-list.pf-m-fluid	--pf-c-description-list--m-horizontal__term--width	fit-content(20ch)
	.pf-c-description-list.pf-m-display-lg	--pf-c-description-list__description--FontSize	1.125rem
--pf-c-description-list__description--FontSize --pf-c-description-list--m-display-lg__description--FontSize --pf-global--FontSize--lg $pf-global--FontSize--lg pf-font-prem(18px) 1.125rem
	.pf-c-description-list.pf-m-display-2xl	--pf-c-description-list__description--FontSize	1.5rem
--pf-c-description-list__description--FontSize --pf-c-description-list--m-display-2xl__description--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.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--m-help-text--TextDecorationColor --pf-c-description-list__text--m-help-text--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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__text--m-help-text--TextDecorationColor --pf-c-description-list__text--m-help-text--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-description-list.pf-m-1-col	--pf-c-description-list--GridTemplateColumns--count	1
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-1-col--GridTemplateColumns--count 1
	.pf-c-description-list.pf-m-2-col	--pf-c-description-list--GridTemplateColumns--count	2
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-2-col--GridTemplateColumns--count 2
	.pf-c-description-list.pf-m-3-col	--pf-c-description-list--GridTemplateColumns--count	3
--pf-c-description-list--GridTemplateColumns--count --pf-c-description-list--m-3-col--GridTemplateColumns--count 3
	.pf-c-description-list.pf-m-horizontal	--pf-c-description-list__group--GridTemplateColumns	12ch minmax(10ch, auto)
--pf-c-description-list__group--GridTemplateColumns --pf-c-description-list--m-horizontal__group--GridTemplateColumns --pf-c-description-list__term--width --pf-c-description-list--m-horizontal__description--width --pf-c-description-list--m-horizontal__term--width minmax(10ch, auto) 12ch minmax(10ch, auto)
	.pf-c-description-list.pf-m-horizontal	--pf-c-description-list__group--GridTemplateRows	auto
--pf-c-description-list__group--GridTemplateRows --pf-c-description-list--m-horizontal__group--GridTemplateRows auto
	.pf-c-description-list.pf-m-vertical	--pf-c-description-list__group--GridTemplateColumns	repeat(1)
--pf-c-description-list__group--GridTemplateColumns --pf-c-description-list--m-vertical__group--GridTemplateColumns repeat(--pf-c-description-list--GridTemplateColumns--count) repeat(1)
	.pf-c-description-list.pf-m-vertical	--pf-c-description-list__group--GridTemplateRows	auto 1fr
--pf-c-description-list__group--GridTemplateRows --pf-c-description-list--m-vertical__group--GridTemplateRows auto 1fr

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines