TYPOGRAPHY
* = needs mobile font size
h1.h1-large BreeBold 35px-58px
h1.h1-large.text-banana BreeBold 58px
h1.h1-large.text-white BreeBold 58px
h1: BreeBold 48px-72px
h1.text-banana: BreeBold 73px
h1.text-white: BreeBold 73px
h1.h1-small BreeBold 35px-58px
h1.h1-small.text-banana BreeBold 58px
h1.h1-small.text-white BreeBold 58px
h2: BreeBold 58px
h2.text-banana: BreeBold 35px-58px
h2.font-serif: PT Serif 58px
h2.text-banana.font-serif: PT Serif 58px
h3: BreeBold 36px-48px
h3.text-gray900: BreeBold 48px
h3.font-serif: PT Serif 58px
h3.text-banana.font-serif: PT Serif 58px
h3.h3-hero: BreeBold 32px-36px
h3.h3-hero.text-gray900: BreeBold 36px
h3.h3-hero.text-white: BreeBold 36px
h3.h3-hero.text-banana: BreeBold 36px
h3.h3-cards: BreeBold 30px-40px
h3.h3-cards.text-gray900: BreeBold 40px
h3.h3-cards.text-white: BreeBold 40px
h4: Museo500 20px-24px
h4.h4-cards: Bree 22px-28px
h4.h4-cards.text-gray900: Bree 28px
*h5: Museo500 20px
p: Museo500 16px-20px
p.p-bold: Museo900 16px
.price-label: Museo700 36px
.info-label: Museo700 12px-16px
p.small: Museo500 14-16px
p.small-bold: Museo700 16px
p.large: Museo500 18px-24px
*p.x-large: Museo500 36px
*The price-label and info-label classnames are not associated with an element because woocommerce doesnt always put text into p tags
ul: Museo500 16px-20px
- li: Museo500 20px
- li: Museo500 20px
- li: Museo500 20px
- li: Museo500 20px
ul.small: Museo500 14px-16px
- li: Museo500 16px
- li: Museo500 16px
- li: Museo500 16px
- li: Museo500 16px
ul.small-bold: Museo700 16px
- li: Museo500 16px
- li: Museo500 16px
- li: Museo500 16px
- li: Museo500 16px
ul.large: Museo500 18px-24px
- li: Museo500 24px
- li: Museo500 24px
- li: Museo500 24px
- li: Museo500 24px
*ul.x-large: Museo500 36px
- li: Museo500 36px
- li: Museo500 36px
- li: Museo500 36px
- li: Museo500 36px
ul.check-style: Museo500 16px-20px
- li: Museo500 20px
- li: Museo500 20px
- li: Museo500 20px
- li: Museo500 20px
an example of mixing classes to modify the check style ul.check-style.small.ul-semibold: Museo500 14px-16px
- Shaving Gel to help minimize bumps while hydrating your skin
- On your scalp to give extra moisturization or use as a styling gel
- Use under your makeup as a daily moisturizer
- Cool & soothe your skin after prolonged sun exposure
- Apply after bathing to help lock in your skin’s natural moisture