Web Components
Responsive Headers
I'm a large section title
I'm a small section title
Hero
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
I'm some paragraph text
legal disclaimer text
Badge
dangerdarkinfosuccesswarning
primary, roundsecondary, round
Single Select
Default
- Lectric XP
- RadWagon 3
- Juiced Scorpion
- Cowboy 3
- VanMoof X3
Help Text
- Lectric XP
- RadWagon 3
- Juiced Scorpion
- Cowboy 3
- VanMoof X3
Default Selection
- Lectric XP
- RadWagon 3
- Juiced Scorpion
- Cowboy 3
- VanMoof X3
Toggle
Tailwind Configs
Font family
text sans serif
text serif
Font size
0 = size 0 font
xs = size 12px font
sm = size 13px font
smx = size 14px font
md = size 16px font
lg = size 18px font
xl = size 20px font
2xl = size 24px font
3xl = size 26px font
4xl = size 32px font
5xl = size 36px font
6xl = size 42px font
7xl = size 96px font
Colors
black-pitch-black
black
black-lighter
black-20
black-lightest
white
white-40
brown
brown-lighter
orange
orange-lighter
blue-500
blue-200
green-400
green-100
gold
gold-lighter
gray-500
gray-300
gray-200
gray-100
Border radius
xs = 7px
sm = 10px
md = 12px
lg = 20px
Min/max width
md: 630px
lg: 1000px
xl: 1280px
Min height
sm: 42px
md: 413px
lg: 581px
full: 100%
Screen breakpoints
sm: 640px
md: 768px
lg: 1025px
xl: 1280px
xxl: 1400px
Margin top
mt-1: 0.25rem
mt-2: 0.5rem
mt-3: 0.75rem
mt-4: 1rem
mt-5: 1.25rem
mt-6: 1.5rem