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 column	Selector	Variable	Value
	.pf-v5-c-hint	--pf-v5-c-hint--GridRowGap	1rem
--pf-v5-c-hint--GridRowGap --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-hint	--pf-v5-c-hint--PaddingTop	1.5rem
--pf-v5-c-hint--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-hint	--pf-v5-c-hint--PaddingRight	1.5rem
--pf-v5-c-hint--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-hint	--pf-v5-c-hint--PaddingBottom	1.5rem
--pf-v5-c-hint--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-hint	--pf-v5-c-hint--PaddingLeft	1.5rem
--pf-v5-c-hint--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-hint	--pf-v5-c-hint--BackgroundColor	#e7f1fa
--pf-v5-c-hint--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa
	.pf-v5-c-hint	--pf-v5-c-hint--BorderColor	#bee1f4
--pf-v5-c-hint--BorderColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4
	.pf-v5-c-hint	--pf-v5-c-hint--BorderWidth	1px
--pf-v5-c-hint--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 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--BoxShadow --pf-v5-global--BoxShadow--sm $pf-v5-global--BoxShadow--sm 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba(#030303, .12), 0 0 pf-size-prem(2px) 0 rgba(#030303, .06) 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--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-hint	--pf-v5-c-hint__title--FontSize	1.125rem
--pf-v5-c-hint__title--FontSize --pf-v5-global--FontSize--lg $pf-v5-global--FontSize--lg pf-font-prem(18px) 1.125rem
	.pf-v5-c-hint	--pf-v5-c-hint__body--FontSize	1rem
--pf-v5-c-hint__body--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-v5-c-hint	--pf-v5-c-hint__footer--child--MarginRight	1rem
--pf-v5-c-hint__footer--child--MarginRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-hint	--pf-v5-c-hint__actions--MarginLeft	3rem
--pf-v5-c-hint__actions--MarginLeft --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-v5-c-hint	--pf-v5-c-hint__actions--c-dropdown--MarginTop	calc(0.375rem * -1)
--pf-v5-c-hint__actions--c-dropdown--MarginTop calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)

View source on GitHub