No link - Block 6 - Image, text & background image

The No link - Block 6 - Image, text & background image can span either 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 6 spanning 1/2 of the grid

---

Desktop

1/2

2/3

---

Tablet

1/2

2/3

---

Mobile

1(Full Width)

1/2

---

Specification

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

Layout specification

---

Component item	Requirement & purpose	Optional or mandatory	CMS options
Minimum height	Sets minimum height of component for each breakpoint. >Component expands based on content.	n/a	Set globally via SGM and affects all instances of the component on the site.
Background image	Allows user to set a background image. This is full width and set to cover.	Optional	Image uploader.
Background image aria label	The aria-label allows us to specify a string to be used as the accessible label.	Optional	Text input field
Lazy Load Background	Allows users to switch On/Off the Lazy Load functionality for the background image.	Optional	On/Off
Background colour	Allows user to set a background colour on the component.	Optional	Choose from colour palette.
Content alignment	Controls the alignment of text and call to action in block.	Mandatory	Vertically align top, centre or bottom.>Horizontally align left, centre or right.
Content alignment on mobile	Controls the alignment of text and call to action in block.	Mandatory	Vertically align top, centre or bottom.>Horizontally align left, centre or right.
Text/image ordering	Controls order of text and image.	Mandatory	Text left or right.
Text padding top, bottom, left and right	Allows control of the spacing around the text within this component.	Optional	On/off for each individual padding property.
Block width	Block can span 1/2 or 2/3 or full width of grid. Content is always full width on mobile.	Mandatory	Desktop: 1/2, 2/3 or full width.Tablet: 1/2, 2/3 or full width.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 the 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)
Heading text	Sets heading text.	Optional	Text input.
Heading element	Sets H2, H3, H4 or H5 on component.	Optional	Select heading element.
Heading style	Allows user to choose where more then one type of heading style may be present (i.e. multiple H2's).	Optional	Select heading style.
Heading colour	Sets heading colour.	Optional	Choose from colour palette.
Paragraph	Sets paragraph content.	Optional	Text input.
Paragraph style	Sets paragraph style.	Optional	Paragraph style select.
Paragraph colour	Sets paragraph colour.	Optional	Choose from colour palette.
WYSIWYG	Allows user to format text where additional styles may be required.	Optional	WYSIWYG.
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

These are the Style Guide Manager settings that are specific to this component. For global settings see the Style Guide Manager section.

Property	Requirement & purpose	Default	SGM override
Image margin bottom	Add space between the image and the text	Desktop - 360px Tablet - 240px Mobile - 224px	Desktop Tablet Mobile

Examples in-situ

There are no current design examples.

Usage

General usage dos and don'ts

✅ Dos	❌ Don'ts
Ensure the text is legible.	Do not use a background image that makes the text hard to read.
Read our guidance on imagery.
Read our guidance on the use of videos.
Read our guidance on the use of WYSIWYGs.