Skip to content

Description list

A description list displays 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

Large display size

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

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

Description list with large display size and card

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
NameTypeDefaultDescription
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.
childrenReact.ReactNodenullAnything that can be rendered inside of the list
classNamestring''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.
isAutoColumnWidthsbooleanSets the description list to format automatically.
isAutoFitbooleanSets the description list to auto fit.
isCompactbooleanSets the description list to compact styling.
isFillColumnsbooleanSets the the default placement of description list groups to fill from top to bottom.
isFluidbooleanSets a horizontal description list to have fluid styling.
isHorizontalbooleanfalseSets the description list component term and description pair to a horizontal layout.
isInlineGridbooleanModifies 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.
termWidthstringSets the description list's term column width.

DescriptionListDescription

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered inside of list description
classNamestringAdditional classes added to the DescriptionListDescription

DescriptionListGroup

*required
NameTypeDefaultDescription
childrenanyAny elements that can be rendered in the list group
classNamestringAdditional classes added to the DescriptionListGroup

DescriptionListTerm

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything that can be rendered inside of list term
classNamestringAdditional classes added to the DescriptionListTerm
iconReact.ReactNodeIcon that is rendered inside of list term to the left side of the children

DescriptionListTermHelpText

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything that can be rendered inside of list term
classNamestringAdditional classes added to the DescriptionListTermHelpText

DescriptionListTermHelpTextButton

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything that can be rendered inside of list term
classNamestringAdditional classes added to the DescriptionListTerm

Popover

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
NameTypeDefaultDescription
bodyContentrequiredReact.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>}
alertSeverityScreenReaderTextstringText 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.
animationDurationnumber300The duration of the CSS fade transition animation.
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'() => document.bodyThe element to append the popover to. Defaults to "inline".
aria-labelstring''Accessible label for the popover, required when header is not present.
childrenReactElement<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>
classNamestring''Additional classes added to the popover.
closeBtnAriaLabelstring'Close'Accessible label for the close button.
distancenumber25Distance of the popover to its target. Defaults to 25.
elementToFocusHTMLElement | SVGElement | stringThe element to focus when the popover becomes visible. By default the first focusable element will receive focus.
enableFlipbooleantrueIf 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.
footerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullFooter 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>}
hasAutoWidthbooleanfalseRemoves fixed-width and allows width to be defined by contents.
hasNoPaddingbooleanfalseAllows 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.
headerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullSimple 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>}
headerIconReact.ReactNodenullIcon to be displayed in the popover header. *
hideOnOutsideClickbooleantrueHides the popover when a click occurs outside (only works if isVisible is not controlled by the user).
idstringId used as part of the various popover elements (popover-${id}-header/body/footer).
isVisiblebooleannullTrue 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.
maxWidthstringpopoverMaxWidth && popoverMaxWidth.valueMaximum width of the popover (default 18.75rem).
minWidthstringpopoverMinWidth && popoverMinWidth.valueMinimum width of the popover (default 6.25rem).
onHidden() => void(): void => nullLifecycle function invoked when the popover has fully transitioned out.
onHide(event: MouseEvent | KeyboardEvent) => void(): void => nullLifecycle function invoked when the popover begins to transition out.
onMount() => void(): void => nullLifecycle function invoked when the popover has been mounted to the DOM.
onShow(event: MouseEvent | KeyboardEvent) => void(): void => nullLifecycle function invoked when the popover begins to transition in.
onShown() => void(): void => nullLifecycle 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 => nullCallback 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 => nullCallback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.
showClosebooleantrueFlag indicating whether the close button should be shown.
triggerAction'click' | 'hover''click'Sets an interaction to open popover, defaults to "click"
triggerRefHTMLElement | (() => 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')} />
withFocusTrapbooleanWhether to trap focus in the popover.
zIndexnumber9999The z-index of the popover.

Card

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the Card
classNamestringAdditional classes added to the Card
componentunknown'div'Sets the base component to render. defaults to div
idstring''ID of the Card. Also passed back in the CardHeader onExpand callback.
isClickablebooleanfalseFlag indicating that the card is clickable and contains some action that triggers on click.
isClickedbooleanfalseFlag indicating whether a card that is either only clickable or that is both clickable and selectable is currently clicked and has clicked styling.
isCompactbooleanfalseModifies the card to include compact styling. Should not be used with isLarge.
isDisabledbooleanfalseFlag indicating that a clickable or selectable card is disabled.
isExpandedbooleanfalseFlag indicating if a card is expanded. Modifies the card to be expandable.
isFullHeightbooleanfalseCause component to consume the available height of its container
isLargebooleanfalseModifies the card to be large. Should not be used with isCompact.
isPlainbooleanfalseModifies the card to include plain styling; this removes border and background
isSelectablebooleanfalseFlag indicating that the card is selectable.
isSelectedbooleanfalseFlag indicating whether a card that is either selectable only or both clickable and selectable is currently selected and has selected styling.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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 columnSelectorVariableValue
.pf-v6-c-description-list--pf-v6-c-description-list--RowGap
1.5rem
.pf-v6-c-description-list--pf-v6-c-description-list--ColumnGap
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--pf-v6-c-description-list__group--ColumnGap
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--pf-v6-c-description-list--m-compact--ColumnGap
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--pf-v6-c-description-list__term--FontSize
0.75rem
.pf-v6-c-description-list--pf-v6-c-description-list__term--LineHeight
1.5
.pf-v6-c-description-list--pf-v6-c-description-list__term-icon--MinWidth
0.75rem
.pf-v6-c-description-list--pf-v6-c-description-list__term-icon--MarginInlineEnd
0.5rem
.pf-v6-c-description-list--pf-v6-c-description-list__term-icon--Color
(In light theme) #707070
.pf-v6-c-description-list--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns
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--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--pf-v6-c-description-list__text--m-help-text--TextDecorationLine
underline
.pf-v6-c-description-list--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle
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--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle
dashed
.pf-v6-c-description-list--pf-v6-c-description-list--m-display-lg__description--FontSize
1rem
.pf-v6-c-description-list--pf-v6-c-description-list--m-display-2xl__description--FontSize
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.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.pf-m-compact--pf-v6-c-description-list--RowGap
1rem
.pf-v6-c-description-list.pf-m-compact--pf-v6-c-description-list--ColumnGap
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.pf-m-display-2xl--pf-v6-c-description-list__description--FontSize
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.pf-m-help-text:is(:hover, :focus)--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle
dashed
.pf-v6-c-description-list.pf-m-1-col--pf-v6-c-description-list--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.pf-m-3-col--pf-v6-c-description-list--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.pf-m-horizontal--pf-v6-c-description-list__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.pf-m-vertical--pf-v6-c-description-list__group--GridTemplateRows
auto 1fr

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines