Primary Colour

--primary

Primary Tints

--primary-10
--primary-20
--primary-30
--primary-40
--primary-50
--primary-60
--primary-70
--primary-80
--primary-90

Primary Shades

--primary-dark-10
--primary-dark-20
--primary-dark-30
--primary-dark-40
--primary-dark-50
--primary-dark-60
--primary-dark-70
--primary-dark-80
--primary-dark-90

Primary Opacity

--primary-light-10
--primary-light-20
--primary-light-30
--primary-light-40
--primary-light-50
--primary-light-60
--primary-light-70
--primary-light-80
--primary-light-90

Secondary Colour

--secondary

Secondary Tints

--secondary-10
--secondary-20
--secondary-30
--secondary-40
--secondary-50
--secondary-60
--secondary-70
--secondary-80
--secondary-90

Secondary Shades

--secondary-dark-10
--secondary-dark-20
--secondary-dark-30
--secondary-dark-40
--secondary-dark-50
--secondary-dark-60
--secondary-dark-70
--secondary-dark-80
--secondary-dark-90

Secondary Opacity

--secondary-light-10
--secondary-light-20
--secondary-light-30
--secondary-light-40
--secondary-light-50
--secondary-light-60
--secondary-light-70
--secondary-light-80
--secondary-light-90

Action Colour

--action

Action Tints

--action-10
--action-20
--action-30
--action-40
--action-50
--action-60
--action-70
--action-80
--action-90

Action Shades

--action-dark-10
--action-dark-20
--action-dark-30
--action-dark-40
--action-dark-50
--action-dark-60
--action-dark-70
--action-dark-80
--action-dark-90

Action Opacity

--action-light-10
--action-light-20
--action-light-30
--action-light-40
--action-light-50
--action-light-60
--action-light-70
--action-light-80
--action-light-90

Base Colour

--base

Action Tints

--base-10
--base-20
--base-30
--base-40
--base-50
--base-60
--base-70
--base-80
--base-90

Action Shades

--base-dark-10
--base-dark-20
--base-dark-30
--base-dark-40
--base-dark-50
--base-dark-60
--base-dark-70
--base-dark-80
--base-dark-90

Action Opacity

--base-light-10
--base-light-20
--base-light-30
--base-light-40
--base-light-50
--base-light-60
--base-light-70
--base-light-80
--base-light-90

Typography

Highlight: --text-4xl
The quick brown fox jumps over the lazy dog. 0123456789

Heading 1: --text-3xl
The quick brown fox jumps over the lazy dog. 0123456789

Heading 2: --text-2xl
The quick brown fox jumps over the lazy dog. 0123456789

Heading 3: --text-xl
The quick brown fox jumps over the lazy dog. 0123456789

Heading 4: --text-l
The quick brown fox jumps over the lazy dog. 0123456789

Body text: --text-m
Lorem ipsum Sed mollis mi sit amet justo ornare egestas. Praesent dignissim consectetur nibh eget accumsan. Sed viverra sem ac eleifend aliquet. Sed massa dui, luctus ac orci id, auctor facilisis metus. Proin accumsan mattis nisl, nec commodo tortor eleifend quis. Aliquam sodales mauris vel eleifend vehicula. Maecenas in lobortis quam, sed mollis diam. Maecenas mi mi, tempor efficitur risus in, semper molestie leo.
Text small: --text-s
Lorem ipsum Sed mollis mi sit amet justo ornare egestas. Praesent dignissim consectetur nibh eget accumsan. Sed viverra sem ac eleifend aliquet. Sed massa dui, luctus ac orci id, auctor facilisis metus. Proin accumsan mattis nisl, nec commodo tortor eleifend quis. Aliquam sodales mauris vel eleifend vehicula. Maecenas in lobortis quam, sed mollis diam. Maecenas mi mi, tempor efficitur risus in, semper molestie leo.
Text extra small: --text-xs
Lorem ipsum Sed mollis mi sit amet justo ornare egestas. Praesent dignissim consectetur nibh eget accumsan. Sed viverra sem ac eleifend aliquet. Sed massa dui, luctus ac orci id, auctor facilisis metus. Proin accumsan mattis nisl, nec commodo tortor eleifend quis. Aliquam sodales mauris vel eleifend vehicula. Maecenas in lobortis quam, sed mollis diam. Maecenas mi mi, tempor efficitur risus in, semper molestie leo.

Button Class

Tabs

Content goes here .. (1)

Content goes here .. (2)

Accordions

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

Image and Text Card

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

Learn More

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

Learn More

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

Learn More

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

Learn More

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

Learn More

Icon card

Apply "icon-card" class to the div

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

Image Text Overlay Card

I am a heading

Learn More

I am a heading

Learn More

I am a heading

Learn More

I am a heading

Learn More

Testimonial Card

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

John Doe

ABC

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

John Doe, ABC

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

John Doe, ABC

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

John Doe, ABC

Slider class: .slider-master

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

John Doe

ABC

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

John Doe, ABC

I am a heading

Lorem ipsum dolor sit amet. Ut debitis rerum et minima omnis et eius aliquam et tenetur quis. Sed libero optio vel earum atque non internos repellendus est placeat dolorem?

John Doe, ABC

columns-2

Here goes your text ... Select any part of your text to access the formatting toolbar.

columns-3

columns-4

columns-5

columns-1-2

columns 2-1

columns 2/5 + 3/5

columns 3/5 + 2/5

Steps

Step Heading
Lorem ipsum dolor sit amet. Ea possimus aliquam est distinctio error quo ullam perferendis.
Step Heading
Eum fugiat quia qui assumenda quod aut architecto nemo et sapiente aliquam.
Step Heading
Ea placeat dolorum ut vero consequatur eum reiciendis nihil quo unde rerum vel esse omnis! 
Step Heading
Ut error architecto et laudantium placeat et corrupti ipsam qui nemo ullam in magnam iusto. 
Step Heading
 In quibusdam velit qui dolores facilis ad laudantium explicabo sit aspernatur eveniet et praesentium eaque. 
Here goes your text ... Select any part of your text to access the formatting toolbar.
this is my button