Hero pre-title

The hero component should be used at the top of the page

The text banner component has various widths from small (4 columns) to full width (12 columns). The line above the heading is optional. The text can be aligned left, but is centred by default. Be sure to set the vertical spacing for both desktop (e.g. 160) and mobile (e.g. 60)
Bahrain at night

Image banner with optional text

Man at desk

The component is named ‘Image & text columns’ with default options. The options include:

  • Image alignment (left / right)
  • Border above text (none, medium, full width)
  • Text column width (5 column / 6 column)
  • Text column vertical alignment (top / centre)
  • Hide image on mobile

It also has vertical spacing parameters for both desktop and mobile to add some top and bottom margins.

Children with laptop

The image banner & text block component has two main options

The text block can be positioned on the left or the right, and it can have either a 5 column or 6 column width for the text block. You may also want to include a button via a shortcode:

DCO home page

Text – single column

This component is quite straightforward, and has just options for the upper and lower margins on both desktop and mobile. As with many of these components, text styling is done via the WYSIWYG editor. For example:

Heading 3 style

  • List item one
  • List item two
  • List item three

Videos can also be embedded inline:


Woman with phone

Image & text squares

This component is currently only used on the about page. The images are in a square dimension and the text is centred vertically. The only option is whether the image is aligned to the left or the right.

Text – two columns

The blue line above has been included via the divider shortcode.

This component has a layout select dropdown, with three options:

  • 5 column / 6 column
  • 4 column / 7 column
  • 2 column spacer / 4 column / 4 column

It also has several other options:

  • Show blue line above the left column heading
  • Enlarge paragraph text in the left column
  • Enlarge paragraph text in the right column
  • Vertical spacing for upper and lower margins

In this example, the left columns paragraph is set to be enlarged whereas the right column paragraphs are at the default size. The option to have a blue line above the left column heading has not been set.

The component above is the video banner

Text – caption & column

This component has a caption to the left, which relates to the image above, and a single column of text. If you don’t need the caption, it is probably best to use the “text – single column” component.

You can add in all the usual text styling here, including button and divider shortcodes and embedded images and videos. When embedding an image, such as the one below, choose the large size (1010px) as this will fill the column on larger screens.


There are three other components: Key initiatives carousel which is used on many pages, Value blocks from the About page and Open roles from the Join Us page. These do not have many options and should be self explanatory.