Styleguide
Colors
Color Schemes
Use .color-{scheme-id} class.
.color-background-1
Scheme 1
This is the default color scheme.
.color-background-2
Scheme 2
This is the second scheme option.
.color-inverse
Scheme 3
This is the second scheme option. Currently applies for Header and Footer.
.color-accent-1
Scheme 4
This is the second scheme option. Would apply to PDP.
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.
To set Heading 0 just use the class .h0, if you want to apply only the font-family, use the class .strongarm.
Heading 0
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.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
Text Colors
To set a color you can use the class .text-{color} with the color you want to set. Eg.
To set a red color use .text-red class.
**The examples below are bold text so it's easier to find the differences between each colors.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat.
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
Button Modifiers
NOTE: Button Modifiers only works for all buttons.
Paper
To use the paper component, you can use the class .paper. This will apply the paddings, bg color (according to the color scheme), and bordfer radius.
NOTE: For elements with the class .card the bg color will be automatically set by the color scheme.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam provident placeat eum aperiam. Dolor maxime aut, nihil quod qui quaerat omnis quae, eum ad adipisci libero nobis hic placeat accusantium.