Skip to main content
Home

Components

Demo content

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.

Full screen width
(Includes a left/right gutter on most components to prevent text touching the edge of the window)
Extra Wide
(Applicable to XL breakpoint only)
Normal
(Default)
Medium
(Left)
Medium
(Center)
Medium
(Right)
Narrow
(Left)
Narrow
(Center)
Narrow
(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.

Narrow
(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.

None
 
Small
M: 24px / D: 40px
 
 
Medium
M: 48px / D: 64px
(Default)
 
 
Large
M: 96px / D: 144px
 
 
Extra large
M: 144px / D: 192px
 

Hero

Can be used to create a plain H1 or large image or video hero.

Basic H1 hero

Pre-header text

Full screen hero

Pre-header text

Full screen hero

Pre-header text

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

Pre-header text

Headline text

Caption text. This is the 'justified' layout option.

Pre-header text

Headline text

Caption text. This is the 'stacked left' layout option.

Pre-header text

Headline text

Caption text. This is the 'stacked centred' layout option.

Pre-header text

Headline text

Caption text. This is the 'stacked right' 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.

Black and white image of the front of a brick office building.

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.

Black and white photo of a brick office building
Copyright Photographer 2021

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.

An underground roadway

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.

An underground roadway
Part of a metal escalator.
The frontage of a modern commercial building

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.

Black and white image of the front of a brick office building.

Home

The RAF Benevolent Fund is the RAF's leading welfare charity. We offers a range of support to RAF veterans and their families, including financial, housing, relationship…

Black and white image of the front of a brick office building.

Home

The RAF Benevolent Fund is the RAF's leading welfare charity. We offers a range of support to RAF veterans and their families, including financial, housing, relationship…

Black and white image of the front of a brick office building.

Home

The RAF Benevolent Fund is the RAF's leading welfare charity. We offers a range of support to RAF veterans and their families, including financial, housing, relationship…

Black and white image of the front of a brick office building.

Home

The RAF Benevolent Fund is the RAF's leading welfare charity. We offers a range of support to RAF veterans and their families, including financial, housing, relationship…

Black and white image of the front of a brick office building.

Home

The RAF Benevolent Fund is the RAF's leading welfare charity. We offers a range of support to RAF veterans and their families, including financial, housing, relationship…

Black and white image of the front of a brick office building.

Home

The RAF Benevolent Fund is the RAF's leading welfare charity. We offers a range of support to RAF veterans and their families, including financial, housing, relationship…

Black and white image of the front of a brick office building.

Home

The RAF Benevolent Fund is the RAF's leading welfare charity. We offers a range of support to RAF veterans and their families, including financial, housing, relationship…

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.

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.

Pre-header text

Header text

Caption text.

Black and white image of the front of a brick office building.
Pre-header text

Header text

Caption text.

Black and white image of the front of a brick office building.

Experiment with different container widths.

Pre-header text

Header text

Caption text.

Black and white image of the front of a brick office building.

Button grid

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.

Jo Bloggs / Marketing Director
Image of a business woman

Accordion

Icon / Arrow / Down / Navy Created with Sketch.
Icon / Arrow / Down / Navy Created with Sketch.

Icon / Arrow / Down / Navy Created with Sketch.
Icon / Arrow / Down / Navy Created with Sketch.

Icon / Arrow / Down / Navy Created with Sketch.
Icon / Arrow / Down / Navy Created with Sketch.

Tabs

Available in horizontal and vertical formats.

Icon / Arrow / Down / Navy Created with Sketch. Icon / Arrow / Down / Navy Created with Sketch.

Icon / Arrow / Down / Navy Created with Sketch. Icon / Arrow / Down / Navy Created with Sketch.

Icon / Arrow / Down / Navy Created with Sketch. Icon / Arrow / Down / Navy Created with Sketch.

Icon / Arrow / Down / Navy Created with Sketch. Icon / Arrow / Down / Navy Created with Sketch.

Icon / Arrow / Down / Navy Created with Sketch. Icon / Arrow / Down / Navy Created with Sketch.

Icon / Arrow / Down / Navy Created with Sketch. Icon / Arrow / Down / Navy Created with Sketch.

Webform

General enquiry form

If you have a question or a general enquiry, please leave your details below.

Please do not complete this form if you are seeking welfare support such as financial assistance. Please complete our request our help form.

Keeping in touch
We promise that your details will only be used as you wish and in line with data protection law. We will never share your details with another organisation or contact you in a way you have not agreed to. However, we would like to send you communications from time to time about our organisation. If that would be ok, please tick if you are happy for us to contact you by:
For more information on how we manage your data, please see our privacy policy.
CAPTCHA

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.

General enquiry form

If you have a question or a general enquiry, please leave your details below.

Please do not complete this form if you are seeking welfare support such as financial assistance. Please complete our request our help form.

Keeping in touch
We promise that your details will only be used as you wish and in line with data protection law. We will never share your details with another organisation or contact you in a way you have not agreed to. However, we would like to send you communications from time to time about our organisation. If that would be ok, please tick if you are happy for us to contact you by:
For more information on how we manage your data, please see our privacy policy.
CAPTCHA

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.

General enquiry form

If you have a question or a general enquiry, please leave your details below.

Please do not complete this form if you are seeking welfare support such as financial assistance. Please complete our request our help form.

Keeping in touch
We promise that your details will only be used as you wish and in line with data protection law. We will never share your details with another organisation or contact you in a way you have not agreed to. However, we would like to send you communications from time to time about our organisation. If that would be ok, please tick if you are happy for us to contact you by:
For more information on how we manage your data, please see our privacy policy.
CAPTCHA

Map

Drupal block

Powered by Drupal

Drupal view

Content