Life at our organisation
Discover more about our people, culture and what it is like to build your career with us.
Read moreKiosk mode
Your website is built using custom themes configured specifically for your site. The theme controls fonts, colours, buttons, cards and spacing, so that everything you build stays consistent across components, content blocks and pages.
This page shows the elements available to you and what they look like on your site. Many of the examples below use CSS classes that are already configured within your site's theme, so you only need to type the class name — you never need to write any custom code or CSS.
Adding a class
Each example tells you which class to add, and whether it belongs on the row or on the content block. The difference is simply which edit pencil you click.
To add a class at row level:
- Select the blue edit pencil icon for the row.
- Add the class into the CSS Class field.
To add a class to a content block:
- Select the grey edit pencil icon for the content block.
- Add the class into the CSS Class field.
If you need more than one class, separate them with a single space (for example card p-4).
Typography
These are the default text styles set by your theme. They are applied automatically when you choose a heading or text style in a Text content block — no classes are required.
Header 1
Header 2
Header 3
Header 4
Header 5
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero H1
Hero H1
Use this to make the H1 larger for a hero or landing area.
- Class to add: hero-h1
- Add it to: the row
- Edit pencil to use: the blue row edit pencil, then add the class into the CSS Class field
Every H1 within that row will then use the larger hero size.
Hero H2
Hero H2
Use this to make the H2 larger, for example as a stand-out section heading.
- Class to add: hero-h2
- Add it to: the row
- Edit pencil to use: the blue row edit pencil, then add the class into the CSS Class field
Every H2 within that row will then use the larger hero size.
Buttons
The platform includes primary and secondary button styles. These are used throughout the platform for things such as calls-to-action, search fields and other standard platform actions, and they are applied automatically wherever the platform needs a button.
In addition, custom button styles can be configured as part of your site's theme. Once configured, these are available to you when you create a link inside a Text content block — you simply select the button style you want from the link options. This lets you create styled call-to-action links without writing any custom HTML.
Platform buttons
Custom theme buttons
These are the custom button styles configured for your theme. Select one when adding a link in a Text content block.
Cards
Adding the card class applies the card styling defined by your theme.
- Class to add: card
- Add it to: the content block
- Edit pencil to use: the grey content block edit pencil, then add the class into the CSS Class field
This can be combined with the spacing classes below, for example card p-4.
Example card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Spacing & Alignment Utilities
Standard spacing classes can be added to adjust the padding inside a content block. Add these using the grey content block edit pencil, in the CSS Class field.
p-1, p-2, p-3, p-4, p-5 — p-1 is the smallest amount of padding and p-5 is the largest.
p-1
p-2
p-3
p-4
p-5
Equal height cards
h-100 makes cards in the same row stretch to match the height of the tallest one.
Important: h-100 must be added to every content block in that row, not just one of them. Adding it to a single card will have no effect.
- Class to add: h-100
- Add it to: every content block in the row
- Edit pencil to use: the grey content block edit pencil on each block, then add the class into the CSS Class field
Another card
This card contains a little more content but remains the same height as the others, because h-100 has been added to all three content blocks in this row.
Lorem ipsum dolor sit amet.
Another card
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Vertical Alignment
Vertical Alignment
Vertical alignment controls the positioning of content within a row containing multiple content blocks, for example centring text next to an image.
- Class to add: my-auto
- Add it to: the row, not the individual content block
- Edit pencil to use: the blue row edit pencil, then add the class into the CSS Class field
FAQs
Frequently Asked Questions
You can search our current opportunities and select the role that interests you to begin your application.
Yes. Job alerts allow you to receive notifications when opportunities matching your preferences become available.
Yes. Please contact the recruitment team if you require reasonable adjustments at any stage of the recruitment process.
Blogs
Jobs List Table
This is how jobs appear by default, without any additional CSS classes being applied.
You do not need to add a class to achieve this layout — simply add a Jobs content block to the page and the jobs will be listed in this standard format.
Jobs List Cards
The standard jobs list can be converted into individual cards by adding one class to the Jobs content block.
- Class to add: jobs-list-cards
- Add it to: the Jobs content block — this is a content block class, not a row-level class
- Edit pencil to use: the grey content block edit pencil, then add the class into the CSS Class field
Adding jobs-list-cards splits the jobs out of the standard list and displays each one as a styled card, as shown below.
Search Bar
Teams
Alex Smith
Recruitment Manager
Sam Taylor
Talent Acquisition Partner
Recruitment Team
People & Culture
Eyebrow Text
Eyebrow text can be used above a heading to introduce or categorise a section. Style the introductory text as an H5 within your Text content block, then add the class.
- Class to add: eyebrow-text
- Add it to: the content block
- Edit pencil to use: the grey content block edit pencil, then add the class into the CSS Class field
Our people
Build a career that matters
Join a team where you can develop your skills, make an impact and build a career that works for you.
Find out more