Text
Headers
The class for the headers is header__text
The levels of headers is defined by its combo class --1
--2 --3 --4 --5 --6
The lead text class is lead__text
The body text class is body__text
The levels of body is defined by its combo class --18 --14
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Lead text
Body 18
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body 14
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text alignment
The alignment is determent by the combo class --t-a-l --t-a-c --t-a-r
Text align left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text align center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text align right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Elements
Sections
When creating a new section use the element section
The base class is section to customize the section then add a combo class
Existing combo classes --hero --blog-hero --product-category-hero
Content Wrapper
The content wrapper is div block that wraps the content and placed as second element inside of the section. The class is content__wrapper
Buttons
The base class is button
The specific button is defined by the combo class --primary --secondary
Colors
Background color – BG color
The BG color is a combo class and named by the colors name fx --bg-green
If you add new color then remember to add it to color swatch for easy access
--bg-white-smoke
--bg-rosy-brown
--bg-yellow
--bg-sc-orange
--bg-sand
--bg-silver
--bg-old-lace
--bg-dim-grey
--bg-powder-blue
--bg-sienna
--bg-see-green
--bg-dark-green
--bg-peach
--bg-bisque
--bg-slate-grey
--bg-light-green
--bg-light-coral
--bg-light-coral
Spacing
Margin
Margin can be placed on Top, Right, Bottom, and Left side of an element. To create space on both top and bottom web just use Y and for Right and left we use X. Simply use one the mentioned combo classes below.
Metrics
The spacing is using VH (View Height) and VW (View Width) is increasing as following:
1.25vh/vw 2.5vh/vw 5vh/vw 7.5vh/vw 10vh/vw 15vh/vw 20vh/vw
Margin bottom
Classes
--m-b-1.25 --m-b-2.5 --m-b-5 --m-b-7.5 --m-b-10 --m-b-15 --m-b-20
Margin Top
Classes
--m-t-1.25 --m-t-2.5 --m-t-5 --m-t-7.5 --m-t-10 --m-t-15 --m-t-20
Margin X-axis
Classes
--m-x-1.25 --m-x-2.5 --m-x-5 --m-x-7.5 --m-x-10 --m-x-15 --m-x-20
ON-TIME DELIVERY
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.
Cyclist packaging
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.
ON-TIME DELIVERY
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.
Cyclist packaging
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.