Typography
Our typography system will render at the following sizes for desktop, tablet, and mobile.
Headings
The following heading styles are supported.
-
-
- 60px / 3.75rem
- 48px / 3rem
- 35px / 2.5rem
-
H1 Main Heading
-
-
-
- 48px / 3rem
- 32px / 2rem
- 28px / 2rem
-
H2 Secondary Heading
-
-
-
- 32px / 2rem
- 32px / 2rem
- 28px / 2rem
-
H3 Tertiary Heading
-
-
-
- 32px / 2rem
- 20px / 1.25rem
- 17.5px / 1.25rem
-
H4 Heading
-
-
-
- 20px / 1.25rem
- 20px / 1.25rem
- 14px / 1rem
-
H5 Heading
-
Body
The following body styles are supported.
-
-
- 16px / 1rem
- 16px / 1rem
- 14px / 1rem
-
Body
-
-
-
- 12px / 0.75rem
- 12px / 0.75rem
- 10.5px / 0.75rem
-
Body (smaller)
-
-
-
- 18px / 1.125rem
- 18px / 1.125rem
- 16px / 1.143rem
-
Body (larger)
-
Modifiers
The following modifiers can be applied to any of the above headings or body text.
-
Normal
-
Bolded
-
Airy
-
Uppercase
-
Lowercase
-
Capitalize
Components
There are a number of components to make building features on our site easier.
Separator
A simple horizontal line to separate content. By default, this contains no margin or padding.
<hr class='kb-separator' />If I were a fraction, I'd be the numerator!
This would be the denominator (isn't math fun?!)
FAQ
This FAQ component is reused in a few places. Right now it's not a reusable component from shopify, but it can be manually coded using the format below.
<hr class='kb-separator' />FAQ Section Title
This is the description copy, where you can also include a link if you'd like!
You can place some text here, but it isn't necessary. Please use the typography styles where applicable!
How do you organize a party in outer space?
You planet! (I'm sorry, I'll see myself out...)
What do you call a cow with three legs?
Tri-tip 👀
How about a cow with two legs?
Lean Beef... 🤦♂️
So what's a cow with one leg?
Steak 🥩
No legs?
Ground Beef 🍔
I'm done now, I promise 😅