[Typography]

Font: Open Sans

Icon font: Font Awesome - Light (Pro account)

Size(s):

48 px Header 1

H1 decreases by 30% on mobile (*0.7)

32 px Header 2

H2 decreases by 20% on mobile (*0.8)

23 px Header 3

H3 decreases by 20% on mobile (*0.8)

18 px Header 4

H4 decreases by 10% on mobile (*0.9)

16 px body copy, 24 spacing

14 px for smaller titles e.g. date, category

[Colour palettes]

Below are the list of WMCA's colour palettes and the various tints.
Each colour has 10 tints, starting from the full colour and decreasing in 10% intervals.

You can find the RGB and HEX values for reference.

If using the colours in development, you shouldn't use the HEX and RGB values!
You can use the class names suggested which will give the HTML element either a 'color' or 'background-color' CSS property.

Alternatively you can use a colour in a SCSS file by using the SCSS VAR provided. For example, "color: getColor(primary, 30);".

Buttons

Primary call to action button

Primary previous call to action button

Secondary call to action button

[Hidden text button]

Reveal some hidden text

Tabs

First Tab

First Tab Content

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Second Tab

Second Tab Content

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Third Tab

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[Stats boxes]

Stat boxes grid used on desktop screen sizes and larger

(Stats boxes carousel)

Wrap the stats box card glide widget with the class 'glide'

[Stats title here]

[News boxes]

Use with a min grid width of pure-u-md-3-4

[Trends & News boxes]

Used in area template for in my area. Trends switches to carousel on mobile

[Tiles]

(cards - big)

(cards - small)

(list)

Shouldn't be used full width on desktop (use cards above instead).

[Share this]

[Sidebar links or docs]

The sidebar can be used with/without a title and with/without a border on the left or right

(with title)

(without title)

(bdr-left)

(bdr-right)

(download links)

The download links has the exact same styling and variants as the sidebar widget(s) above. It just adds a download icon next to each item in the list.

[Sidebar - related articles]

Lists of links can be used with/without a title. Icon styles can be changes to help categories the list of links and their intended purpose.
Can be used full width and in colums containing different lists of links.

The gallery can take a mixture of images and videos.
It can also be used with a minimum of 1 item, to infite items and you can have as many galleries on one page (they won't conflict with each other).
It is best used with a '.pure-g > .pure-u-1.pure-u-md-5-8' surrounding it.
Finally, it should only be used full width (wrapped with '.pure-g > .pure-u-1') if it's a campaign page.

(Campaign page)

(1 item gallery)

(2 item gallery)

(3 item gallery)

(4 or more item gallery - button appears)

Tab Switcher used to select an item in the first tab to display content in the second tab relevant to the selection made