Responsive fallback

.changeset/stale-items-pull.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add responsive fallback image

src/design/demo/responsive-image-deck.twig

@@ -0,0 +1,12 @@
+{% embed '@cloudfour/objects/deck/deck.twig' with {
+  class: 'o-deck--3-column@l'
+} %}
+  {% block content %}
+    {% for ratio in ratios %}
+      <figure>
+        <img src="{{source}}" alt="" style="aspect-ratio: {{ratio}}; max-height: 15em;">
+        <figcaption>{{ratio}}</figcaption>
+      </figure>
+    {% endfor %}
+  {% endblock %}
+{% endembed %}

src/design/illustrations.stories.mdx

@@ -1,6 +1,8 @@
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 import { extname, basename } from 'path';
 import imageDeck from './demo/image-deck.twig';
+import responsiveImageDeck from './demo/responsive-image-deck.twig';
+import responsiveImage from '../assets/illustrations/responsive-fallback.svg';
 import avatarDefaultSrc from '../assets/illustrations/avatar-default.svg';
 const featureImageDir = require.context(
   '../assets/illustrations/feature',
@@ -31,6 +33,21 @@ Images may represent more than one topic. For example, the `paintbrush` illustra
   {() => imageDeck({ images: featureImageData })}
 </Story>
 
+## Responsive fallback image
+
+An SVG that's used as a fallback image when an image request fails for whatever reason.
+
+What's unique about this image is its responsiveness. Depending on the size of the broken image, portions of the image repeat or fix to the side to fit the aspect ratio of the image rather than squashing or stretching.
+
+<Story name="Responsive fallback image" height="200px">
+  {() =>
+    responsiveImageDeck({
+      ratios: ['1 / 1', '16 / 9', '9 / 16'],
+      source: responsiveImage,
+    })
+  }
+</Story>
+
 ## Default avatar
 
 This asset may be used in place of a specific user avatar. To differentiate multiple fallback avatars, consider swapping its fill colors for [others in our palette](/docs/design-colors--page).