| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
The Image + Text component is a non-interactive content layout used to emphasise key points within the context of a larger story. Image + Text can consist of of an Image, Heading Block (Overline, heading, bodydescription), and a CTA Block.
Image + Text comes in two sizes, large and small, which are controlled by the viewport width.
...
Use to highlight, key points of a story or product benefit.
Use an Image that is relevant to the point you are making.
Use a CTA Block to direct users to additional relevant information, rather than substituting a link for lots of content.
...
Don’t be overly verbose with your headings and body description copy
Don’t link the image
Anatomy
...
Item | Component / type | Notes | ||||||
|---|---|---|---|---|---|---|---|---|
1 - Image | Image |
| ||||||
2 - Overline | Typography |
| ||||||
3 - Heading | Typography |
| ||||||
4 - BodyDescription | Typography |
| ||||||
5 - Links | CTA Block |
|
...
Item | Content type | Notes |
|---|---|---|
1 - Image | Image | |
2 - Overline | Text | |
3 - Heading | Text | |
4 - BodyDescription | Tex | |
5 - Links | Text, Aria label |
...
Image + Text comes in two modes - Not to be confused with light and dark theme:
Default - to be used on the default brand background
Inverse - To be used on the inverse brand background
Variations
Image left
Image right
Size - controlled by the viewport
Large
Small
Orientation
VerticalHorizontal on larger screens, stacked on smaller screens
The grid split should not be set at 50% 50% as some brands may way other ratios.
Accessibility
The heading must come first in the DOM.
Analytics & Data
N/A
Future Expansion
...
We may introduce the concept of a “story block” which would stack a number of these components. We would need the possibility of configuring the grid gaps, etc to get different layouts.
Expect that at some point a “surface colour” will want to (or need to) be applied to the text block and in that case, that block will need to include additional padding. This is especially so when we have image-based backgrounds or mid-tone backgrounds.
Wider Conversations that may impact this
...
Supernova heros its product features with a series of modules that do not alternate left and right (best practice says not to alternate more than about three items. https://www.supernova.io/design-system-manager . When they have fewer items, they may chose to alternate them: https://www.supernova.io/for-design-system-teams . The images are object fit contain as they cannot be cropped.
...
Useful links
n/a
...