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

Schieberegler-Wertanzeige

Text Input - Small

Kleine Eingabe

Text Input - Medium

Mittlere Eingabe

Text Input - Large

Großes Eingabefeld

Text Input - Required

Eingabe erforderlich*

Text Input - States

Deaktiviertes Eingabefeld

Nicht-aktionsfähige Eingabe

Fehler Eingabe

This field is required

Slider Input - Default

Standard-Schieberegler (0-100)

Current value: 50

Slider Input - Custom Range

Individueller Bereich-Schieberegler (0-50)

Current value: 25

Slider Input - With Steps

Schieberegler mit Schritten (0-100, Schrittweite 10)

Current value: 0

Slider Input - States

Deaktivierter Schieberegler

Current value: 75

Select Field - Default

Standardauswahl

Select Field - Required

Auswahl erforderlich*

Select Field - States

Deaktivierte Auswahl

Fehler Auswahl

This field is required

TabbedFeaturesWizard

1. Deine Ziele

2. Dein Business

3. Wähle eine Zeit

Schritt 1: Deine Ziele

Erzähl uns von deinen Zielen. Dies ist der erste Schritt des Assistenten.

Schritt 2: Dein Business

Erzähl uns von deinem Business. Klicke auf den Button unten, um Schritt 3 freizuschalten.

Schritt 3: Wähle eine Zeit

Wähle eine Zeit aus, die dir passt. Dieser Schritt war anfangs gesperrt.

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

Was beschreibt dein Business am besten?*

Meine Zielgruppe nutzt Social Media, E-Mail oder eine andere Plattform

Ich kämpfe mit Algorithmus-Änderungen, sinkenden Öffnungsraten und KI, die den Feed überschwemmt – ich muss die Beziehung selbst in der Hand haben.

Ich jongliere notdürftig mit mehreren Tools, die nicht miteinander kommunizieren

Es ist eine schlechte Erfahrung für meine Mitglieder und als Admin schwer zu verwalten.

Ich möchte meine Community monetarisieren, weiß aber nicht, wo ich anfangen soll

Ich brauche eine Plattform, die es einfach macht, kostenpflichtigen Zugang anzubieten und echten Mehrwert zu liefern.

Radio Items (Interactive)

Meine Zielgruppe nutzt Social Media, E-Mail oder eine andere Plattform

Ich kämpfe mit Algorithmus-Änderungen, sinkenden Öffnungsraten und KI, die den Feed überschwemmt – ich muss die Beziehung selbst in der Hand haben.

Ich jongliere notdürftig mit mehreren Tools, die nicht miteinander kommunizieren

Es ist eine schlechte Erfahrung für meine Mitglieder und als Admin schwer zu verwalten.

Ich möchte meine Community monetarisieren, weiß aber nicht, wo ich anfangen soll

Ich brauche eine Plattform, die es einfach macht, kostenpflichtigen Zugang anzubieten und echten Mehrwert zu liefern.

Mixed: Radio + Link Item

Meine Zielgruppe nutzt Social Media, E-Mail oder eine andere Plattform

Ich kämpfe mit Algorithmus-Änderungen, sinkenden Öffnungsraten und KI, die den Feed überschwemmt – ich muss die Beziehung selbst in der Hand haben.

Ich jongliere notdürftig mit mehreren Tools, die nicht miteinander kommunizieren

Es ist eine schlechte Erfahrung für meine Mitglieder und als Admin schwer zu verwalten.

Ich lerne noch, was ein Mighty Network alles leisten kann

Wenn du eine Kostenlose Testphase startest, senden wir dir eine Einladung zu einer Demo in der Gruppe, die die Grundlagen abdeckt.

Individual States

Ausgewählt:

Ausgewähltes Optionsfeld

Dieses Element ist mit einem grünen Rand und einem ausgefüllten Punkt ausgewählt.

Nicht ausgewählt:

Nicht ausgewähltes Optionsfeld

Dieses Element ist nicht ausgewählt, mit einem grauen Rand und einem leeren Punkt.

Link:

Link-Element mit Pfeil

Dieses Element navigiert zu einer URL, anstatt etwas auszuwählen.

App herunterladen

Kostenlos testen

14 Tage. Keine Kreditkarte erforderlich.