Colours




abyss
moana
mill-pond
grove
fire
spark
dunes
mist
inactive-dark
soft-abyss
moana
soft-mill-pond
color-success
color-error
soft-spark
color-warning
soft-mist
inactive-light



Grids










Typography






A mega heading

Heading 1 example

Heading 2 example

Heading 3 example

Heading 4 example

A subtitle example

overline example

Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi condimentum nulla in rutrum faucibus. Duis metus tortor, ullamcorper vitae ipsum sed, sagittis luctus quam. Vivamus porttitor id turpis scelerisque ultrices. Proin ornare pellentesque urna sed lacinia. Mauris ultrices ultricies est, eget laoreet nulla venenatis id. Mauris id pharetra lectus, in fermentum libero. Proin sagittis nisl eget tristique dignissim. Mauris vehicula pellentesque eros sit amet auctor. Donec posuere ac nisl eu euismod. Curabitur mattis elit non diam posuere aliquet. Quisque tempor elit arcu.

Mauris ultrices ultricies est, eget laoreet nulla venenatis id. Mauris id pharetra lectus, in fermentum libero. Proin sagittis nisl eget tristique dignissim. Mauris vehicula pellentesque eros sit amet auctor. Donec posuere ac nisl eu euismod. Curabitur mattis elit non diam posuere aliquet. Quisque tempor elit arcu.

  • Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  • Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida.
  • Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Mauris ultrices ultricies est, eget laoreet nulla venenatis id. Mauris id pharetra lectus, in fermentum libero. Proin sagittis nisl eget tristique dignissim. Mauris vehicula pellentesque eros sit amet auctor. Donec posuere ac nisl eu euismod. Curabitur mattis elit non diam posuere aliquet. Quisque tempor elit arcu.

  1. Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  2. Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida.
  3. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.







Buttons




Text Text and Icon Centred and Fixed

Text Text and Icon Centred and Fixed

Text Text and Icon Centred and Fixed

Text Text and Icon Centred and Fixed

Text Text and Icon Centred and Fixed

Text Text and Icon Centred and Fixed

Text Text and Icon Centred and Fixed

Text Text and Icon Centred and Fixed




Pills




Menu Menu Sign In


Icons







Links





Button Link
Button Link
Button Link




This is a hyperlink in a sentence.

This is a hyperlink in a sentence.

This is a hyperlink in a sentence.

This is a hyperlink in a sentence.







Things




Keyword Hover


This is a tag Selected tag
This is a tag Selected tag



This is a breadcrumb
Selected breadcrumb








Accordion




Default Row
Ac mauris lorem accumsan aenean id laoreet ac sem viverra. Eget integer sapien cursus quisque facilisis ut quis. In volutpat lobortis porttitor volutpat duis. Semper cras sed fames in elementum quam dapibus felis ultrices. Vitae est ac rutrum tempor convallis bibendum a. Posuere.
Hover Row
Ac mauris lorem accumsan aenean id laoreet ac sem viverra. Eget integer sapien cursus quisque facilisis ut quis. In volutpat lobortis porttitor volutpat duis. Semper cras sed fames in elementum quam dapibus felis ultrices. Vitae est ac rutrum tempor convallis bibendum a. Posuere.
Active Row
Ac mauris lorem accumsan aenean id laoreet ac sem viverra. Eget integer sapien cursus quisque facilisis ut quis. In volutpat lobortis porttitor volutpat duis. Semper cras sed fames in elementum quam dapibus felis ultrices. Vitae est ac rutrum tempor convallis bibendum a. Posuere.



Image Ratios




Landscape

16:9
4:3
3:1

Portrait

9:16
3:4
1:1



Forms









Default Hover Active





Button fields







Default Hover Active





Button fields







Default Hover Active





Button fields



When we create forms, we can choose the placement of labels in relation to their fields. This means that we can add labels after the field, and therefore create the text animation in the designs quite easily:

This example is a label wrapped around the input:

This example is a label immediately following the input:


Gravity Forms

Unfortunately we can't move the labels after the fields in forms that are created by the Gravity Forms plugin, so we have to style those in a second way using the class names and structure of the plugin:




Extras