'Image' component
- Julia Boyarshchikova (Deactivated)
- Sergiy Nalyvayko (Unlicensed)
Component type | ImageBlock - atom; Image - molecule |
|---|---|
Component possible inclusions | n/a |
Design source (in Figma) | |
Component status |
Introduction
The image component allows for the placement of a standalone image. The image component is intended to allow for the manual entry of a content image as is common within articles.
Anatomy
Key Content
Item | Type | Notes |
Image Asset* | Media |
|
Image Description* | Single line text | Used as alt text where appropriate |
Caption | Single line text |
|
Link | URL or Page/Node |
|
Link Description | Single line text | Used as alt text where appropriate |
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.
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.
Behavior
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 behavior (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.
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.
Don’ts
Don’t overwhelm users with unnecessary or too many images.
Do not publish a photograph of someone without their consent.
Analytics & Data
If any analytics is required, it would simply be tracking of a linked heading or element visibility of the heading. This would only require that the heading be able to be individually isolated.
Related/Similar Components
Icon
Pictogram