Responsive Blocks

📄️ Overview

The **Responsive block** is a highly flexible component, that has been designed to allow for a number of flexible card based layouts.

📄️ Responsive block container

The **Responsive block container** is made up of several configurable elements, allowing for a range of customisable layouts. Text, button positioning

📄️ Parallax Background Vertical Scrolling

The **Parallax Background Vertical Scrolling** is made up of configurable elements, allowing for a range of customisation layouts with parallax in background.

📄️ Parallax Foreground Vertical Scrolling

The **Parallax Foreground Vertical Scrolling** is made up of configurable elements, allowing for a range of customisation layouts with parallax in background.

📄️ No link - Block 1 - Image and text vertical

The No link - Block 1 - Image and text vertical component can span either 1/4, 1/3, 1/2 or 2/3 of the grid. It can be customised as described in the specification tab below. Please see usage tab for guidance on adding images to this component.

📄️ No link - Block 2 - Image & text horizontal

The No link - Block 2 - Image & text horizontal component can span either 1/2 or 2/3 of the grid. It can be customised as described in the specification tab below. Please see usage tab for guidance on adding images to this component.

📄️ 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.

📄️ No link - Block 4 - Background image & text overlay

The No link - Block 4 - Background image & text overlay component can span either 1/3, 1/2, 2/3 or full width of the grid. This block can be rendered with or without a background image and has an optional panel behind the text.

📄️ No link - Block 5 - Image only

The No 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.

📄️ 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.

📄️ Modal - Block 1 - Image & text vertical

The Modal - Block 1 - Image & text vertical component can span either 1/4, 1/3, 1/2 or 2/3 of the grid. It contains an optional button but the entire block is clickable to launch a modal. It can be customised as described in the specification tab below.

📄️ Link - Block 1 - Image & text vertical

The Link - Block 1 - Image & text vertical component can span either 1/4, 1/3, 1/2 or 2/3 of the grid. It contains an optional button but the entire block is a clickable link. It can be customised as described in the specification tab below.

📄️ Link - Block 2 - Image & text horizontal

The Link - Block 2 - Image & text horizontal component can span either 1/2 or 2/3 of the grid. It contains an optional button but the entire block is a clickable link. It can be customised as described in the specification tab below.

📄️ Link - Block 3 - Icon & text

The 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 contains an optional superficial button but the entire block can be made into a clickable link. It can be customised as described in the specification tab below.

📄️ Link - Block 4 - Background image & text overlay

The Link - Block 4 - Background image & text overlay component can span either 1/3, 1/2, 2/3 or full width of the grid. This block can be rendered with or without a background image and has an optional panel behind the text. It contains an optional button, but the entire block is a clickable link.