Internal reference, not a public page
Component style guide
The building blocks we can use on the site. The text here is placeholder and the photos are only examples. Have a look through and tell us which ones you want on each page.
01. Colour palette
Taken from the blue in the LCA logo. Every text and background pairing here has been checked for contrast against WCAG 2.2 AA.
Ink
#0F1735
Brand deep
#1F2653
Brand
#3D4A89
Brand mid
#4E5A93
Tint
#E4E7F1
Cream
#F3EEE2
02. Type scale
Page heading
Section heading
Sub-heading
Lead paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body copy. 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.
Small print. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
03. Colour-blocked accordion band
Used on the home page for the objectives, and on Membership for the benefits. Click a heading to open it. Useful where there is a lot of text that would otherwise take over the page.
Sed do eiusmod tempor incididunt.
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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ut labore et dolore magna aliqua.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
Nisi ut aliquip ex ea commodo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Cillum dolore eu fugiat nulla.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.
04. Card grid with photos
Photos are tinted to two of the brand colours so they sit with the rest of the page rather than looking dropped in. For news, events and signposting. The photos here are Unsplash placeholders.
Category
Lorem ipsum dolor sit amet consectetur
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Category
Adipiscing elit sed do eiusmod tempor
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Category
Incididunt ut labore et dolore magna
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
05. Image and text
A wide photo next to a block of text. For anything that needs explaining, such as DSPT support or how to join.
Sed ut perspiciatis unde omnis
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
06. Downloads list
Downloads and forms
For fees and forms, meeting minutes, newsletters and DSPT resources. Each row links to a file and shows its type and size.
07. Pull quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Name, Job title, Organisation
08. Call to action panel
Ut enim ad minim veniam
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
09. Card carousel
The same cards as the grid above, on a strip that scrolls sideways. Use the arrows, or swipe on a phone. Nothing moves on its own. For when there are more items than a row of three can hold.
Category
Lorem ipsum dolor sit amet consectetur
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Category
Adipiscing elit sed do eiusmod tempor
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Category
Incididunt ut labore et dolore magna
Nisi ut aliquip ex ea commodo consequat, duis aute irure dolor.
Category
Excepteur sint occaecat cupidatat non
In reprehenderit in voluptate velit esse cillum dolore eu fugiat.
Category
Sunt in culpa qui officia deserunt
Mollit anim id est laborum, sed ut perspiciatis unde omnis iste.
Category
Natus error sit voluptatem accusantium
Doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo.