Design System Sandbox

This is a sandbox for the design system.

Spacing variables from props are parsed as css variables:
cssVar('spacing-md') => var(--spacing-md)

Test


            <TestContainer
              $padding='spacing-md'
              $margin='spacing-md'
              $borderRadius='radius-xs'
            >
              <p>Test</p>
            </TestContainer>
            
Light

Dark

Light

Gradient Light

Gradient Dark

Button CTA Button CTA Button CTA

Button CTA

Button CTA Button CTA Button CTA

Heading 3XL

Heading 2XL

Heading XL

Heading LG

Heading MD

Heading SM

Heading XS

Paragraph XL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph LG - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph MD - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph SM - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph XS - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Custom Font Size Heading

Custom Line Height Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Custom Font Weight Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Multiple Custom Properties - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Layout Components

Basic Layouts

Auto (4 cols)

Auto (3 cols)

Responsive Columns

Auto (4 cols)

Custom Columns

Nested Grids

SectionLayout Component Style Guide

Section with Brand Solid Background

Input Components

Text Input with Slider

Visualizzazione valore slider

Text Input - Small

Input piccolo

Text Input - Medium

Input Medio

Text Input - Large

Input grande

Text Input - Required

Input Richiesto*

Text Input - States

Input disabilitato

Input non azionabile

Errore di input

This field is required

Slider Input - Default

Slider predefinito (0-100)

Current value: 50

Slider Input - Custom Range

Slider intervallo personalizzato (0-50)

Current value: 25

Slider Input - With Steps

Step Slider (0-100, step 10)

Current value: 0

Slider Input - States

Slider disabilitato

Current value: 75

Select Field - Default

Select predefinito

Select Field - Required

Selezione Richiesta*

Select Field - States

Select disabilitato

Errore di selezione

This field is required

TabbedFeaturesWizard

1. Your goals

2. Your business

3. Pick a time

Step 1: Your goals

Tell us about your goals. This is the first step of the wizard.

Step 2: Your business

Tell us about your business. Click the button below to unlock step 3.

Step 3: Pick a time

Choose a time that works for you. This step was initially locked.

Badge

Pill Color (default)

gray

brand

error

warning

success

Badge Color

gray

brand

error

warning

success

Badge Modern

gray

brand

error

warning

success

Scarica l’app

Inizia la tua prova gratuita

14 giorni. Nessuna carta di credito richiesta.