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ón CTA Botón CTA Botón CTA

Botón CTA

Botón CTA Botón CTA Botón 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

Visualización del valor del deslizador

Text Input - Small

Entrada pequeña

Text Input - Medium

Entrada mediana

Text Input - Large

Entrada grande

Text Input - Required

Entrada requerida*

Text Input - States

Campo deshabilitado

Entrada no accionable

Error de entrada

This field is required

Slider Input - Default

Slider predeterminado (0-100)

Current value: 50

Slider Input - Custom Range

Selector de rango personalizado (0-50)

Current value: 25

Slider Input - With Steps

Deslizador incremental (0-100, paso 10)

Current value: 0

Slider Input - States

Slider deshabilitado

Current value: 75

Select Field - Default

Seleccionar por defecto

Select Field - Required

Selección requerida*

Select Field - States

Selector deshabilitado

Error en selección

This field is required

TabbedFeaturesWizard

1. Tus objetivos

2. Tu negocio

3. Elige un horario

Paso 1: Tus objetivos

Cuéntanos sobre tus objetivos. Este es el primer paso del asistente.

Paso 2: Tu negocio

Cuéntanos sobre tu negocio. Haz clic en el botón de abajo para desbloquear el paso 3.

Paso 3: Elige un horario

Elige un horario que te funcione. Este paso estaba bloqueado al principio.

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é describe mejor tu negocio?*

Mi audiencia está en redes sociales, email o en otra plataforma

Estoy lidiando con cambios de algoritmo, tasas de apertura a la baja y la IA inundando el Feed; necesito ser dueño de la relación.

Tengo todo armado con parches en varias herramientas y nada se conecta entre sí

Es una mala experiencia para mis miembros y es difícil de gestionar como Admin.

Quiero monetizar mi comunidad, pero no sé por dónde empezar

Necesito una plataforma que facilite cobrar por el acceso y entregar valor real.

Radio Items (Interactive)

Mi audiencia está en redes sociales, email o en otra plataforma

Estoy lidiando con cambios de algoritmo, tasas de apertura a la baja y la IA inundando el Feed; necesito ser dueño de la relación.

Tengo todo armado con parches en varias herramientas y nada se conecta entre sí

Es una mala experiencia para mis miembros y es difícil de gestionar como Admin.

Quiero monetizar mi comunidad, pero no sé por dónde empezar

Necesito una plataforma que facilite cobrar por el acceso y entregar valor real.

Mixed: Radio + Link Item

Mi audiencia está en redes sociales, email o en otra plataforma

Estoy lidiando con cambios de algoritmo, tasas de apertura a la baja y la IA inundando el Feed; necesito ser dueño de la relación.

Tengo todo armado con parches en varias herramientas y nada se conecta entre sí

Es una mala experiencia para mis miembros y es difícil de gestionar como Admin.

Todavía estoy aprendiendo lo que puede hacer un Mighty Network

Cuando comiences una Prueba gratuita, te enviaremos una invitación a una demo en Grupo que cubre lo básico.

Individual States

Seleccionado:

Elemento de radio seleccionado

Este elemento está seleccionado con un borde verde y un punto relleno.

No seleccionado:

Elemento de radio no seleccionado

Este elemento no está seleccionado, con un borde gris y un punto vacío.

Enlace:

Elemento de enlace con flecha

Este elemento navega a una URL en lugar de seleccionarse.

Descarga la app

Inicia tu prueba gratuita

14 días. No se necesita tarjeta de crédito.