diff --git a/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb b/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
index cf77312ab6..ac18c99f47 100644
--- a/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
@@ -15,7 +15,3 @@
<%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
-
-
-
-<%= pb_rails("image", props: { rounded: true, url: "https://unsplash.it/500/400/?image=634" }) %>
diff --git a/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx b/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
index 211e64248a..16c0c26cf4 100644
--- a/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
+++ b/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
@@ -29,10 +29,6 @@ const RoundedImage = () => {
size="xl"
url="https://unsplash.it/500/400/?image=634"
/>
-
)
}
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb
new file mode 100644
index 0000000000..75fefe8fc1
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb
@@ -0,0 +1,27 @@
+
+
+ <%= pb_rails("selectable_card", props: {
+ input_id: "selectable-image-default",
+ name: "selectable-image-default",
+ value: "selectable-image-default",
+ checked: true,
+ icon: true
+ }) do %>
+ <%= pb_rails("image", props: { rounded: true, size: "xl",url: "https://unsplash.it/500/400/?image=634" }) %>
+ <%= pb_rails("body", props: { tag: "span"}) do %>
+ Add text here
+ <% end %>
+
+ <% end %>
+
+ <%= pb_rails("selectable_card", props: {
+ input_id: "selectable-image-xl",
+ name: "selectable-image-xl",
+ value: "selectable-image-xl",
+ checked: false,
+ icon: true
+ }) do %>
+ <%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+ <% end %>
+
+
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
new file mode 100644
index 0000000000..3ffc88aca4
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+ Body,
+ Image,
+ SelectableCard,
+} from '../../'
+
+class SelectableCardImage extends React.Component {
+ state = {
+ selectableImage: true,
+ unselectedImage: false,
+ }
+
+ handleSelect = (event) => {
+ this.setState({
+ [event.target.id]: event.target.checked,
+ })
+ }
+
+ render() {
+ return (
+
+
+
+
+
+ {'Add text here'}
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default SelectableCardImage
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md
new file mode 100644
index 0000000000..11557b96a6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md
@@ -0,0 +1 @@
+Selectable Cards can pass images with optional text.
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/docs/example.yml b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/example.yml
index a912b385f3..0e7d68a182 100644
--- a/playbook/app/pb_kits/playbook/pb_selectable_card/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/example.yml
@@ -5,9 +5,11 @@ examples:
- selectable_card_single_select: Single Select
- selectable_card_block: Block
- selectable_card_options: With Options
+ - selectable_card_image: Image Example
react:
- selectable_card_default: Default
- selectable_card_single_select: Single Select
- selectable_card_block: Block
+ - selectable_card_image: Image Example
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/docs/index.js b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/index.js
index 02dba51dee..85ef4b09c2 100644
--- a/playbook/app/pb_kits/playbook/pb_selectable_card/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/docs/index.js
@@ -1,3 +1,4 @@
export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
export { default as SelectableCardBlock } from './_selectable_card_block.jsx'
+export { default as SelectableCardImage } from './_selectable_card_image.jsx'