Website Components

This page showcases the available components across the website.

What do we mean when we say hand in hand

Blocks

All components are organized in a set of sections called “Blocks”. Every “Block” can contain one or more components and has its own settings that may or may not influence the appearance of the components within the block. The main settings for each “Block” are:

Background color – all brand colors and all grey variations
Background overflow – defines if the background color should spill outside of the predefined “Width”
Width (normal or full width)

Block example:

Background color – Blue
Background overflow – Disabled
Width – Normal

The text within this component is affected by the selection of the background color and it automatically switches to white so it is readable on the blue background.

Block example:

Background color – Sage
Background overflow – Enabled
Width – Normal

Block example

Background color – Stone
Background overflow – Disabled
Width – Full Width

As you can see, the previous 2 blocks look identical although they are build with different settings – one has a normal width with overflow enabled, and the other have full width with overflow disabled. This is the case because the component that we are using within the block is not affected by the width but only by the background color. We have other components that are affected by the width (and also some that are affected by both), here is an example with the image component:

Both examples use only one “Component” with the same settings, but the “Block” settings are changing the appearance:

Above “Block” settings:

Background: Stone
Background overflow: Enabled
Width: Normal

Below “Block” settings:

Background: White
Background overflow: Disabled
Width: Full Width

There are several more options related to the “Block” settings:

The “On this page” module is being built based on “Block” settings
Every “Block” can be set to be collapsible to generate “Accordion” functionality on the page

We won’t cover those in more detail here as they don’t impact how other components are displayed.

Content Component

This is the most widely used component as almost in every other component that you can add to a page we have an instance of the Content component. This means that all options that the Content component has will also be available when it is used within other components. By a general rule, all text on the website goes through the content component. The content component contains several sub-components:

Title
Text
Button
Spacer
Image
Ordered List

Each of those has its own settings. Below you can see examples of the general options available for each sub-component.

Primary Title: Extra Large

Primary Title: Large

Primary Title: Medium

Primary Title: Small

Primary Title: Tiny

Primary Title - TO Parcel

Secondary Title - GT Sectra

Tertiary Title - Effra

Text – Extra large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor. Suspendisse in nulla quis augue molestie cursus blandit vitae tortor.

Text – Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor. Suspendisse in nulla quis augue molestie cursus blandit vitae tortor.

Text – Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor. Suspendisse in nulla quis augue molestie cursus blandit vitae tortor.

Text – Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor. Suspendisse in nulla quis augue molestie cursus blandit vitae tortor.

Content - Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor. Suspendisse in nulla quis augue molestie cursus blandit vitae tortor. Sed ac rhoncus diam, quis convallis dui.

Side By Side Images

Optional description

Text With Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor

More options

Content With Gallery

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor

Step 1

Carousel Text With Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor. Suspendisse in nulla quis augue molestie cursus blandit vitae tortor. Sed ac rhoncus diam, quis convallis dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mauris vel fermentum placerat, nulla ipsum accumsan enim, quis pretium odio quam vitae nisi. Pellentesque iaculis diam ullamcorper, iaculis dui ac, egestas dolor. Suspendisse in nulla quis augue molestie cursus blandit vitae tortor. Sed ac rhoncus diam, quis convallis dui.

Icon Carousel

Icons are predefined based on Figma’s provided icons and cannot be added manually. The reason for this is that we support multiple backgrounds so we need to have the icons rebuild in an icon font so we can manipulate their color to so there is enough contrast with the background.

Icon carousel