Component settings
Container width
Sets the required width of the contents of the component. The options mainly apply to desktop breakpoints as on mobile, all components will stack uniformly. The medium and and narrow options can be combined with the container position option to specify where the content should be aligned in relation to the default normal container.
(Includes a left/right gutter on most components to prevent text touching the edge of the window)
(Applicable to XL breakpoint only)
(Default)
(Left)
(Center)
(Right)
(Left)
(Center)
(Right)
Regardless of the container width, the component still occupies a full row on the screen and any background settings will apply to the whole row.
(Right)
Container min height
These are minimum height settings and will stretch to be taller if the contents require it.
Auto
(Default)
Will match the
height of
contents + PADDING
Small
¼ screen height
Medium
½ screen height
Large
¾ screen height
Full
100% screen height
Padding
Controls the internal padding of each component. Top and bottom can be set separately.
M: 24px / D: 40px
M: 48px / D: 64px
(Default)
M: 96px / D: 144px
M: 144px / D: 192px
Hero
Can be used to create a plain H1 or large image or video hero.
Basic H1 hero
A hero could also be used to inject a large in to the page.
This can be combined with background styles and Tailwind CSS classes to give a different effect. In this example I we have darkened the image and used the bg-fixed CSS class to give a parallax effect.
Headline text
Caption text. This is the 'justified' layout option.
Headline text
Caption text. This is the 'stacked centred' layout option.
One column
Combine with the component width settings to produce different layouts.
Pellentesque a elit eget massa vestibulum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Two column
Columns can be equally or asymmetrically laid out and you have the option to align to top, middle or bottom of the container. Each column can contain text, images, videos or call to actions.
Donec sit amet fringilla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum malesuada. Proin nibh dui, fermentum eu risus at, gravida fringilla ex. Proin in est ut felis feugiat bibendum at cursus tortor. Mauris augue felis, semper at facilisis quis, consectetur tristique metus. Aliquam venenatis, leo ut commodo varius, felis lorem rutrum lectus, dapibus bibendum libero velit id tellus. Suspendisse vulputate efficitur viverra. Suspendisse viverra mattis lacinia. Integer libero augue, feugiat vel ante et, venenatis tincidunt nunc. Nunc tincidunt felis in sem fermentum congue. Nam placerat nisl ac elit sollicitudin, eu congue tellus hendrerit. Morbi efficitur mi sed mauris placerat laoreet.
Maecenas feugiat magna
Etiam id ullamcorper ante, convallis fringilla leo. Vivamus tempor augue odio, ac hendrerit nisl rutrum sit amet. Vestibulum odio magna, malesuada sit amet ipsum quis, luctus faucibus arcu. Morbi ac est nec odio tempus efficitur. Cras eget eros consequat, congue sapien vitae, vehicula leo. Maecenas feugiat vitae magna in iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel dolor augue.
Donec sit amet fringilla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum malesuada. Proin nibh dui, fermentum eu risus at, gravida fringilla ex. Proin in est ut felis feugiat bibendum at cursus tortor. Mauris augue felis, semper at facilisis quis, consectetur tristique metus. Aliquam venenatis, leo ut commodo varius, felis lorem rutrum lectus, dapibus bibendum libero velit id tellus. Suspendisse vulputate efficitur viverra. Suspendisse viverra mattis lacinia. Integer libero augue, feugiat vel ante et, venenatis tincidunt nunc. Nunc tincidunt felis in sem fermentum congue. Nam placerat nisl ac elit sollicitudin, eu congue tellus hendrerit. Morbi efficitur mi sed mauris placerat laoreet.
This column is aligned to the bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum malesuada. Proin nibh dui, fermentum eu risus at, gravida fringilla ex. Proin in est ut felis feugiat bibendum at cursus tortor. Mauris augue felis, semper at facilisis quis, consectetur tristique metus. Aliquam venenatis, leo ut commodo varius, felis lorem rutrum lectus, dapibus bibendum libero velit id tellus. Suspendisse vulputate efficitur viverra. Suspendisse viverra mattis lacinia. Integer libero augue, feugiat vel ante et, venenatis tincidunt nunc. Nunc tincidunt felis in sem fermentum congue. Nam placerat nisl ac elit sollicitudin, eu congue tellus hendrerit. Morbi efficitur mi sed mauris placerat laoreet.
Three column
Columns will be laid out in three equal widths. You have the option to align to top, middle or bottom of the container. Each column can contain text, images, videos or call to actions.
Morbi efficitur mi sed
Pellentesque a elit eget massa vestibulum malesuada. Proin nibh dui, fermentum eu risus at, gravida fringilla ex. Proin in est ut felis feugiat bibendum at cursus tortor. Mauris augue felis, semper at facilisis quis, consectetur tristique metus. Aliquam venenatis, leo ut commodo varius, felis lorem rutrum lectus, dapibus bibendum libero velit id tellus. Suspendisse vulputate efficitur viverra. Suspendisse viverra mattis lacinia. Integer libero augue, feugiat vel ante et, venenatis tincidunt nunc. Nunc tincidunt felis in sem fermentum congue. Nam placerat nisl ac elit sollicitudin, eu congue tellus hendrerit. Morbi efficitur mi sed mauris placerat laoreet.
Etiam id ullamcorper ante, convallis fringilla leo. Vivamus tempor augue odio, ac hendrerit nisl rutrum sit amet. Vestibulum odio magna, malesuada sit amet ipsum quis, luctus faucibus arcu. Morbi ac est nec odio tempus efficitur. Cras eget eros consequat, congue sapien vitae, vehicula leo. Maecenas feugiat vitae magna in iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel dolor augue.
Aliquam nec tortor lacinia
Cras et elit vel felis tempus molestie. Pellentesque aliquam mattis magna a maximus. Pellentesque diam elit, maximus eu massa vitae, bibendum pulvinar lectus. Integer in placerat augue, in suscipit leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam nec tortor lacinia, malesuada mi eget, gravida elit. Curabitur justo lorem, scelerisque at convallis maximus, pulvinar in enim.
Morbi eros purus, mattis eget quam id, pellentesque ultrices nisl. Aliquam pellentesque maximus metus, cursus bibendum nisl semper vitae. Ut accumsan augue lacus, eget sagittis neque lacinia mattis. Sed in odio eget velit suscipit interdum ac nec dolor. Maecenas at facilisis nunc, nec elementum purus. Aliquam semper erat non nibh consectetur, quis accumsan diam porttitor. Quisque ac sollicitudin justo, quis efficitur justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam lobortis finibus tincidunt. Quisque lacinia vel est quis aliquam. Nulla facilisi.
Integer molestie sed dolor sed eleifend. Aenean at scelerisque augue, at luctus magna. Cras lobortis sem a velit tristique molestie. Mauris quis neque nec elit fringilla elementum nec a enim. Duis ultrices placerat tellus, interdum laoreet neque porta id. Morbi at rhoncus neque. Sed id porttitor lectus, sit amet pulvinar odio. Duis sit amet tincidunt dui. Aliquam fringilla interdum ex vitae hendrerit. Fusce est tellus, ultrices in lorem egestas, sagittis cursus orci. Duis viverra, diam at convallis posuere, sapien massa faucibus nisl, vitae iaculis lacus dui nec justo. Morbi tellus turpis, malesuada ac enim sit amet, varius efficitur lorem. Sed justo justo, ornare quis arcu quis, condimentum ullamcorper nisi. Curabitur sodales, metus vitae maximus porttitor, mauris nisl gravida turpis, ut suscipit mi leo at est. Quisque quis accumsan eros.
Container signpost grid
Use this to create a grid of signpost links to other pages on the site. Search titles of existing pages and these will be presented automatically as teasers. The image and text of each teaser is managed by the individual page. Available in 1, 2, 3 (default) and 4 column options.
Container signpost slider
Use this to create a slider of signpost links to other pages on the site. Search titles of existing pages and these will be presented automatically as teasers. The image and text of each teaser is managed by the individual page. Optionally you can include an intro slide containing a headline and text.
Header text
Text & image split
This component offers options for left and right alignment and can be combined with container width to give different effects. The overall height of the component is dictated by whichever column (the image or the text) is tallest.
Experiment with different container widths.
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Gallery
1 of 4
2 of 4
3 of 4
4 of 4
Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum malesuada. Proin nibh dui, fermentum eu risus at, gravida fringilla ex. Proin in est ut felis feugiat bibendum at cursus tortor. Mauris augue felis, semper at facilisis quis, consectetur tristique metus. Aliquam venenatis, leo ut commodo varius, felis lorem rutrum lectus, dapibus bibendum libero velit id tellus. Suspendisse vulputate efficitur viverra. Suspendisse viverra mattis lacinia. Integer libero augue, feugiat vel ante et, venenatis tincidunt nunc. Nunc tincidunt felis in sem fermentum congue. Nam placerat nisl ac elit sollicitudin, eu congue tellus hendrerit. Morbi efficitur mi sed mauris placerat laoreet.
Nullam vehicula risus risus, in rhoncus mi laoreet sed. Maecenas ornare nisi eros, ac semper purus fringilla id. Maecenas hendrerit malesuada tortor, pretium luctus sapien sollicitudin sed. Nulla eu mi non tellus tincidunt porttitor. Duis magna velit, pharetra sit amet lorem vitae, tincidunt accumsan lacus. Nullam eget sapien at nisl venenatis ullamcorper. Fusce interdum elit purus, eget pharetra metus tincidunt nec. Donec consectetur risus non diam blandit condimentum. Praesent laoreet eros non dui facilisis, quis ultricies nulla faucibus. Vivamus sapien leo, vehicula nec feugiat vitae, maximus quis mauris. Donec erat elit, tristique at dolor non, iaculis tincidunt ligula. Nullam at lobortis dolor. Nullam eu est leo. Nunc bibendum mauris ante, sed ornare dolor mollis eu. Donec scelerisque neque vitae erat luctus, gravida hendrerit magna viverra. Praesent placerat, ex id interdum efficitur, erat ligula elementum quam, vestibulum rhoncus sem turpis vitae metus.
Tabs
Available in horizontal and vertical formats.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum malesuada. Proin nibh dui, fermentum eu risus at, gravida fringilla ex. Proin in est ut felis feugiat bibendum at cursus tortor. Mauris augue felis, semper at facilisis quis, consectetur tristique metus. Aliquam venenatis, leo ut commodo varius, felis lorem rutrum lectus, dapibus bibendum libero velit id tellus. Suspendisse vulputate efficitur viverra. Suspendisse viverra mattis lacinia. Integer libero augue, feugiat vel ante et, venenatis tincidunt nunc. Nunc tincidunt felis in sem fermentum congue. Nam placerat nisl ac elit sollicitudin, eu congue tellus hendrerit. Morbi efficitur mi sed mauris placerat laoreet.
Nullam vehicula risus risus, in rhoncus mi laoreet sed. Maecenas ornare nisi eros, ac semper purus fringilla id. Maecenas hendrerit malesuada tortor, pretium luctus sapien sollicitudin sed. Nulla eu mi non tellus tincidunt porttitor. Duis magna velit, pharetra sit amet lorem vitae, tincidunt accumsan lacus. Nullam eget sapien at nisl venenatis ullamcorper. Fusce interdum elit purus, eget pharetra metus tincidunt nec. Donec consectetur risus non diam blandit condimentum. Praesent laoreet eros non dui facilisis, quis ultricies nulla faucibus. Vivamus sapien leo, vehicula nec feugiat vitae, maximus quis mauris. Donec erat elit, tristique at dolor non, iaculis tincidunt ligula. Nullam at lobortis dolor. Nullam eu est leo. Nunc bibendum mauris ante, sed ornare dolor mollis eu. Donec scelerisque neque vitae erat luctus, gravida hendrerit magna viverra. Praesent placerat, ex id interdum efficitur, erat ligula elementum quam, vestibulum rhoncus sem turpis vitae metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum leo blandit ligula iaculis fringilla non vel nisi. Sed vitae mi eget est dictum aliquam ut et nisl. Proin semper ligula a enim fermentum, vel vehicula ex fringilla. Nam blandit faucibus tortor et fermentum. Sed commodo elit sit amet odio imperdiet tincidunt. Sed porta facilisis tempor. Integer rutrum magna vel sodales molestie. Donec sit amet velit fringilla, finibus turpis ut, feugiat odio. Praesent dictum velit ac tincidunt consequat.
Pellentesque a elit eget massa vestibulum malesuada. Proin nibh dui, fermentum eu risus at, gravida fringilla ex. Proin in est ut felis feugiat bibendum at cursus tortor. Mauris augue felis, semper at facilisis quis, consectetur tristique metus. Aliquam venenatis, leo ut commodo varius, felis lorem rutrum lectus, dapibus bibendum libero velit id tellus. Suspendisse vulputate efficitur viverra. Suspendisse viverra mattis lacinia. Integer libero augue, feugiat vel ante et, venenatis tincidunt nunc. Nunc tincidunt felis in sem fermentum congue. Nam placerat nisl ac elit sollicitudin, eu congue tellus hendrerit. Morbi efficitur mi sed mauris placerat laoreet.
Nullam vehicula risus risus, in rhoncus mi laoreet sed. Maecenas ornare nisi eros, ac semper purus fringilla id. Maecenas hendrerit malesuada tortor, pretium luctus sapien sollicitudin sed. Nulla eu mi non tellus tincidunt porttitor. Duis magna velit, pharetra sit amet lorem vitae, tincidunt accumsan lacus. Nullam eget sapien at nisl venenatis ullamcorper. Fusce interdum elit purus, eget pharetra metus tincidunt nec. Donec consectetur risus non diam blandit condimentum. Praesent laoreet eros non dui facilisis, quis ultricies nulla faucibus. Vivamus sapien leo, vehicula nec feugiat vitae, maximus quis mauris. Donec erat elit, tristique at dolor non, iaculis tincidunt ligula. Nullam at lobortis dolor. Nullam eu est leo. Nunc bibendum mauris ante, sed ornare dolor mollis eu. Donec scelerisque neque vitae erat luctus, gravida hendrerit magna viverra. Praesent placerat, ex id interdum efficitur, erat ligula elementum quam, vestibulum rhoncus sem turpis vitae metus.
Webform
Webform & text
Allows a webform to be combined with a column of text, image, video or call to actions. You have the option of text on the left or text on the right and can choose if the columns are aligned to the top, middle or bottom of the container.
Pellentesque habitant morbi
Cras et elit vel felis tempus molestie. Pellentesque aliquam mattis magna a maximus. Pellentesque diam elit, maximus eu massa vitae, bibendum pulvinar lectus. Integer in placerat augue, in suscipit leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam nec tortor lacinia, malesuada mi eget, gravida elit. Curabitur justo lorem, scelerisque at convallis maximus, pulvinar in enim.
This is aligned to the bottom
Cras et elit vel felis tempus molestie. Pellentesque aliquam mattis magna a maximus. Pellentesque diam elit, maximus eu massa vitae, bibendum pulvinar lectus. Integer in placerat augue, in suscipit leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam nec tortor lacinia, malesuada mi eget, gravida elit. Curabitur justo lorem, scelerisque at convallis maximus, pulvinar in enim.