Examples
Hint with title
Do more with Find it Fix it capabilities
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
Do more with Find it Fix it capabilities
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
Default with no title
Welcome to the new documentation experience.
Learn more about the improved features.
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
Actions with no offset
Do more with Find it Fix it capabilities
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
Documentation
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-hint | <div> | Initiates the hint component. Required |
.pf-v6-c-hint__title | <div> | Initiates the hint title element. |
.pf-v6-c-hint__body | <div> | Initiates the hint body element. |
.pf-v6-c-hint__footer | <div> | Initiates the hint footer element. |
.pf-v6-c-hint__actions | <div> | Initiates the hint actions element. |
.pf-m-no-offset | .pf-v6-c-hint__actions | Removes the negative vertical margins on the actions element intended to align the action content with the hint title. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--GridRowGap | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--PaddingBlockStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--PaddingBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--BorderColor | (In light theme) #5e40be | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--BorderWidth | 2px | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--BorderRadius | 16px | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint__title--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint__body--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint__footer--MarginBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint__footer--child--MarginInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint__actions--MarginInlineStart | 3rem | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-hint) | --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-hint__actions.pf-m-no-offset | --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart | 0 | ||
| .pf-v6-c-hint__actions.pf-m-no-offset | --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd | 0 | ||
