*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Image + Text
- Nick Harris
The Image + Text component is a side-by-side layout component consisting of an image and text area
- 1 Usage
- 2 Anatomy
- 3 Editorial
- 4 Style
- 5 Accessibility
Usage
Do’s
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.
Anatomy
Item | Component | Content type | Notes |
|---|---|---|---|
1 - Image | Image | JPG, PNG | MANDATORY |
2 - Overline | Text | Not yet released | |
3 - Heading | Text | MANDATORY | |
4 - Description | Text | OPTIONAL | |
5 - Links | n/a | OPTIONAL |
Editorial
Keep your copy concise.
The image + text component is designed to allow you to expand on elements of your story by providing a space for medium bodies of copy. It’s not designed to cater for multi paragraph copy and very long headings. Keep your copy concise.
Style
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
Horizontal on larger screens, stacked on smaller screens
Accessibility
n/a