diff --git a/.changeset/stale-items-pull.md b/.changeset/stale-items-pull.md new file mode 100644 index 000000000..7df1ffea4 --- /dev/null +++ b/.changeset/stale-items-pull.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add responsive fallback image diff --git a/src/assets/illustrations/responsive-fallback.svg b/src/assets/illustrations/responsive-fallback.svg new file mode 100644 index 000000000..a9293be29 --- /dev/null +++ b/src/assets/illustrations/responsive-fallback.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/design/demo/responsive-image-deck.twig b/src/design/demo/responsive-image-deck.twig new file mode 100644 index 000000000..d710b714c --- /dev/null +++ b/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 %} +
+ +
{{ratio}}
+
+ {% endfor %} + {% endblock %} +{% endembed %} diff --git a/src/design/illustrations.stories.mdx b/src/design/illustrations.stories.mdx index 8a14378cb..b44c2bbe6 100644 --- a/src/design/illustrations.stories.mdx +++ b/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 })} +## 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. + + + {() => + responsiveImageDeck({ + ratios: ['1 / 1', '16 / 9', '9 / 16'], + source: responsiveImage, + }) + } + + ## 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).