Error copying URL. Please try again or refresh
Page URL Copied!
We use cookies to improve your experience on our website. By clicking “Accept all’, you agree to the use of all cookies. More information

Components

A comprehensive component library for our website, logo suite downloads and brand colour values

This notice contains a code embed for <style> overrides.

Introduction

These components contain flexibility pre-defined by past website limitations. For example, 'Card' components have a media slot instead of a baked image layout to support the need for different media types and image aspect ratios.

UI elements like buttons and modals have both a Component and CSS style to support JS requirements and other users where Webflow Components are not supported.

See the Style Guide page for more information.

Navigation

Navigation A

Note: Does not support v2.0 of Unbreakable.

Navigation B

This component has the same nav-links across all breakpoints and utilises Webflow's 'Open Menu' settings.

Interactive & UI

Buttons

For CSS only buttons, please review to the Style Guide. These components can share differences due to component variations. For sizing, a class of u-small or u-medium must be added to the 'Advanced' > 'Class' option.
Primary
Button
Button Text
Button
target=_blank
Button Text
Button
cc-small
Button Text
White
Button
White
Button Text
White
Button
Black
Button Text

Social Share

Badges

Primary
Badge
How it Works

Accordions

Accordion (CSS with JS)

Accordion Title

Note: Does not support v2.0 of Unbreakable.

Content

Image

Wide
Image
Image
Wide 5 / 4
Image
Wide 3 / 2
Image
Wide 16 / 9
Image
Wide 3 / 1
Tall
Image
Tall 4 / 5
Image
Tall 2 / 3
Image
Fit

Cards

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

News
March 1, 2025

Populated Example

We've designed this card with modular build mode in mind.

Explore FCD

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Explore FCD
Note: For .u-post-date-ago to work, the date format MUST be one that is supported by Date.parse() – see all supported formats.

Hero Sections

Hero Option A
~0 min read

Unbreakable By Design

Component-first approach with robust layouts, minimising the potential of game-breaking changes.
Start my Project

Layout A

Robust Components Are Here!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • Item A
  • Item B
  • Item C
Button Text
Button Text
Note: Responsive is not currently supported

Swiper Slide

Card SwiperJS Slider

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Read article

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text
Slider code: Added to the </body> on this page.
SwiperJS - Bank Slide

Videos

Vimeo and YouTube

Custom Title Here

Note: Component not quite ready for production use...

Tabs

SwiperJS Tabs
How it Works

Swiper Tabs

Support for unlimited tabs linked via swiperThumbs

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Note: Component not quite ready for production use...

Footers