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
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.
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.
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
The content wrapper is div block that wraps the content and placed as second element inside of the section. The class is content__wrapper
The base class is button
The specific button is defined by the combo class --primary --secondary
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
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
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
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
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
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.
It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.
Saycoffee prides itself on its commitment to quality, sustainability and comfort.
Browse our coffees