Hero Header - this is the H1 and resized to be "huge".
Hero content - this is a small blurb you can add into the hero.
The background colour of this block has been set to Primary and the text colour "White". There's an optional image added + and optional "Hero CTA" (button).
This component is called "Heading". It has a H2 tag applied and is resized to "huge".
There's also an optional CTA button added.
You can add an optional background image, change the background colour, text colour and restyle bullet points to be "ticks".
This is the block header. It has a H3 tag and has been resized to "bigger". It also has a second colour applied.
What can you do with this block?
- Reverse it - this will put the Block Content text to the left, and the Block Header text to the right
- Text left - this will put the Block Content text underneath the Block Header text
- Tick list style - this will transform bullet points in to ticks
- Full width - this will make this block sit full width of the site container
- Button right - if you add a button, this will put the button to the right instead of the left
- Background colour - you can change the background colour of this block
- Text colour - you can change the text colour of this block
This is an "Accordion".
Background colour - you can change the background colour of this block
Text colour - you can change the text colour of this block
Add two types of accordion item - "Accordion Item" + "Module Item"
This is called "Image Text"
It can look very different depending on how it is set up. The settings are...
- Reverse - swap which side the text and image are on - ON
- Contained - allows for a wider set block but gives margin to the edges - OFF
- Tick list style - ON
- Full width - OFF
- Wider image - OFF
- Block CTA - N/A
- Text colour - Primary
- Background colour - White
— Alternative Image Text Setup - 1
Image Text
It can look very different depending on how it is set up. The settings are...
- Reverse - swap which side the text and image are on - OFF
- Contained - allows for a wider set block but gives margin to the edges - ON
- Tick list style - OFF
- Full width - ON
- Wider image - OFF
- Block CTA - ON
- Text colour - Primary
- Background colour - Light purple
— Alternative Image Text Setup - 2
Image Text is very versatile.
- Reverse - swap which side the text and image are on - ON
- Contained - allows for a wider set block but gives margin to the edges - OFF
- Tick list style - OFF
- Full width - ON
- Wider image - OFF
- Block CTA - ON
- Text colour - Primary
- Background colour - Light Teal
The below is called an "Image Block"
This is the Section Heading of the Big Content Block.
This is the Text Content of the Big Content Block. In this block, you have settings to
- Add grid items
- Add a secondary "Text Content" which will sit to the bottom right of the block
- Add a CTA
- Update the Text Colour (Currently "Light")
- Update the Background Colour (Currently "Primary")
- Add tick list style (ON)
- Condensed Grid (ON)
Grid Item Header
Grid Item Content. This is a rich text editor so can be formatted.
Grid Item Header 2
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Additional text content area.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.