Image cards

Created 20 September 2022

This component is used to display two images side by side.

When to use this component

This component is intended to be used for, but aren't restricted to, 'before and after' imagery.
It is designed to disrupt the flow of content.
Do not use in a stacked format, where a gallery would be more appropriate.

If you use a description under one image, consider adding a description under the second photo too.
If you are using this component more than once per page, ensure that you break it up by using other components in between.
Cards are designed for a quick scan about a single topic. Don't use too much content into a card.
Images align side by side. Each image can add description which is shown below relevant image.
In desktop view, a button appears when the pointer hovers over the image. This opens the selected imaged in a lightbox view.
For mobile and tablet views, the full screen button is always visible, and no overlay appears.