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
Standaard schuifregelaar (0-100)
Slider Input - Custom Range
Aangepaste bereikschuifregelaar (0-50)
Slider Input - With Steps
Stap-schuifregelaar (0-100, stap 10)
Slider Input - States
Uitgeschakelde schuifregelaar
Select Field - Default
Select Field - Required
Select Field - States
This field is required
TabbedFeaturesWizard
1. Jouw doelen
2. Jouw bedrijf
3. Kies een tijd
Stap 1: Jouw doelen
Vertel ons over je doelen. Dit is de eerste stap van de wizard.
Stap 2: Jouw bedrijf
Vertel ons over je bedrijf. Klik op de onderstaande knop om stap 3 te ontgrendelen.
Stap 3: Kies een tijd
Kies een tijdstip dat voor jou werkt. Deze stap was in eerste instantie vergrendeld.
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
Mijn publiek bevindt zich op social media, e-mail of een ander platform
Ik heb te maken met algoritmeveranderingen, dalende open rates en AI die de Feed overspoelt—ik moet de relatie zelf in handen hebben.
Mijn systeem hangt met ducttape aan elkaar door meerdere tools en niets communiceert met elkaar
Het is een slechte ervaring voor mijn leden en moeilijk te beheren als networkbeheer.
Ik wil inkomsten genereren met mijn community, maar ik weet niet waar ik moet beginnen
Ik heb een platform nodig dat het makkelijk maakt om betaald te worden voor toegang en échte waarde te leveren.
Radio Items (Interactive)
Mijn publiek bevindt zich op social media, e-mail of een ander platform
Ik heb te maken met algoritmeveranderingen, dalende open rates en AI die de Feed overspoelt—ik moet de relatie zelf in handen hebben.
Mijn systeem hangt met ducttape aan elkaar door meerdere tools en niets communiceert met elkaar
Het is een slechte ervaring voor mijn leden en moeilijk te beheren als networkbeheer.
Ik wil inkomsten genereren met mijn community, maar ik weet niet waar ik moet beginnen
Ik heb een platform nodig dat het makkelijk maakt om betaald te worden voor toegang en échte waarde te leveren.
Mixed: Radio + Link Item
Mijn publiek bevindt zich op social media, e-mail of een ander platform
Ik heb te maken met algoritmeveranderingen, dalende open rates en AI die de Feed overspoelt—ik moet de relatie zelf in handen hebben.
Mijn systeem hangt met ducttape aan elkaar door meerdere tools en niets communiceert met elkaar
Het is een slechte ervaring voor mijn leden en moeilijk te beheren als networkbeheer.
Ik ben nog aan het ontdekken wat een Mighty Network kan
Wanneer je een gratis proefperiode start, sturen we je een uitnodiging voor een demo in een groep waarin de basis wordt uitgelegd.
Individual States
Geselecteerd:
Geselecteerd radio-item
Dit item is geselecteerd met een groene rand en een gevulde stip.
Niet geselecteerd:
Niet-geselecteerd radio-item
Dit item is niet geselecteerd met een grijze rand en een lege stip.
Link:
Link-item met pijl
Dit item navigeert naar een URL in plaats van te selecteren.
Start je gratis proefperiode
14 dagen. Geen creditcard nodig.