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

Bouton CTA Bouton CTA Bouton CTA

Bouton CTA

Bouton CTA Bouton CTA Bouton 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

Affichage de la valeur du curseur

Text Input - Small

Petit champ

Text Input - Medium

Saisie Moyenne

Text Input - Large

Grand champ de saisie

Text Input - Required

Champ obligatoire*

Text Input - States

Saisie désactivée

Saisie non actionnable

Erreur de saisie

This field is required

Slider Input - Default

Curseur par défaut (0-100)

Current value: 50

Slider Input - Custom Range

Curseur personnalisé (0-50)

Current value: 25

Slider Input - With Steps

Curseur à pas (0-100, pas de 10)

Current value: 0

Slider Input - States

Curseur désactivé

Current value: 75

Select Field - Default

Sélection par défaut

Select Field - Required

Sélection obligatoire*

Select Field - States

Sélection désactivée

Erreur sélection

This field is required

TabbedFeaturesWizard

1. Vos objectifs

2. Votre entreprise

3. Choisir un créneau

Étape 1 : Vos objectifs

Parlez-nous de vos objectifs. C’est la première étape de l’assistant.

Étape 2 : Votre entreprise

Parlez-nous de votre entreprise. Cliquez sur le bouton ci-dessous pour déverrouiller l’étape 3.

Étape 3 : Choisir un créneau

Choisissez un créneau qui vous convient. Cette étape était initialement verrouillée.

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

Qu’est-ce qui décrit le mieux votre entreprise ?*

Mon audience est sur les réseaux sociaux, par e-mail ou sur une autre plateforme

Je subis les changements d’algorithme, la baisse des taux d’ouverture et l’IA qui inonde le Feed — j’ai besoin de maîtriser la relation.

Je bricole avec plusieurs outils et rien ne communique entre eux

C’est une mauvaise expérience pour mes membres, et c’est difficile à gérer en tant qu’Administrateur.

Je veux monétiser ma communauté, mais je ne sais pas par où commencer

J’ai besoin d’une plateforme qui permet de faire payer l’accès facilement et de délivrer une vraie valeur.

Radio Items (Interactive)

Mon audience est sur les réseaux sociaux, par e-mail ou sur une autre plateforme

Je subis les changements d’algorithme, la baisse des taux d’ouverture et l’IA qui inonde le Feed — j’ai besoin de maîtriser la relation.

Je bricole avec plusieurs outils et rien ne communique entre eux

C’est une mauvaise expérience pour mes membres, et c’est difficile à gérer en tant qu’Administrateur.

Je veux monétiser ma communauté, mais je ne sais pas par où commencer

J’ai besoin d’une plateforme qui permet de faire payer l’accès facilement et de délivrer une vraie valeur.

Mixed: Radio + Link Item

Mon audience est sur les réseaux sociaux, par e-mail ou sur une autre plateforme

Je subis les changements d’algorithme, la baisse des taux d’ouverture et l’IA qui inonde le Feed — j’ai besoin de maîtriser la relation.

Je bricole avec plusieurs outils et rien ne communique entre eux

C’est une mauvaise expérience pour mes membres, et c’est difficile à gérer en tant qu’Administrateur.

Je découvre encore ce qu’un Mighty Network peut faire

Lorsque vous démarrez un Essai gratuit, nous vous enverrons une invitation à une démo de groupe qui couvre les bases.

Individual States

Sélectionné :

Élément radio sélectionné

Cet élément est sélectionné, avec une bordure verte et un point plein.

Non sélectionné :

Élément radio non sélectionné

Cet élément est non sélectionné, avec une bordure grise et un point vide.

Lien :

Élément de lien avec flèche

Cet élément redirige vers une URL au lieu d’être sélectionné.

Téléchargez l’application

Démarrez votre essai gratuit

14 jours. Aucune carte de crédit requise.