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

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

1
2
3
4
Auto (4 cols)
Auto (4 cols)
Auto (4 cols)
Auto (3 cols)
Auto (3 cols)
Auto (3 cols)
Auto (3 cols)

Responsive Columns

Auto (4 cols)
Auto (4 cols)
Auto (4 cols)
1
2
3

Custom Columns

1
2
3
4
5

Nested Grids

1
2
3
4
5

SectionLayout Component Style Guide

Section with Brand Solid Background

Input Components

Text Input with Slider

Text Input - Small

Text Input - Medium

Text Input - Large

Text Input - Required

Text Input - States

This field is required

Slider Input - Default

Slider Padrão (0-100)

Current value: 50

Slider Input - Custom Range

Slider de Intervalo Personalizado (0-50)

Current value: 25

Slider Input - With Steps

Controle Deslizante por Etapas (0-100, de 10 em 10)

Current value: 0

Slider Input - States

Slider Desabilitado

Current value: 75

Select Field - Default

Select Field - Required

Select Field - States

This field is required

TabbedFeaturesWizard

1. Seus objetivos

2. Seu negócio

3. Escolha um horário

Passo 1: Seus objetivos

Conte-nos sobre seus objetivos. Este é o primeiro passo do assistente.

Passo 2: Seu negócio

Conte-nos sobre o seu negócio. Clique no botão abaixo para desbloquear o passo 3.

Passo 3: Escolha um horário

Escolha um horário que funcione para você. Este passo estava inicialmente bloqueado.

Badge

Pill Color (default)

gray

brand

error

warning

success

Badge Color

gray

brand

error

warning

success

Badge Modern

gray

brand

error

warning

success

RadioGroup

Radio Items with Label

Radio Items (Interactive)

Mixed: Radio + Link Item

Ainda estou aprendendo o que uma Mighty Network pode fazer

Quando você iniciar um Teste grátis, enviaremos um convite para uma demonstração em Grupo que aborda o básico.

Individual States

Selecionado:

Não selecionado:

Link:

Item de link com seta

Este item navega para uma URL em vez de selecionar.