Hint

A hint is an in-app message that shares reminders, explanations, or calls to action within 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.

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
	.pf-v6-c-hint	--pf-v6-c-hint--GridRowGap	0.5rem
--pf-v6-c-hint--GridRowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingBlockStart	1.5rem
--pf-v6-c-hint--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingInlineEnd	1.5rem
--pf-v6-c-hint--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingBlockEnd	1.5rem
--pf-v6-c-hint--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingInlineStart	1.5rem
--pf-v6-c-hint--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-hint--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-hint	--pf-v6-c-hint--BorderColor	(In light theme) #5e40be
--pf-v6-c-hint--BorderColor --pf-t--global--border--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-hint	--pf-v6-c-hint--BorderWidth	2px
--pf-v6-c-hint--BorderWidth --pf-t--global--border--width--box--status--default --pf-t--global--border--width--200 2px
	.pf-v6-c-hint	--pf-v6-c-hint--BorderRadius	16px
--pf-v6-c-hint--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-hint	--pf-v6-c-hint--Color	(In light theme) #151515
--pf-v6-c-hint--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-hint	--pf-v6-c-hint__title--FontWeight	500
--pf-v6-c-hint__title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-hint	--pf-v6-c-hint__body--FontSize	0.875rem
--pf-v6-c-hint__body--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-hint	--pf-v6-c-hint__footer--MarginBlockStart	0.5rem
--pf-v6-c-hint__footer--MarginBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-hint	--pf-v6-c-hint__footer--child--MarginInlineEnd	1rem
--pf-v6-c-hint__footer--child--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-hint	--pf-v6-c-hint__actions--MarginInlineStart	3rem
--pf-v6-c-hint__actions--MarginInlineStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-hint	--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-hint	--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd	calc(0.5rem * -1)
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) 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

View source on GitHub