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>
LightDark
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
Responsive Columns
Custom Columns
Nested Grids
SectionLayout Component Style Guide
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 predefinito (0-100)
Slider Input - Custom Range
Slider intervallo personalizzato (0-50)
Slider Input - With Steps
Step Slider (0-100, step 10)
Slider Input - States
Slider disabilitato
Select Field - Default
Select Field - Required
Select Field - States
This field is required
TabbedFeaturesWizard
1. I tuoi obiettivi
2. La tua attività
3. Scegli un orario
Step 1: I tuoi obiettivi
Parlaci dei tuoi obiettivi. Questo è il primo passaggio della procedura guidata.
Step 2: La tua attività
Parlaci della tua attività. Fai clic sul pulsante qui sotto per sbloccare lo step 3.
Step 3: Scegli un orario
Scegli un orario comodo per te. Questo step era inizialmente bloccato.
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
Il mio pubblico vive sui social, via email o su un'altra piattaforma
Affronto continui cambi di algoritmo, tassi di apertura in calo e l'IA che inonda il Feed: devo prendere il controllo della relazione.
Uso diversi strumenti tenuti insieme col nastro adesivo e non comunicano tra loro
È un'esperienza pessima per i miei membri e difficile da gestire per l'amministrazione.
Voglio monetizzare la mia community ma non so da dove iniziare
Ho bisogno di una piattaforma che renda semplice far pagare l'accesso e offrire vero valore.
Radio Items (Interactive)
Il mio pubblico vive sui social, via email o su un'altra piattaforma
Affronto continui cambi di algoritmo, tassi di apertura in calo e l'IA che inonda il Feed: devo prendere il controllo della relazione.
Uso diversi strumenti tenuti insieme col nastro adesivo e non comunicano tra loro
È un'esperienza pessima per i miei membri e difficile da gestire per l'amministrazione.
Voglio monetizzare la mia community ma non so da dove iniziare
Ho bisogno di una piattaforma che renda semplice far pagare l'accesso e offrire vero valore.
Mixed: Radio + Link Item
Il mio pubblico vive sui social, via email o su un'altra piattaforma
Affronto continui cambi di algoritmo, tassi di apertura in calo e l'IA che inonda il Feed: devo prendere il controllo della relazione.
Uso diversi strumenti tenuti insieme col nastro adesivo e non comunicano tra loro
È un'esperienza pessima per i miei membri e difficile da gestire per l'amministrazione.
Sto ancora imparando cosa può fare un Mighty Network
Quando inizi una prova gratuita, ti manderemo un invito per una demo di gruppo che illustra le basi.
Individual States
Selezionato:
Elemento radio selezionato
Questo elemento è selezionato con un bordo verde e un punto pieno.
Non selezionato:
Elemento radio non selezionato
Questo elemento non è selezionato e ha un bordo grigio e un punto vuoto.
Link:
Elemento link con freccia
Questo elemento rimanda a un URL invece di effettuare una selezione.
Inizia la tua prova gratuita
14 giorni. Nessuna carta di credito richiesta.