No link - Block 3 - Icon & text
The No link - Block 3 - Icon & text component can span either 1/6, 1/5, 1/4, 1/3, 1/2 or 2/3 of the grid. It can be customised as described in the specification tab below.
- Overview
- Specification
- Style Guide Manager
- Examples in-situ
- Usage
Overview
Example shows No link - Slide item 3 spanning 1/3 of the grid.
Desktop
1/6
1/5
1/4
1/3
1/2
2/3
Tablet
1/6
1/5
1/4
1/3
1/2
2/3
Mobile
1(Full Width)
1/2
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.Each block within the container will match the height of the tallest block. | n/a | Set globally via SGM and affects all instances of the component on the site. |
| Background colour | Allows user to set a background colour on entire responsive block. | 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. |
| Horizontal image alignment | Controls the alignment of text and call to action in block. | Mandatory | Left, centre or right. |
| Text/image ordering | Controls order of text and image. | Mandatory | Text top or bottom. |
| Text padding top, bottom, left and right | Allows control of the spacing around the text within this component. | Mandatory | On/off for each individual padding property.The value is set within the SGM. |
| Block width | Block can span 2/3, 1/2, 1/3, 1/4 or 1/5 of grid. Content is always full width on mobile. | Mandatory | Desktop: 2/3, 1/2, 1/3, 1/4 or 1/5.Tablet: 2/3, 1/2, 1/3, 1/4 or 1/5.Mobile: 1 (Full width), 1/2. |
| 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. |
| Border | Allows a boxed width border to be added to the bottom of the component. | Optional | On/off. |
| Border width | Sets the border width. | Optional | Add a px value. |
| Border colour | Sets the border colour. | Optional | Choose from colour palette. |
| Drop shadow | Adds a default drop shadow around entire block.Default value - 0 0 13px 0 RGBA (93,113,131,.2). | Optional | On/off. |
| 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 |
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 - 24px Tablet - 24px Mobile - 24px | Desktop Tablet Mobile |
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. |
| Icon images are fixed at a width of 96px wide. | Do not add a separate link within the block itself. This will break the block. |
| Read our guidance on imagery. | |
| Read our guidance on videos. | |
| Read our guidance on the use of WYSIWYGs. |