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

Botão CTA Botão CTA Botão CTA

Botão CTA

Botão CTA Botão CTA Botão 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

Exibição de Valor do Slider

Text Input - Small

Campo Pequeno

Text Input - Medium

Entrada média

Text Input - Large

Entrada grande

Text Input - Required

Entrada Obrigatória*

Text Input - States

Input Desabilitado

Entrada não acionável

Erro no Campo de Entrada

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

Seleção Padrão

Select Field - Required

Seleção Obrigatória*

Select Field - States

Seleção Desabilitada

Erro na Seleção

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

O que melhor descreve o seu negócio?*

Minha audiência está nas redes sociais, no e-mail ou em outra plataforma

Estou lidando com mudanças nos algoritmos, queda nas taxas de abertura e a IA inundando o Feed—preciso ser o dono do relacionamento.

Uso um monte de ferramentas remendadas e nada se comunica

É uma experiência ruim para meus membros e difícil de gerenciar como um Admin.

Quero monetizar minha comunidade, mas não sei por onde começar

Preciso de uma plataforma que facilite cobrar pelo acesso e entregar valor real.

Radio Items (Interactive)

Minha audiência está nas redes sociais, no e-mail ou em outra plataforma

Estou lidando com mudanças nos algoritmos, queda nas taxas de abertura e a IA inundando o Feed—preciso ser o dono do relacionamento.

Uso um monte de ferramentas remendadas e nada se comunica

É uma experiência ruim para meus membros e difícil de gerenciar como um Admin.

Quero monetizar minha comunidade, mas não sei por onde começar

Preciso de uma plataforma que facilite cobrar pelo acesso e entregar valor real.

Mixed: Radio + Link Item

Minha audiência está nas redes sociais, no e-mail ou em outra plataforma

Estou lidando com mudanças nos algoritmos, queda nas taxas de abertura e a IA inundando o Feed—preciso ser o dono do relacionamento.

Uso um monte de ferramentas remendadas e nada se comunica

É uma experiência ruim para meus membros e difícil de gerenciar como um Admin.

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:

Item de botão de rádio selecionado

Este item está selecionado com borda verde e ponto preenchido.

Não selecionado:

Item de botão de rádio não selecionado

Este item não está selecionado, com borda cinza e ponto vazio.

Link:

Item de link com seta

Este item navega para uma URL em vez de selecionar.

Baixe o app

Comece seu teste grátis

14 dias. Não é necessário cartão de crédito.