Headings

Heading One - 3xl / 6xl

Heading Two - 2xl / 5xl

Heading Three - xl / 3xl

Heading Four - xl / 2xl

Heading Five - lg / xl

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus dolores voluptatem amet dolorem beatae voluptatum voluptatibus quo, cum cupiditate debitis provident optio consectetur sapiente est culpa minus sint nam placeat.

Text usage

h1 & p

Heading One

h1, h2 & p

Heading One

Heading Two

h2 & p

Heading Two

h3 & p

Main Three

h4 & p

Heading Four

h5 & p

Heading Five

p & p

text links

A link within a paragraph tag, debitis provident

debitis provident

text links with icons

Icon on the left

Icon on the right

Unordered List

Responsive design
Cross-browser compatibility
SEO-friendly markup
Accessible components

Ordered List

Log in to the dashboard
Navigate to the Reports section
Click "New Report"
Fill in the required fields
Click "Submit"

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ullam architecto deserunt molestiae esse odio mollitia temporibus corrupti dolores excepturi veritatis, nihil itaque, ad, fugit amet deleniti aperiam earum. Illum!
- John Doe

Colours

Brand

Purple#732b8b
Purple Darker#270429
Coral#f86053
Orange#f58220

System

Success#4D7A32
Alert#BC1800
Sale#BC1804

Contrast

Contrast One#fff
Contrast Two#EEEEEE
Contrast Three#DBDBDB
Contrast Four#BABABA
Contrast Five#606060
Contrast Six#000000

Default

Default#4d7a32
Darker#1c3210

Buttons

Primary & Secondary

Icon Left

Icon Right

Icons

These are the icons with each new theme. The size of these icons have been adjusted below only for demo purposes.

All of these icons are currently purple, this is just for demo purposes on this page to show how easily it is to change the colour of an SVG. You can see in the docs here, how to change the colour of an SVG using CSS.

System Icons

Social Icons Payment Icons

Form Elements

Field sizes

Small field

Regular field

Large field

Errors

If a user enters information into a field that does not meet validation (or has been skipped but is required), they will receive an error, featuring error styling, and hint text informing them of the issue. In forms, users are anchored tot he error field - or first error field if there are multiple instances.

Here is a label showing an error Please input a valid email address

Optional icons

To add an icon before or after add form-input--left-icon or form-input--right-icon as this will add the padding needed. Then, just add another class for the icon and use CSS to target the icon you want to use. In this example. I have used the email icon

This has an icon to the left

This has an icon to the right

Checkboxes

Checkbox small labelSupporting line of copy

Checkbox labelSupporting line of copy

Alternate label

Radio Button

YesSupporting line of copy NoSupporting line of copy

Small RadioSupporting line of copy Small RadioSupporting line of copy

Alternate Radio One

Alternate Radio Two

Select Box

Misc

This has been created so you can see all of the different radius sizes available.

Border Radius

Shadows

Light
Default
Heavy

Tables

Basic Table

Column One	Column Two
Here is some content	Here is some content
Here is some content	Here is some content
Here is some content	Here is some content
Here is some content	Here is some content

Responsive Table

This is so tables can maintain there layout when on mobile. The user can then scroll left or right to see more content.

Name	Position	Department	Email	Phone	Location	Status
Sophie Thompson	Marketing Manager	Marketing	sophie.thompson@example.co.uk	+44 7911 123456	London	Active
Amelia Walker	UX Designer	Product	amelia.walker@example.co.uk	+44 7555 765432	Bristol	On Leave
James O'Connor	Finance Analyst	Finance	james.oconnor@example.co.uk	+44 7802 112233	Glasgow	Active

Pagination

Some basic styling has been created within assets/scss/theme/components/_pagination.scss. Edit this to match the Figma design.