Skip to content
Patternfly Logo

Description list

Examples

Basic

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Term help text

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Default 2 col

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Default 3 col on lg

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal 2 col

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal 3 col on lg

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Compact

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Compact horizontal

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Fluid horizontal

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

Responsive horizontal, vertical group layout

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

Default inline grid

Name
Example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Auto fit

Auto-fit basic

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

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

*required
NameTypeDefaultDescription
autoFitMinModifier{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }
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
isAutoColumnWidthsbooleanSets the description list to format automatically.
isAutoFitbooleanSets the description list to auto fit.
isCompactbooleanSets the description list to compact styling.
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 screen size breakpoints. Default alignment is set via the position property.

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

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

*required
NameTypeDefaultDescription
bodyContentrequiredReact.ReactNode | ((hide: () => void) => React.ReactNode)Body content If you want to close the popover after an action within the bodyContent, 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>}
animationDurationnumber300CSS fade transition animation duration
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)() => document.bodyThe element to append the popover to, defaults to body
aria-labelstring''Accessible label, 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
childrenReactElement<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>
classNamestring''Popover additional class
closeBtnAriaLabelstring'Close'Aria label for the Close button
distancenumber25Distance of the popover to its target, defaults to 25
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', 'right', 'bottom', 'left', 'top', 'right', 'bottom']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 If you want to close the popover after an action within the bodyContent, 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
headerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullHeader content If you want to close the popover after an action within the bodyContent, 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>}
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, ESC 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(tip?: TippyInstance) => void(): void => nullLifecycle 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 => nullLifecycle 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 => nullLifecycle 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 => nullLifecycle 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 => nullLifecycle function invoked when the popover has fully transitioned in. Note: The tip argument is no longer passed and has been deprecated.
position'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 'enableFlip' 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 prop.
referenceHTMLElement | (() => 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')} />
shouldClose(tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the popover Close button is clicked, Enter key was used on it, or the ESC key is used. Note: The tip argument is no longer passed and has been deprecated.
shouldOpen(showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the Enter key is used on the focused trigger
showClosebooleantrueWhether to show the close button
Deprecated: tippyPropsPartial<TippyProps>- no longer used
withFocusTrapbooleanWhether to trap focus in the popover
zIndexnumber9999z-index of the popover

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--min
0
.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
0.5rem
.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--m-compact--RowGap
1rem
.pf-c-description-list--pf-c-description-list--m-compact--ColumnGap
0.5rem
.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__term--LineHeight
1.3
.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-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--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
0
.pf-c-description-list.pf-m-compact--pf-c-description-list--RowGap
1rem
.pf-c-description-list.pf-m-compact--pf-c-description-list--ColumnGap
0.5rem
.pf-c-description-list.pf-m-fluid--pf-c-description-list--m-horizontal__term--width
fit-content(20ch)
.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
2
.pf-c-description-list.pf-m-3-col--pf-c-description-list--GridTemplateColumns--count
3
.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