diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md index d5147c3113..11e407943d 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md @@ -3,9 +3,13 @@ id: Breadcrumb section: components --- +import '../components.css'; + ## Usage -Example of breadcrumbs +
+![Breadcrumbs show under the masthead.](./img/breadcrumbs-usage.svg) +
Use breadcrumbs in addition to your global navigation to display a user's location in the application. @@ -15,9 +19,11 @@ Use breadcrumbs in addition to your global navigation to display a user's locati * Breadcrumbs in PatternFly are intended to show the location of a page in the site hierarchy, and are **not intended to map the user's path through the application**. ## Placement -Breadcrumbs should be placed underneath the masthead, at the top of the page. There should be 16px of padding both between the breadcrumb and the masthead, and between the breadcrumbs and anything that comes below. +Breadcrumbs should be placed underneath the masthead, at the top of the page. There should be `--pf-t--global--spacer--md` (16px) of padding both between the breadcrumb and the masthead, and between the breadcrumbs and anything that comes below. -Placement of breadcrumbs and padding +
+![Breadcrumbs shown underneath the masthead and at the top of the page above the page content.](./img/breadcrumbs-placement.svg) +
## Accessibility For information regarding accessibility, visit the [breadcrumb accessibility](/components/breadcrumb/accessibility) tab. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-placement.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-placement.svg new file mode 100644 index 0000000000..0a037c0302 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-placement.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-usage.svg new file mode 100644 index 0000000000..e4b9bb1dfc --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-usage.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +