PatternFly

Hint

A hint is in-app messaging that provides a one-step reminder, explanation, or call to action for a page or modal.

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.

Documentation

Usage

Class
Applied to
Outcome
.pf-v5-c-hint
<div>
Initiates the hint component. Required
.pf-v5-c-hint__title
<div>
Initiates the hint title element.
.pf-v5-c-hint__body
<div>
Initiates the hint body element.
.pf-v5-c-hint__footer
<div>
Initiates the hint footer element.
.pf-v5-c-hint__actions
<div>
Initiates the hint actions element.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-hint--pf-v5-c-hint--GridRowGap
1rem
.pf-v5-c-hint--pf-v5-c-hint--PaddingTop
1.5rem
.pf-v5-c-hint--pf-v5-c-hint--PaddingRight
1.5rem
.pf-v5-c-hint--pf-v5-c-hint--PaddingBottom
1.5rem
.pf-v5-c-hint--pf-v5-c-hint--PaddingLeft
1.5rem
.pf-v5-c-hint--pf-v5-c-hint--BackgroundColor
#e7f1fa
.pf-v5-c-hint--pf-v5-c-hint--BorderColor
#bee1f4
.pf-v5-c-hint--pf-v5-c-hint--BorderWidth
1px
.pf-v5-c-hint--pf-v5-c-hint--BoxShadow
0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)
.pf-v5-c-hint--pf-v5-c-hint--Color
#151515
.pf-v5-c-hint--pf-v5-c-hint__title--FontSize
1.125rem
.pf-v5-c-hint--pf-v5-c-hint__body--FontSize
1rem
.pf-v5-c-hint--pf-v5-c-hint__footer--child--MarginRight
1rem
.pf-v5-c-hint--pf-v5-c-hint__actions--MarginLeft
3rem
.pf-v5-c-hint--pf-v5-c-hint__actions--c-dropdown--MarginTop
calc(0.375rem * -1)

View source on GitHub