Link - Block 5 - Image only

The Link - Block 5 - Image only component can span either 1/3, 1/2 or 2/3 of the grid. It can be customised as described in the specification tab below.

Overview

Overview

Example shows No link - Block 5 spanning 1/3 of the grid

---

Desktop

1/3

1/2

2/3

---

Tablet

1/3

1/2

2/3

---

Mobile

1(Full Width)

1/2 updated

---

Specification

This provides guidance on the build, layout and content options for this component.

Layout specification

Same as No link - Block 5 - Image only with the addition of linking properties.

---

Component item	Requirement & purpose	Optional or mandatory	CMS options
Height	Height expands to fit image.Each block within the container will match the height of the tallest block.	n/a	n/a
Background colour	Allows user to set a background colour. This can be configured at brand level.	Optional	Choose from colour palette.
Block width	Block can span 1/4, 1/3, 1/2, or 2/3 of grid. Content is always full width on mobile.	Mandatory	Desktop: 1/3, 1/2 or 2/3.Tablet: 1/3, 1/2 or 2/3.Mobile: 1 (Full width), 1/2.
Drop shadow	Adds a default drop shadow around entire block.Default value - 0 0 13px 0 RGBA (93,113,131,.2).	Optional	On/off.
Full border	Allows a full width border to be added to the component.	Optional	On/off.
Full border width	Sets the border width.	Optional	Add a px value.
Full border colour	Sets the border colour.	Optional	Choose from colour palette.
Foreground image	Allows user to set a foreground image.	Mandatory	Image uploader.
Image alt text	Adds alt text to an image.	Mandatory	Text input.
Lazy Load Foreground	Allows users to switch On/Off the Lazy Load functionality for the foreground image.	Optional	On/Off
Foreground image animate	Allows users to switch On/Off the animation functionality for the foreground image.	Optional	On/off.
Select animation	Allow user to select animation from the drop-down list.	Optional	Select list
Duration	Set how long in seconds the animation will take to run	Required	Numeric Input
Delay	Set a start delay on the animation in seconds	Optional	Numeric Input
Iteration	Set the number of times the animation should run	Optional	Numeric Input (Maximum two)
offset	Set the animation to start at a specific offset before or after the element has entered the view port	Optional	Numeric Input (Pixel)
Margin bottom	Controls spacing below component. Set to 16px to match the gutters.	n/a	n/a

Interaction

These are the interactive aspects of the component.

Animate container (To add animation to component)

Select animation	Allow user to select animation from the drop-down list.	Optional	Select list
Duration	Set how long in seconds the animation will take to run	Required	Numeric Input
Delay	Set a start delay on the animation in seconds	Optional	Numeric Input
Iteration	Set the number of times the animation should run	Optional	Numeric Input (Maximum two)
offset	Set the animation to start at a specific offset before or after the element has entered the view port	Optional	Numeric Input (Pixel)

Interaction
None

Style Guide Manager

There are no style guide settings for this component.

Examples in-situ

Desktop

Tablet

Mobile

Usage

General usage dos and don'ts

✅ Dos	❌ Don'ts
Read our guidance on imagery.
Read our guidance on the use of videos.
Read our guidance on the use of WYSIWYGs.