Style Guide

This style guide page contains styles and components used through the UI Kit. You can change any style from this page and it will be updated throughout the template.

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

h1

Heading One

h2

Heading Two

h3

Heading Three

h4

Heading Four

h5
Heading Five
h6
Heading Six
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam sit amet nisl purus in mollis nunc sed. Proin fermentum leo vel orci porta non pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean vel elit scelerisque mauris pellentesque.

Small Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non curabitur gravida arcu ac.

Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Italics

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
List
  • Item one
  • Item two
  • Item three
Numbered List
  • Item one
  • Item two
  • Item three

Rich Text

The all in one solution

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Here is another title example.

  • Lorem ipsum
  • Lorem ipsum

More about MiddleLink

Colors

The different weights of greys and colours used throughout the dashboard.

Black
Dark Grey
Grey
Light Grey
Soft Grey
Silver
Back Grey
White
Hard Green
Dark Green
Green
Light Green
Soft Green
Pale Green

Buttons

The different buttons used throughout the dashboard.

Primary
Sign Up
Secondary
Learn more
Disabled
Current Plan
Module Button
Cancel
Module Add
+
Module Dropdown
Module Cancel
Cancel

Forms

The styling of forms used throughout the dashboard.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

Layouts

Align modules to different layouts to get unique customisable designs on different pages.

4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
2.5-1 Grid
1-2.5 Grid

Module Blocks

Different building blocks that can be used across the different dashboard pages

Counter Block

New Customers

12
Basic Block

Empty Block

No Results
found
List Block

Table Heading

Title

Category

Status

Date

Example Title
Feature Request
Open
1st May 2021

Symbols

Symbols that can be used to enhance the users experience when loading data from an external source.

Loader
No Content Placeholder
No Results
found

Spacers

Spacer elements using the 8-pt grid to give sections more room to breathe.

16 px
24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX