diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/switch/img/switch-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/switch/img/switch-elements.svg new file mode 100644 index 0000000000..285708cdce --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/switch/img/switch-elements.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/switch/switch.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/switch/switch.md index 9bbf43f1e8..a8c7d0edd0 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/switch/switch.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/switch/switch.md @@ -3,9 +3,13 @@ id: Switch section: components --- +import '../components.css'; + ## Elements -![Examples of labeled and unlabeled switches](./img/switch-elements.png) +
+![Elements of labeled and unlabeld switches.](./img/switch-elements.svg) +
1. **Switch:** The switch itself, which uses active primary colors when turned "on" and inactive colors when turned "off". When a switch is disabled, it will use disabled colors. 1. **Switch label:** The text label that represents the "on" state for a switch. This may simply be "On" (as long as it's paired with other meaningful text within a context, like a form label), or it may be something more descriptive, like "Allow edits." By default, the label is placed to the right of the switch, but this layout can be [swapped to the left](/components/switch#reversed-layout) if needed.