diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index 57c7d8811b..27cfd359a6 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -11,7 +11,7 @@ A card formats content in a small, contained space. It can be used to display a preview of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information. -## Sample +## Sample pattern

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend diff --git a/docs/patterns/disclosure/index.md b/docs/patterns/disclosure/index.md index aa90e4f3db..94d1f98669 100644 --- a/docs/patterns/disclosure/index.md +++ b/docs/patterns/disclosure/index.md @@ -10,7 +10,7 @@ A Disclosure toggles the visibility of sections of content. It features one panel that consists of a caret icon and a section text label that collapses or expands to reveal more information. -## Sample component +## Sample pattern diff --git a/docs/patterns/filter/index.md b/docs/patterns/filter/index.md index 00f730ff6e..465d490509 100644 --- a/docs/patterns/filter/index.md +++ b/docs/patterns/filter/index.md @@ -8,7 +8,7 @@ tags: A Filter gives users the ability to sort a results listing by turning on and off predetermined tags. They feature a list of checkboxes and text that are wrapped in an accordion or a disclosure. -## Sample Component +## Sample pattern

{% example palette="none", diff --git a/docs/patterns/form/index.md b/docs/patterns/form/index.md index eeda61e5c3..bdfbfef210 100644 --- a/docs/patterns/form/index.md +++ b/docs/patterns/form/index.md @@ -8,7 +8,7 @@ tags: A Form is a group of elements used to collect information from a user. It can include a combination of text, fields, select lists, data inputs, buttons, and more. -## Sample component +## Sample pattern {% example palette="none", alt="Form component samples", src="./form-samples.svg" %} diff --git a/docs/patterns/link-with-icon/index.md b/docs/patterns/link-with-icon/index.md index 8db7ea663f..3c0ca076a0 100644 --- a/docs/patterns/link-with-icon/index.md +++ b/docs/patterns/link-with-icon/index.md @@ -9,7 +9,7 @@ tags: Link with icon features an icon that adds context to the link itself. It’s positioned to the left or on top of a link, depending on orientation. -## Sample component +## Sample pattern {% example palette="none", alt="Link with icon", diff --git a/docs/patterns/link/index.md b/docs/patterns/link/index.md index b05612f309..d9552d4078 100644 --- a/docs/patterns/link/index.md +++ b/docs/patterns/link/index.md @@ -9,7 +9,7 @@ tags: Links are navigational elements that allow a user to move between content, pages, and websites. -## Sample component +## Sample pattern {% example palette="none", alt="Link component examples", diff --git a/docs/patterns/skip-navigation/index.md b/docs/patterns/skip-navigation/index.md index 45eea58360..0051659d2b 100644 --- a/docs/patterns/skip-navigation/index.md +++ b/docs/patterns/skip-navigation/index.md @@ -8,7 +8,7 @@ tags: Skip navigation is a styled link that appears at the top of a page when the Tab key is pressed. It bypasses the navigation and jumps users down to the main content when selected. -## Sample component +## Sample pattern {% example palette="none",            alt="Skip navigation", diff --git a/docs/patterns/sticky-banner/index.md b/docs/patterns/sticky-banner/index.md index 4626817385..8696718539 100644 --- a/docs/patterns/sticky-banner/index.md +++ b/docs/patterns/sticky-banner/index.md @@ -8,7 +8,7 @@ tags: A Sticky banner slides into view at a certain scroll position and then anchors itself to the bottom edge of a browser window. It stays in one place as content scrolls underneath until a user dismisses them. -## Sample component +## Sample pattern {% example palette="none", alt="Sticky banner", src="./sticky-banner.svg" %} diff --git a/docs/patterns/sticky-card/index.md b/docs/patterns/sticky-card/index.md index ef3b054565..7e6621ed1f 100644 --- a/docs/patterns/sticky-card/index.md +++ b/docs/patterns/sticky-card/index.md @@ -8,7 +8,7 @@ tags: Sticky cards slide into view at a certain scroll position and then anchor themselves to the edge of a browser window. They stay in one place as content scrolls underneath until a user dismisses them. -## Sample component +## Sample pattern {% example palette="none", alt="Sticky card", src="./sticky-card.svg" %} diff --git a/docs/patterns/video-thumbnail/index.md b/docs/patterns/video-thumbnail/index.md index 27f9f9eba2..48e12a4430 100644 --- a/docs/patterns/video-thumbnail/index.md +++ b/docs/patterns/video-thumbnail/index.md @@ -8,7 +8,7 @@ tags: A Video thumbnail is a graphical preview of a video overlayed with a play button. When it’s selected, a video player modal will be displayed so a user can watch the video at a larger size. -## Sample component +## Sample pattern {% example palette="none", alt="Video thumbnail", src="./video-thumbnail.svg" %} diff --git a/elements/rh-accordion/docs/00-overview.md b/elements/rh-accordion/docs/00-overview.md index e7b7fa492c..e7ba52db40 100644 --- a/elements/rh-accordion/docs/00-overview.md +++ b/elements/rh-accordion/docs/00-overview.md @@ -5,7 +5,7 @@ alt="An accordion with four collapsed panels and one expanded panel", src="./accordion-sample-element.png" %} -## Sample component +## Sample element diff --git a/elements/rh-alert/docs/00-overview.md b/elements/rh-alert/docs/00-overview.md index 9e0a8b320e..e8f5051fbb 100644 --- a/elements/rh-alert/docs/00-overview.md +++ b/elements/rh-alert/docs/00-overview.md @@ -2,7 +2,7 @@ {{ tagName | getElementDescription }} -## Sample component +## Sample element {% example palette="light", alt="Two examples of the alert element", src="alert-sample.svg" %} diff --git a/elements/rh-audio-player/docs/00-overview.md b/elements/rh-audio-player/docs/00-overview.md index ef973837cc..7d5108836c 100644 --- a/elements/rh-audio-player/docs/00-overview.md +++ b/elements/rh-audio-player/docs/00-overview.md @@ -1,7 +1,7 @@ ## Overview {{ tagName | getElementDescription }} -## Sample component +## Sample element diff --git a/elements/rh-badge/docs/00-overview.md b/elements/rh-badge/docs/00-overview.md index f27ceda94d..98c5fb2ff0 100644 --- a/elements/rh-badge/docs/00-overview.md +++ b/elements/rh-badge/docs/00-overview.md @@ -6,7 +6,7 @@ src="./badge-sample-element.png" %} -## Sample component +## Sample element 1 99 100 diff --git a/elements/rh-button/docs/00-overview.md b/elements/rh-button/docs/00-overview.md index e2d70799c7..f90b884017 100644 --- a/elements/rh-button/docs/00-overview.md +++ b/elements/rh-button/docs/00-overview.md @@ -6,7 +6,7 @@ src="./button-sample.png" %} -## Sample component +## Sample element Primary diff --git a/elements/rh-card/docs/00-overview.md b/elements/rh-card/docs/00-overview.md index d22d3b462e..b0df169a28 100644 --- a/elements/rh-card/docs/00-overview.md +++ b/elements/rh-card/docs/00-overview.md @@ -2,7 +2,7 @@ {{ tagName | getElementDescription }} -## Sample component +## Sample element {% example palette="light", width=360, alt="Example of a card element", diff --git a/elements/rh-footer/docs/00-overview.md b/elements/rh-footer/docs/00-overview.md index 51c01360df..d933aee306 100644 --- a/elements/rh-footer/docs/00-overview.md +++ b/elements/rh-footer/docs/00-overview.md @@ -1,7 +1,7 @@ ## Overview {{ tagName | getElementDescription }} -## Sample component +## Sample element Red Hat logo diff --git a/elements/rh-jump-links/docs/00-overview.md b/elements/rh-jump-links/docs/00-overview.md index bb20a0bcfa..ef6c59f8b5 100644 --- a/elements/rh-jump-links/docs/00-overview.md +++ b/elements/rh-jump-links/docs/00-overview.md @@ -6,7 +6,7 @@ is visible in the browser window. -## Sample component +## Sample element ![Jump links sample component]({{ './jump-links-sample.svg' | url }}){style="--inline-img-max-width:128px;"} diff --git a/elements/rh-navigation-secondary/docs/00-overview.md b/elements/rh-navigation-secondary/docs/00-overview.md index 5c0bf2a3d1..ecc5f5794c 100644 --- a/elements/rh-navigation-secondary/docs/00-overview.md +++ b/elements/rh-navigation-secondary/docs/00-overview.md @@ -1,7 +1,7 @@ ## Overview {{ tagName | getElementDescription }} -## Sample component +## Sample element {% example palette="light", alt="Image of two stacked secondary navigations; one for large breakpoints and the other for small breakpoints", diff --git a/elements/rh-navigation/docs/00-overview.md b/elements/rh-navigation/docs/00-overview.md index 096e13e60d..87b18f841b 100644 --- a/elements/rh-navigation/docs/00-overview.md +++ b/elements/rh-navigation/docs/00-overview.md @@ -4,7 +4,7 @@ every page to ensure a consistent user experience across websites. -## Sample component +## Sample element ![Primary navigation component sample]({{ './primary-nav-example.png' | url }}){style="--inline-img-max-width:1000px;"} diff --git a/elements/rh-popover/docs/00-overview.md b/elements/rh-popover/docs/00-overview.md index b351fdb723..3ae7a2d87d 100644 --- a/elements/rh-popover/docs/00-overview.md +++ b/elements/rh-popover/docs/00-overview.md @@ -3,7 +3,7 @@ information or provides resources via text and links. -## Sample component +## Sample element ![Popover component sample]({{ './popover-sample-component.svg' | url }}){style="--inline-img-max-width:424px;"} diff --git a/elements/rh-progress-steps/docs/00-overview.md b/elements/rh-progress-steps/docs/00-overview.md index 324d756c3b..aa89143a5e 100644 --- a/elements/rh-progress-steps/docs/00-overview.md +++ b/elements/rh-progress-steps/docs/00-overview.md @@ -3,7 +3,7 @@ toward the completion of a linear process. -## Sample component +## Sample element ![Progress steps component sample]({{ './progress-steps-sample.svg' | url }}){style="--inline-img-max-width:687px;"} diff --git a/elements/rh-spinner/docs/00-overview.md b/elements/rh-spinner/docs/00-overview.md index 209e0d4ac2..d3483eb00b 100644 --- a/elements/rh-spinner/docs/00-overview.md +++ b/elements/rh-spinner/docs/00-overview.md @@ -7,7 +7,7 @@ -## Sample component +## Sample element Loading... diff --git a/elements/rh-tooltip/docs/00-overview.md b/elements/rh-tooltip/docs/00-overview.md index 26171abcfb..748edbc7eb 100644 --- a/elements/rh-tooltip/docs/00-overview.md +++ b/elements/rh-tooltip/docs/00-overview.md @@ -7,7 +7,7 @@ alt=" A black tooltip on top of a gray disabled button", src="./tooltip-sample-element.png" %} -## Sample component +## Sample element

Top Tooltip