Text Sizes

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-text-style-h1
All H1 Headings

Heading

u-text-style-h2
All H2 Headings

Heading

u-text-style-h3
All H3 Headings

Heading

u-text-style-h4
All H4 Headings

Heading

u-text-style-h5
All H5 Headings
Heading
u-text-style-h6
All H6 Headings
Heading
u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-text-style-main
body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-text-style-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-text-style-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weight

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-weight-regular

Lorem ipsum dolor sit amet

u-weight-medium

Lorem ipsum dolor sit amet

u-weight-bold

Lorem ipsum dolor sit amet

Text Colours

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-text-colour-primary

Lorem ipsum dolor sit amet

u-text-colour-secondary

Lorem ipsum dolor sit amet

u-text-colour-accent

Lorem ipsum dolor sit amet

u-text-inverse

Lorem ipsum dolor sit amet

Text Wrap

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-text-wrap-none

Lorem ipsum dolor sit amet

u-text-wrap-pretty

Lorem ipsum dolor sit amet

u-text-wrap-balance

Lorem ipsum dolor sit amet

Line Clamp

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-text-1-line

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-text-2-lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-text-3-lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Alignment

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-text-align-left

Lorem ipsum dolor sit amet

u-text-align-center

Lorem ipsum dolor sit amet

u-text-align-right

Lorem ipsum dolor sit amet

Container

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-container
is-large
u-container
is-medium
u-container
is-small
u-container
is-full
u-container
is-bleed

Grid

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

u-grid
u-grid
[cc-column-count="1"]
u-grid
[cc-column-count="2"]
u-grid
[cc-column-count="3"]
u-grid
[cc-column-count="4"]
u-grid
[cc-column-count="5"]
u-grid
[cc-column-count="6"]

Case Study Card

Case Study Card

Icon Card

Icon Card

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Person Card

Person Card
First Last

First Last

Title, Company

Product Card

Product Card

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Resource Card

Resource Card
Style = Standard - Border

Eyebrow text

Heading

Resource Card
Style = Standard - Border

Eyebrow text

Heading

Resource Card
Style = Featured - No Border

Eyebrow text

Heading

Review Card

Review Card

"Elit aliquip deserunt eiusmod non mollit qui minim non cillum amet."

Solution Card

Solution Card

Stat Card

Solution Card

00x

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Tour Card

Tour Card

Eyebrow text

Heading

Quote Card

Quote Card

"Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa."

First Last

Title, Company

Accordion Item

The Accordion Item component should be used within the Accordion List component or a static element with the required attributes. The accordion will not function without the Code / Accordion List - JS script component present and required attributes applied to its wrapper.

Accordion Item

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Avatar

Avatar

Button

Button
Variant = Primary
Button text
Button
Variant = Secondary
Button text
Button
Variant = Text - Primary
Button text
Button
Variant = Text - Secondary
Button text

Button - Play

Button - Play

Button - Social

Button - Social

Icon List Item

The 'reason to believe' item component should be used within the RTB List component.

Icon List Item

Lorem ipsum

Lorem ipsum

Testimonial Lockup

Testimonial Lockup

"In culpa consectetur irure anim laborum et. Aliquip enim proident laborum non culpa eu sint elit consectetur excepteur velit commodo."

First Last

Company, Title

Icon

Icon / Caret Down
Icon / Check
Icon / X

Image

Image
Aspect Ratio = Landscape 3:2
Image
Aspect Ratio = Landscape 16:9
Image
Aspect Ratio = Landscape 2:1
Image
Aspect Ratio = Square 1:1
Image
Aspect Ratio = Portrait 2:3
Image
Aspect Ratio = Portrait 4:5
Image
Aspect Ratio = Cover

Video

Video

Section Padding

The section padding component can be used to add vertical padding to the top and bottom of sections. The properties for these components can then be passed through to the parent component.

Section Padding
Size = Page Top
Section Padding
Size = Large
Section Padding
Size = Medium
Section Padding
Size = Small
Section Padding
Size = None

Slider

The slider component powered by Swiper.JS to display content in a carousel layout.

Slider

Eyebrow text

Heading

Eyebrow text

Heading

Eyebrow text

Heading

Eyebrow text

Heading

Slider / Slide

Slider slides are for use only inside the main Slider component.

Slider / Slide

Eyebrow text

Heading

Body text

The body text component is useful for adding styled rich-text into components for applications such as sub-headings and accordion content. The body text component should not be used in place of rich-text for long-form content such as articles.

Body text
size = Large

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Body text
size = Base

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Body text
size = Small

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Body text
size = XSmall

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Eyebrow text

Eyebrow

Eyebrow text

Heading text

Body text
Size = H1

Heading

Body text
Size = H2

Heading

Body text
Size = H3

Heading

Body text
Size = H4

Heading

Body text
Size = H5

Heading

Body text
Size = H6

Heading

Heading Lockup

The heading lockup should be used in sections that require a eyebrow, heading and sub-heading combination. The inherit variant can be used when the layout/style of a section should determine the alignment of the heading lockup.

Button
Alignment = Left

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Button
Alignment = Center

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Button
Alignment = Right

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Button
Alignment = Horizontal

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Button
Alignment = Inherit

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Scrim

The scrim component can be used to add an overlay to images or to serve as a backdrop for modals and popups.

scrim

Accordion List

Accordion List

Bento Item Wrapper

Bento Grid Cell

Button Group

Button Group

RTB List

RTB List

Content - CTA

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Content - FAQs

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Content - Grid

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Content - Hero

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Content - Sticky Media

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Content - Slider

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Eyebrow text

Heading

Eyebrow text

Heading

Eyebrow text

Heading

Eyebrow text

Heading

Content - Testimonial

"In culpa consectetur irure anim laborum et. Aliquip enim proident laborum non culpa eu sint elit consectetur excepteur velit commodo."

First Last

Company, Title

Feature - Accordion + Media

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Feature - Accordion Tabs

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Feature - Text + Grid

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.

Feature - Text + Media

Eyebrow text

Heading

Mollit ad ea labore aute deserunt commodo sit amet ut. Ut ad labore veniam ea. Voluptate in eu sunt excepteur duis culpa.