diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/hint.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/hint.md index 203e0fa80c..d0702c1972 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/hint.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/hint.md @@ -4,16 +4,22 @@ section: components --- import '../components.css'; -For information on other forms of on-screen help, see [Tooltip](/components/tooltip/design-guidelines) and [Popover](/components/popover/design-guidelines). +## Elements + +
+![hint at the top of a UI screen](./img/hint-element.svg) +
+ +1. **Content:** A description of the hint, containing a title (optional), body, and link. +1. **Options menu toggle** +1. **Options menu:** User options for the hint. Can be customized to allows users to dismiss the hint, learn more at another resource, or anything else relevant to your scenario. ## Usage Use hints to share information about an interaction or prerequisite step that might not be immediately obvious to the user. -
-![hint at the top of a UI screen](./img/hint-element.svg) -
+For information on other forms of on-screen help, see [tooltip](/components/tooltip/design-guidelines) and [popover](/components/popover/design-guidelines). ## Content considerations -Use full sentences with punctuation. -Include relevant links to documentation when necessary. +- Use full sentences with punctuation. +- Include relevant links to documentation when necessary. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/img/hint-element.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/img/hint-element.svg index f1483ecdcf..0fe1300e1c 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/img/hint-element.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/hint/img/hint-element.svg @@ -2,7 +2,7 @@ - + @@ -12,14 +12,14 @@ - + - + - + @@ -39,7 +39,7 @@ - + @@ -51,19 +51,19 @@ - + - + - - + + - + @@ -74,7 +74,7 @@ - + @@ -83,30 +83,27 @@ - - - - - - - - - + + + - + - + + + + - +