diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md index 9f7ac19f15..91a524a1b4 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md @@ -3,10 +3,14 @@ id: Expandable section section: components --- +import '../components.css'; + ## Elements An expandable section has two main elements. -Elements of expandable section +
+![Elements of an expandable section.](./img/exp-sect-elements.svg) +
1. **Caret:** Indicates whether the section is expanded or collapsed. 2. **Toggle text:** Informs the user what will be shown when the component is expanded. @@ -18,29 +22,29 @@ We recommend using the dynamic toggle text when designing with the expandable se ## Variations -### Expandable section with blue line -Use an expandable section with a blue border to add more visual weight. This variation is recommended for marketing purposes. - -Disclosure example - - - ### Expandable section in a form -Expandable section in a form +
+![Example of an expandable section in a form.](./img/exp-sect-form.svg) +
### Expandable section in an inline alert -Expandable section in an inline alert +
+![Example of an expandable section in an inline alert.](./img/exp-sect-inline-alert.svg) +
### Expandable section in a side panel -Expandable section in a side panel +
+![Example of an expandable section in a side panel.](./img/exp-sect-panel.svg) +
### Expandable section in a documentation page -Expandable section in a documentation page - +
+![Example of an expandable section in a documentation page.](./img/exp-sect-docs-page.svg) +
For more information regarding accessibility, visit the [expandable section accessibility tab](https://v4-archive.patternfly.org/v4/components/expandable-section/accessibility). diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-docs-page.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-docs-page.svg new file mode 100644 index 0000000000..c30bd66fde --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-docs-page.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-elements.svg new file mode 100644 index 0000000000..19c6a32a1d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-elements.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-form.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-form.svg new file mode 100644 index 0000000000..a3bca82665 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-form.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-inline-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-inline-alert.svg new file mode 100644 index 0000000000..80993e3902 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-inline-alert.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-panel.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-panel.svg new file mode 100644 index 0000000000..49826cb3e3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-panel.svg @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +