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

Button


Badge

dangerdarkinfosuccesswarning
primary, roundsecondary, round

Caret

Horizontal Line




Single Select

Default

Help Text

Default Selection

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: 44px
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

Make your password short and easy to guess

First name is required

Make your password short and easy to guess

Make your password short and easy to guess

Need more information? Get in touch with us at (000) 123 - 4567 or contactus@culdesac.com
Your application was successfully submitted.
We're sorry, your description is too specific. Changing filter options might give you better results
  • Culdesac Tempe
  • Culdecamp
  • ...