Hint
A hint is in-app messaging that provides a one-step reminder, explanation, or call to action for a page or modal. Hints provide information about an interaction or prerequisite step that might not be immediately obvious to the user.
Overview
Installation
npm install @patternfly/elementsUsage
Default with no title
Basic hint without a title, used for simple informational messages.
View HTML Source
<pf-hint>
Welcome to the new documentation experience.
<a href="#">Learn more about the improved features</a>.
</pf-hint>
Hint with title
Add a title to your hint by using the title slot to provide more context.
View HTML Source
<pf-hint>
<span slot="title">Do more with Find it Fix it capabilities</span>
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
</pf-hint>
With a footer
Add action links or buttons to the footer using the footer slot.
View HTML Source
<pf-hint>
<span slot="title">Do more with Find it Fix it capabilities</span>
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
<pf-button slot="footer" variant="link" inline>
<a href="#">Try it for 90 days</a>
</pf-button>
</pf-hint>
With actions
Add an actions menu (like a kebab dropdown) using the actions slot.
View HTML Source
<pf-hint>
<pf-dropdown slot="actions">
<pf-button slot="toggle" plain icon="ellipsis-v" aria-label="Actions"></pf-button>
<pf-dropdown-menu slot="menu">
<pf-dropdown-item>
<a href="#">Link</a>
</pf-dropdown-item>
<pf-dropdown-item>
<button type="button">Action</button>
</pf-dropdown-item>
</pf-dropdown-menu>
</pf-dropdown>
<span slot="title">Do more with Find it Fix it capabilities</span>
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
</pf-hint>
Complete example
A hint with all available slots.
View HTML Source
<pf-hint>
<pf-dropdown slot="actions">
<pf-button slot="toggle" plain icon="ellipsis-v" aria-label="Actions"></pf-button>
<pf-dropdown-menu slot="menu">
<pf-dropdown-item>
<a href="#">Link</a>
</pf-dropdown-item>
<pf-dropdown-item>
<button type="button">Action</button>
</pf-dropdown-item>
<pf-dropdown-item disabled>
<a href="#">Disabled link</a>
</pf-dropdown-item>
</pf-dropdown-menu>
</pf-dropdown>
<span slot="title">Do more with Find it Fix it capabilities</span>
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
<pf-button slot="footer" variant="link" inline>
<a href="#">Try it for 90 days</a>
</pf-button>
</pf-hint>
Slots
-
actions -
title - Default Slot
-
footer
Attributes
None
DOM Properties
None
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-global--spacer--md |
1rem
|
|
--pf-global--palette--blue-50 |
#e7f1fa
|
|
--pf-global--palette--blue-100 |
#bee1f4
|
|
--pf-global--BorderRadius--sm |
3px
|
|
--pf-global--BoxShadow--sm |
0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)
|
|
--pf-global--FontWeight--semi-bold |
700
|
|
--pf-global--Color--100 |
#151515
|
|
--pf-global--LineHeight--md |
1.5
|
|
--pf-global--spacer--lg |
1.5rem
|
|
--pf-c-hint--GridRowGap |
—
|
|
--pf-c-hint--PaddingTop |
—
|
|
--pf-c-hint--PaddingRight |
—
|
|
--pf-c-hint--PaddingBottom |
—
|
|
--pf-c-hint--PaddingLeft |
—
|
|
--pf-c-hint--BackgroundColor |
—
|
|
--pf-c-hint--BorderWidth |
—
|
|
--pf-c-hint--BorderColor |
—
|
|
--pf-c-hint--BorderRadius |
—
|
|
--pf-c-hint--BoxShadow |
—
|
|
--pf-c-hint__actions--c-dropdown--MarginTop |
—
|
|
--pf-c-hint__title--FontSize |
—
|
|
--pf-c-hint__title--FontWeight |
—
|
|
--pf-c-hint__title--Color |
—
|
|
--pf-c-hint__title--LineHeight |
—
|
|
--pf-c-hint__body--Color |
—
|
|
--pf-c-hint__footer--MarginTop |
—
|
|
--pf-c-hint__body--FontSize |
—
|
|
--pf-c-hint__body--LineHeight |
—
|
|
--pf-c-hint__footer--child--MarginRight |
—
|
|
--pf-global--link--Color--hover |
#004080
|
|
--pf-global--link--Color |
#06c
|
CSS Shadow Parts
containeractionstitlebodyfooter
