Cover Hero
This is the hero subtitle. It has the font size var(--text-xl) to make it a little bigger, and the line height has been adjusted.
Default Buttons
Description: These are the site’s default buttons. They’re managed via Settings > Theme Styles > Buttons, but there shouldn’t really be any need to edit them in most cases. Their colours are set to the Automatic CSS colour settings which are site-wide, so they should only be set during initial setup based on the design file colours.
Usage: Add a button element, and select the style from the style dropdown, with modifiers in the toggle buttons below. Sizes are pre-set based on the most commonly required settings, but can be edited globally via Settings > Theme Styles > Buttons if necessary (just remember that changes here are global).
Alternating Content
Description: Every odd block displays content on the left, image on the right. Every even block displays image on the left, content on the right. Image is stretched to fit height of content with a minimum height of 350px. At tablet breakpoint (>=991), images stack on top of content and are set to the following aspect ratios at the following breakpoints: tablet 16/9, mobile 4/3, mobile small and down 1/1.
Usage: Copy the container block “alternating–container” into a section
I am a heading
Here goes your text … Select any part of your text to access the formatting toolbar.
I am a heading
Here goes your text … Select any part of your text to access the formatting toolbar.
Equal Height Image
Description: The image will always display at the same height as the content within the same grid as it (assuming display: grid and 2 or more columns). At the following breakpoints the image will display at full width, and at the following aspect ratios: tablet 16/9, mobile 4/3, mobile small and down 1/1.
Usage: Copy the block “image–cover-wrapper” into a container/block set to grid. The container is set to a grid and contains content for display purposes only.
Demo Content. Do Not Copy.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla libero nisl, cursus quis molestie eget, commodo vel augue. Pellentesque mollis malesuada vehicula. Nulla at felis id nisi lobortis tempus. Nullam vitae interdum magna, sagittis ornare eros. Sed sit amet libero luctus, eleifend augue ac, convallis magna. Cras eu convallis eros, et fringilla turpis. Suspendisse potenti. Nulla id purus id ipsum ultrices elementum.
Mauris nec ante tellus. Donec ut justo laoreet odio viverra dignissim a ac erat. Cras in sapien eget sapien scelerisque dapibus ut eu nunc. Mauris enim nulla, congue hendrerit condimentum at, ullamcorper ut odio. Praesent condimentum ac nibh sed sollicitudin. Praesent at tortor id ante aliquam tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt tortor et nibh blandit, quis elementum nisl vehicula. Ut eu tincidunt risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vulputate mauris sagittis magna faucibus feugiat. Mauris sed nunc facilisis, aliquet orci eu, dignissim enim. Quisque condimentum, erat et gravida luctus, neque sem tristique sem, eu elementum mauris leo quis diam. Sed pulvinar egestas aliquet.
Full Width Static Image
Description: The image will display full width of the page, breaking outside the content width. In order to prevent it from becoming too large on wider displays, there are certain locks on the display: on desktop it will have an aspect ratio of 16/7, width of 100%, but a maximum height of 800px, on laptop and tablet it will be 16/9 with no max height, on mobile it will be 4/3 with no max height, and on mobile small it will be 1/1.
Usage: Copy the block “breakout-image-full–wrapper” outside of other containers and sections.
Full Width Parallax Image
Description: The image will display full width of the page, breaking outside the content width. In order to prevent it from becoming too large on wider displays, there are certain locks on the display: on desktop it will have an aspect ratio of 16/9, width of 100%, but a maximum height of 800px, on laptop and tablet it will be 16/9 with no max height, on mobile it will be 4/3 with no max height, and on mobile small it will be 1/1.
Note: For parallax images to look good without obvious artefacting, they should ideally be a minimum of 1600px TALL with an aspect ratio of 9/16
Usage: Copy the block “parallax-image-full–wrapper” outside of other containers and sections.
Horizontal Icon List
Description: This is a standard horizontal icon list with wrappers and semantic definitions on the various elements
Usage: Copy the block “icon-list–horizontal” into the block/container you want the list to display, then clone the block “icon-list–item-wrapper” for each item
List Item Title
List item description... Select any part of your text to access the formatting toolbar.
Default Slider
Description: This is a default slider with the most commonly used settings, and appropriate semantic styling
Usage: Copy the block “slider–default” into the block/container you want the list to display, then add items/card templates into the “slider–default__item” block (delete existing demo content in this block), and update the query on slider–default__item if using a loop. You can update the number of slides displayed on the ID level of the slider (when the class “slider–default” is not selected and displaying as yellow).
