Navigation

Height of nav bar on desktop - 100px (Could we shrink to 70px when the user starts scrolling, removing -15px top and bottom?

Hero

There are three different heights of hero, all with a gap down the right of 50px, which is removed on mobile.
Regarding the size of headline text, the only exception is the blog hero area where an H2 text size is used instead of an H1.

Hero - Small (540px)

Sub-heading

Hero - Small (540px) - White no image

Sub-heading

Hero - Medium (640px)

Sub-heading

Hero - Large (740px)

Sub-heading

Title with label

Note: Labels are currently set to 40% opacity, but on industry pages in the future, some of them will change to be the industry colour at 100% opacity.

Label

Left H2 Black Heading

Label

Left H3 Black Heading

Label

Left H4 Black Heading

Label

Left H2 Black Heading

Label

Left H3 Black Heading

Label

Left H2 Black Heading

Label

Left H3 Black Heading

Label

Left H2 Black Heading

Label

Left H3 Black Heading

Divider Lines

On light backgrounds


On dark backgrounds


Cards - Tall (Case Study)

Normal

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porttitor turpis ac leo.

Read case study

Hover

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porttitor turpis ac leo.

Read case study

Cards - Medium (Articles & Press Releases)

Normal

The FIFA World Cup 2018 from space

Read article

Hover

The FIFA World Cup 2018 from space

Read article

Cards - Short (Industry)

Normal

Industry Name

Hover

Industry Name


Cards - Footer CTA Card

Normal

Call to action

Hover

Call to action

Port of Singapore

March 15 2017 - Taken with Deimos 2.

Port of Durban, South Africa

April 4 2018 - Taken with Deimos 2.

Another Picture

April 4 2018 - Taken with Deimos 2.

Timeline

June 2004

Lorem ipsum dolor sit amet, vim purto essent eruditi ea, in sit causae utroque.

January 2005

Lorem ipsum dolor sit amet, vim purto essent eruditi ea, in sit causae utroque.

August 2005

Lorem ipsum dolor sit amet, vim purto essent eruditi ea, in sit causae utroque.

March 2010

Lorem ipsum dolor sit amet, vim purto essent eruditi ea, in sit causae utroque.

July 2013

Lorem ipsum dolor sit amet, vim purto essent eruditi ea, in sit causae utroque.

Accordion

Question goes here lorum ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean justo leo, sodales at metus eget, vulputate viverra quam. Quisque eget nulla libero. Quisque rhoncus eros et vestibulum ultrices. Suspendisse potenti. Aliquam quis nulla nec tellus aliquam tincidunt non et augue. Sed nec ornare risus. Praesent blandit condimentum rhoncus. Vestibulum suscipit quam vitae fringilla fringilla. Vestibulum hendrerit nunc non accumsan tempus. Donec enim urna, malesuada et sem eu, hendrerit pharetra purus. Sed in volutpat lacus. Nunc iaculis leo vel sagittis sollicitudin. Nulla ultricies lacinia est, congue pellentesque arcu aliquet eu. Sed commodo posuere malesuada. Sed faucibus, dui nec vestibulum vestibulum, diam dui pulvinar ligula, nec congue nisl est sit amet magna. Aenean a auctor augue.

Question goes here lorum ipsum

Quisque dignissim mollis metus vitae posuere. Suspendisse sed dui sapien. Donec gravida nulla ac eros finibus iaculis. Phasellus efficitur finibus turpis a blandit. Cras urna mauris, convallis eu nulla non, dignissim pulvinar lorem. Nunc dignissim blandit dictum. Ut et consectetur purus, et sagittis urna. Donec velit erat, rhoncus et quam ac, accumsan condimentum sapien. Duis a tincidunt libero. Pellentesque interdum iaculis auctor. Sed varius est et magna malesuada tristique. Pellentesque ex orci, mollis eu metus non, rhoncus molestie metus. Pellentesque a pretium felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Question goes here lorum ipsum

Lorem ipsum dolor sit amet, vim purto essent eruditi ea, in sit causae utroque.

Question goes here lorum ipsum

Aliquam auctor tortor a est efficitur, eu interdum nunc varius. Morbi est libero, consectetur id rhoncus aliquam, pretium id leo. Quisque eros odio, facilisis quis sapien vel, ultrices faucibus urna. Quisque eu viverra enim. Nullam non orci pharetra, lobortis ligula ac, posuere lorem. Morbi eu feugiat libero, vel dictum lectus. Sed vehicula malesuada odio, sit amet iaculis nunc mattis a. Ut venenatis felis risus, at tincidunt lorem lobortis vitae. Aenean suscipit vel massa non pulvinar. Suspendisse mollis leo vitae aliquet rhoncus. Ut blandit efficitur metus in auctor. Vestibulum fermentum odio ut magna elementum porta. Vestibulum nec felis semper, hendrerit orci ac, imperdiet justo. Aenean quis leo facilisis, consectetur nunc ultricies, dapibus lectus. Vivamus laoreet malesuada ipsum, ac elementum tortor dignissim id. Cras in lectus ac nulla tincidunt feugiat.

Accordion

Question goes here lorum ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean justo leo, sodales at metus eget, vulputate viverra quam. Quisque eget nulla libero. Quisque rhoncus eros et vestibulum ultrices. Suspendisse potenti. Aliquam quis nulla nec tellus aliquam tincidunt non et augue. Sed nec ornare risus. Praesent blandit condimentum rhoncus. Vestibulum suscipit quam vitae fringilla fringilla. Vestibulum hendrerit nunc non accumsan tempus. Donec enim urna, malesuada et sem eu, hendrerit pharetra purus. Sed in volutpat lacus. Nunc iaculis leo vel sagittis sollicitudin. Nulla ultricies lacinia est, congue pellentesque arcu aliquet eu. Sed commodo posuere malesuada. Sed faucibus, dui nec vestibulum vestibulum, diam dui pulvinar ligula, nec congue nisl est sit amet magna. Aenean a auctor augue.

Question goes here lorum ipsum

Quisque dignissim mollis metus vitae posuere. Suspendisse sed dui sapien. Donec gravida nulla ac eros finibus iaculis. Phasellus efficitur finibus turpis a blandit. Cras urna mauris, convallis eu nulla non, dignissim pulvinar lorem. Nunc dignissim blandit dictum. Ut et consectetur purus, et sagittis urna. Donec velit erat, rhoncus et quam ac, accumsan condimentum sapien. Duis a tincidunt libero. Pellentesque interdum iaculis auctor. Sed varius est et magna malesuada tristique. Pellentesque ex orci, mollis eu metus non, rhoncus molestie metus. Pellentesque a pretium felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Question goes here lorum ipsum

Lorem ipsum dolor sit amet, vim purto essent eruditi ea, in sit causae utroque.

Question goes here lorum ipsum

Aliquam auctor tortor a est efficitur, eu interdum nunc varius. Morbi est libero, consectetur id rhoncus aliquam, pretium id leo. Quisque eros odio, facilisis quis sapien vel, ultrices faucibus urna. Quisque eu viverra enim. Nullam non orci pharetra, lobortis ligula ac, posuere lorem. Morbi eu feugiat libero, vel dictum lectus. Sed vehicula malesuada odio, sit amet iaculis nunc mattis a. Ut venenatis felis risus, at tincidunt lorem lobortis vitae. Aenean suscipit vel massa non pulvinar. Suspendisse mollis leo vitae aliquet rhoncus. Ut blandit efficitur metus in auctor. Vestibulum fermentum odio ut magna elementum porta. Vestibulum nec felis semper, hendrerit orci ac, imperdiet justo. Aenean quis leo facilisis, consectetur nunc ultricies, dapibus lectus. Vivamus laoreet malesuada ipsum, ac elementum tortor dignissim id. Cras in lectus ac nulla tincidunt feugiat.

CTA Boxes

Example 1: 66% and 33%

Label

Title of the call to action option with image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Label

Title of the call to action option

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example 2: 50% and 50%, with the latter being split 50-50% in height.

Label

Title of the call to action option with image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Label

Title of the call to action option

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Label

Title of the call to action option

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.