*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
- Nick Harris
The Image Component is a container for image based media.
Usage
Do’s
Place imagery on a page to enhance an article.
Use high quality imagery.
Use images that are relevant to your brand and website copy.
Dont's
Don’t overwhelm users with unnecessary or too many images.
Do not publish a photograph of someone without their consent.
Anatomy
Insert image here
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | Image asset |
| Media |
|
2 | Image description |
| Text |
|
3 | Caption |
| Text |
|
4 | Link |
| URL or Page/Node |
|
5 | Link description |
| Text |
|
Visual style
Captioning
Images that include a caption will display the caption visually after the image.
Aspect Ratio
In many use cases, imagery will sit inside a container and be cropped to suit that container (e.g. object fit: cover). In other use cases, a parent container may be constrained to an aspect ratio (either set as a universal default or content-editor-controlled) in which it will also (if necessary) crop to fit. In other use cases still, the “native” aspect ratio will need to be maintained – an example of this would be a logo or a graph.
Shape
If the brand has preset a global border and border radius (across buttons and other elements), the border radius would be applied to standalone images unless this token was overridden by brand. It is unlikely that this would be individually content editable. If an aspect ratio hasn’t been defined then no radius would be applied as the image is filling the container in which it is placed – that container may though have a shape.
Editorial
Ensure image descriptions are concise, but detailed enough to describe the image to a blind user so that they can picture what they cannot see.
Captions should be kept concise. Long descriptions are not currently supported.
Behaviour
If linked, the image may take a hover state or a zoomed state (if using ‘cover’) in a similar manner to cards to give the user feedback that it is clickable. Equally the image will take the default focus behaviour (as per buttons). Linked images will not take a visited state (at least for now)
Imagery that crops to cover a container will do so around a defined focal point. In the absence of a focal point, it will default to the center of the image.
Accessibility
n/a
Related components