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.
-
+
+
+
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.
-
-
-
-
-
### Expandable section in a form
-
+
+
+
### Expandable section in an inline alert
-
+
+
+
### Expandable section in a side panel
-
+
+
+
### Expandable section in a documentation page
-
-
+
+
+
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 @@
+