Examples
Term help text
- Name
- Example
- Namespace
- Labels
- example
- Pod selector
- Annotation
- 2 Annotations
Horizontal using custom term width modifier
- Name longer than the default term width
- Example
- Namespace
- Labels
- example
- Pod selector
- Annotation
- 2 Annotations
Horizontal 3 col on lg
- Name
- Example
- Namespace
- 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
- 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
Card variants
A card component can be used in place of a description list group.
Description list with card
- Name
- Example
- Namespace
- Labels
- example
- Pod selector
- Annotation
- 2 Annotations
Description list with display size and card
- Name
- Example
- Namespace
- Labels
- example
- Pod selector
- Annotation
- 2 Annotations
Display size with card, three column on large breakpoint
- Name
- Example
- Namespace
- Labels
- example
- Pod selector
- Annotation
- 2 Annotations
Display size with card, horizontal, modified term width
- Name
- Example
- Namespace
- Labels
- example
- Pod selector
- Annotation
- 2 Annotations
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
With icons
Props
DescriptionList
| 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
| 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
| 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
| Name | Type | Default | 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
| 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
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything that can be rendered inside of list term | |
| className | string | Additional classes added to the DescriptionListTerm |
Popover
| Name | Type | Default | Description |
|---|---|---|---|
| bodyContentrequired | React.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>} | |
| alertSeverityScreenReaderTextBeta | string | Text announced by screen reader when alert severity variant is set to indicate severity level | |
| alertSeverityVariantBeta | '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 | CSS fade transition animation duration |
| appendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | () => document.body | The element to append the popover to, defaults to body |
| aria-label | string | '' | 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 | |
| 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 | '' | Popover additional class |
| closeBtnAriaLabel | string | 'Close' | Aria 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', '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. |
| footerContent | React.ReactNode | ((hide: () => void) => React.ReactNode) | null | Footer 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>} |
| 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. Default is 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 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>} |
| headerIconBeta | 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, 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. |
| 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 '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. |
| 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')} /> | |
| 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, 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 => 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 | Whether to show the close button |
| Deprecated: tippyProps | Partial<TippyProps> | - no longer used | |
| withFocusTrap | boolean | Whether to trap focus in the popover | |
| zIndex | number | 9999 | z-index of the popover |
Card
| 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. |
| isDisabledRaisedBeta | 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 |
| isSelectableRaisedBeta | 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 |
| ouiaSafe | No type info | true | |
| 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 | --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--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 | --pf-c-description-list--m-compact--ColumnGap | 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 | --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__term-icon--MinWidth | 0.625rem | ||
| .pf-c-description-list | --pf-c-description-list__term-icon--MarginRight | 0.5rem | ||
| .pf-c-description-list | --pf-c-description-list__term-icon--Color | #6a6e73 | ||
| .pf-c-description-list | --pf-c-description-list--m-vertical__group--GridTemplateColumns | 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 | --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 | --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 | --pf-c-description-list--m-display-lg__description--FontSize | 1.125rem | ||
| .pf-c-description-list | --pf-c-description-list--m-display-2xl__description--FontSize | 1.5rem | ||
| .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.pf-m-display-lg | --pf-c-description-list__description--FontSize | 1.125rem | ||
| .pf-c-description-list.pf-m-display-2xl | --pf-c-description-list__description--FontSize | 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.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-horizontal | --pf-c-description-list__group--GridTemplateRows | auto | ||
| .pf-c-description-list.pf-m-vertical | --pf-c-description-list__group--GridTemplateColumns | repeat(1) | ||
| .pf-c-description-list.pf-m-vertical | --pf-c-description-list__group--GridTemplateRows | auto 1fr | ||
View source on GitHub
