Hint

A hint is an in-app message that shares reminders, explanations, or calls to action within a page.

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	600
--pf-v6-c-hint__title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.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--plain * -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--plain * -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