Styleguide
Colors
Color Schemes
Use .color-{scheme-id} class.
.color-background-1
Scheme 1
This is the Highlighted Text.
This is the Body Text.
.color-background-2
Scheme 2
This is the Highlighted Text.
This is the Body Text.
.color-inverse
Scheme 3
This is the Highlighted Text.
This is the Body Text.
.color-accent-1
Scheme 4
This is the Highlighted Text.
This is the Body Text.
.color-accent-2
Scheme 5
This is the Highlighted Text.
This is the Body Text.
.color-white-on-white
Scheme 6
This is the Highlighted Text.
This is the Body Text.
.color-scheme-f8c015a4-dfd0-4a9b-b03c-8221d2ff9c67
Scheme 7
This is the Highlighted Text.
This is the Body Text.
.color-scheme-246c39c2-578d-46d5-9a75-851c8f56e20a
Scheme 8
This is the Highlighted Text.
This is the Body Text.
.color-scheme-c76172f0-ec5d-4707-83c5-28cdcc70d184
Scheme 9
This is the Highlighted Text.
This is the Body Text.
Typography
Headings
These are the default styles fore headings, will be applied in the whole website.
You can set a class to a different heading tag. Eg.
We can set .h2 styles to an H1 element: <h1 class=".h2">Heading<h1> class.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
.text-highlighted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
Text Helpers
Use .text-{property} class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
.color-background-1
.color-background-2
.color-inverse
.color-accent-1
.color-accent-2
.color-white-on-white
.color-scheme-f8c015a4-dfd0-4a9b-b03c-8221d2ff9c67
.color-scheme-246c39c2-578d-46d5-9a75-851c8f56e20a
.color-scheme-c76172f0-ec5d-4707-83c5-28cdcc70d184
Button Modifiers
NOTE: Button Modifiers only works for all buttons.