Style Guide

Styles and components used through the website. You can change any style from this page and it will be updated throughout the site.

Introduction

Any new element created some be added to the "Components" section. This allows you to effortlessly refer to a style and make changes if required.

Get in touch with FCD:
0845 689 2015
hello@fcd.org.uk
Tip: You can use the contact details above and this yellow notice throughout the project.

Logos

Brand logos used throughout this project

Main
Footer

Colours

Swatches marked with the yellow dot indicate primary and secondary brand colours. Some colours here are designed for compatibility. For a detailed, more accurate representation of brand colours, please refer to the brand document supplied within the Google Drive folder.

Primary
#117E5F
#19b88a
#28e2ad
#5de9c1
#93f0d6
#b7f5e4
#DBFAF2
Support Colours
#0e2f58
#fbcd74
#E5515B
#00A6FB
#3185fc
#9f8fff
#e5515b
#28e2ad
#fac153
Neautrals
#09223e
#0b294b
#13427c
#4774ac
#a9c9f1
#EFECE6
#ffffff

Buttons

All the button variations used throughout the website.

Main buttons
Support buttons

Typography

The different text sizes used throughout the site.

h1 2xL -- Unused

This is a heading on multiple lines to test line-height CSS.

h1 XL -- Home Hero

This is a heading on multiple lines to test line-height CSS.

h1 L -- Sub Page hero

This is a heading on multiple lines
to test line-height CSS.

h1 -- fallback

This is a heading on multiple lines
to test line-height CSS.

h2 XL -- CTA heading

This is a heading on multiple lines to test line-height CSS.

h2 L -- Section Heading

This is a heading on multiple lines
to test line-height CSS.

h2 -- Hero

This is a heading on multiple lines
to test line-height CSS.

h2

This is a heading on multiple lines
to test line-height CSS.

h3

This is a heading on multiple lines
to test line-height CSS.

h4

This is a heading on multiple lines
to test line-height CSS.

h5
This is a heading on multiple lines
to test line-height CSS.
h6
This is a heading on multiple lines
to test line-height CSS.
P L

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.

P

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.

P S

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.

Quote
Block Quote
Unordered List
Link
Text Link
Bold
Bold

Forms

Default fields & grids used to generate forms.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Components

A collection of global UI elements & HTML components. This section is used to reference anything from badges to global HTML elements.

Introduction

Any new element created some be added to the "Components" section. This allows you to effortlessly refer to a style and make changes if required.

System notices

A collection of notices used to indicate errors, success, and warnings

General
Warning: You're about to override an element...
Success
Awesome! We've sent your message.
Error
Oops. Something has gone wrong

Global HTML elements

A collection of notices used to indicate errors, success, and warnings

NOTE: These HTML elements have a combo class to display here. Remove this when copying to your page.
Global Section
Global Container
Button Holder

Owl Carousel

CSS elements used by Owl Carousel for custom card sliders.

Owl Dots
Owl Dots [dark]
owl nav

Symbols

All the symbols used throughout the website

Introduction

Any new symbol created, add it below.

NOTE: These HTML elements have a combo class to display correctly. Remove this when copying to your page.
Navigation
Footer

Agree to store cookies to enhance your experience and help us analyze usage. View our privacy policy for more information.

Tools

Collection of tools you can use when creating CMS content or editing the website.

Read Time Calculator (alpha v0.0.1)

Paste your text content into this tool to generate the approx. time it will take a user to read the article. This can then be added to your CMS post.

Read time:
0 min read

Symbols

All the symbols used throughout the website