Best National Sales & Letting Agents

Three Years In a Row

Triple Winners

headings (margins & max-width to be component specific)

Heading 1 - Main header used on each page, commonly located in the hero block

Heading 2 - Often sub heading accompanying the h1 or the main heading of a component

Heading 3 - Used on card component headers such as with the linkBlock component

Heading 4 - Used on the headings of USP blocks

Heading 5 - Used on the headings of blog cards

body text (margins to be component specific)

Tailwind text-lg class for 18px sizing, 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 nisi ut aliquip ex ea commodo consequat.

Tailwind text-base class for 16px sizing, 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 nisi ut aliquip ex ea commodo consequat.

Tailwind text-sm class for 14px sizing, 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 nisi ut aliquip ex ea commodo consequat.

colours

bg-dark-blue-100

bg-dark-blue-80

bg-dark-blue-60

bg-dark-blue-40

bg-dark-blue-20

bg-dark-blue-10

bg-light-blue-100

bg-light-blue-80

bg-light-blue-60

bg-light-blue-40

bg-light-blue-20

bg-light-blue-10

bg-light-green-100

bg-light-green-80

bg-light-green-60

bg-light-green-40

bg-light-green-20

bg-light-green-10

bg-purple-100

bg-purple-80

bg-purple-60

bg-purple-40

bg-purple-20

bg-purple-10

bg-dark-grey-100

bg-dark-grey-80

bg-dark-grey-60

bg-dark-grey-40

bg-dark-grey-20

bg-dark-grey-10

bg-warm-grey-100

bg-warm-grey-80

bg-warm-grey-60

bg-warm-grey-40

bg-warm-grey-20

bg-warm-grey-10

gradients

dark-blue to light-green

light-blue to light-green

dark-blue to light-blue

white to dark-blue via light-blue

purple to light-blue

light-blue to white (top right)

warm-grey to white (top right)

white to light-green (top right)

buttons

btn btn--pink

btn btn--green

btn btn--white

btn btn-outline--purple