Tulio Solorzano

Sistema de diseño — navegación de página

Sistema de diseño

Un sistema de interfaz escalable pensado para rendimiento, accesibilidad y flujos de producto reales.

  • Claro / Oscuro
  • Basado en tokens
  • Pensado para WCAG
  • Basado en componentes

Resumen del sistema

Tokens y tipografía completos → Guía de estilo

Cómo se comporta la interfaz: los tokens limitan color, tipografía, superficies y espaciado para que la UI compuesta sea coherente.Tokens y tipografía completos → Guía de estilo

En la práctica

Los mismos tokens se componen en UI predecible: superficie, etiqueta, campo y acción.

Sistema de color

Primaria (rampa de marca)

--brand-50
--brand-100
--brand-200
--brand-300
--brand-400
--brand-500
--brand-600
--brand-700
--brand-800
--brand-900

Secundaria (rampa violeta)

--secondary-50
--secondary-100
--secondary-200
--secondary-300
--secondary-400
--secondary-500
--secondary-600
--secondary-700
--secondary-800
--secondary-900

Semántica

--success
--warning
--danger
--info

Tipografía

Heading 1Heading 2Heading 3

El cuerpo usa el tamaño por defecto y la interlinea para lectura prolongada y copy de UI.

Texto pequeño para leyendas, pistas y metadatos secundarios.

const primary = 'var(--brand-700)';

Superficies y elevación

Las superficies van de la página (--surface-0) a tarjetas elevadas; la elevación usa tokens de sombra compartidos. Cambia claro/oscuro en la cabecera para comprobar contraste.

--surface-0
--surface-1
--surface-2
--surface-3
--surface-4
--surface-5
--surface-6
--surface-7
--surface-8
--shadow-sm
--shadow-md
--shadow-lg

Espaciado y radio

Escala de espaciado

  • --space-2
  • --space-3
  • --space-4
  • --space-5
  • --space-6

Radio de esquina

--radius-sm
--radius-md
--radius-lg
--radius-pill

Layout y composición

Primitivas de layout reutilizables para composición responsive—grids, asides y tarjetas. Los tokens visuales están en el resumen del sistema.

Cuadrícula

Tres patrones cubren la mayoría de layouts de producto: una cuadrícula equilibrada de cuatro columnas, una de tres columnas más amigable para contenido y una región principal con aside.

Por debajo de 768px, los ejemplos de cuadrícula se ocultan para mantener tarjetas legibles; el patrón principal + aside demuestra el comportamiento responsive.

Layout equilibrado (4 columnas)

Tarjeta con estilo por defecto.

Tarjeta con color de superficie 2.

Tarjeta con color de superficie 3.

Tarjeta con color de superficie 4.

Layout amigable para contenido (3 columnas)

Tarjeta con estilo por defecto.

Tarjeta con color de superficie 2.

Tarjeta con color de superficie 3.

Cuadrícula con Aside

Cuadrícula con Aside Artículo

Botón de encabezado
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6

Artículo usando estilos de tarjeta para mantener la consistencia visual.

Artículo usando estilos de tarjeta para mantener la consistencia visual.

HTML
<div class="grid-4">
  <article class="card card-1">Column</article>
  <article class="card card-2">Column</article>
  <article class="card card-3">Column</article>
  <article class="card">Column</article>
</div>
<div class="grid-3">
  <article class="card">Column</article>
  <article class="card">Column</article>
  <article class="card">Column</article>
</div>

Acciones

Elementos interactivos para disparar la intención del usuario.

Botones

La jerarquia es intencional: una accion principal por region, secundaria de apoyo, terciaria para menor enfasis. Contorno y transparente son variantes de estilo—no niveles extra. Advertencia y peligro son para riesgo o estados del sistema, no decoracion.

Accion Principal

Principal: la CTA principal por bloque—el ancla de jerarquia.

HTML
<button class="btn btn-primary" type="button">
  <span class="label">Continuar</span>
</button>

Acciones secundarias y terciarias

Secundaria y terciaria de apoyo: alternativas que apoyan a la principal sin competir con ella.

HTML
<button class="btn btn-secondary" type="button">
  <span class="label">Secundario</span>
</button>

<button class="btn btn-tertiary" type="button">
  <span class="label">Terciario</span>
</button>

Variantes y estilos

Contorno, transparente e iconos—tratamientos visuales, no niveles de jerarquia.

Contorno

Contorno blanco

Trazo blanco para superficies oscuras o de color, como un hero.

HTML
<button class="btn btn-outline-white" type="button">
  <span class="label">Contorno blanco</span>
</button>

Transparente

Acciones discretas sobre fondos intensos—mismo tipo de variante que el contorno, otra superficie.

Botones con icono

Icono al inicio, al final o solo icono.

HTML
<button class="btn btn-outline" type="button">
  <span class="label">Contorno</span>
</button>

<button class="btn btn-outline-primary" type="button">
  <span class="label">Contorno principal</span>
</button>

<button class="btn btn-outline-secondary" type="button">
  <span class="label">Contorno secundario</span>
</button>

<button class="btn btn-outline-tertiary" type="button">
  <span class="label">Contorno terciario</span>
</button>

<button class="btn btn-ghost" type="button">
  <span class="label">Transparente</span>
</button>

<button class="btn btn-secondary" type="button">
  <span class="iconify" aria-hidden="true">✓</span>
  <span class="label">Icono inicial</span>
</button>

Estados

Deshabilitado, carga y estilo enlace.

Como enlace
HTML
<button class="btn btn-primary" type="button" disabled>
  <span class="label">Deshabilitado</span>
</button>

<button class="btn btn-primary is-loading" type="button" aria-busy="true">
  <span class="label">Cargando</span>
</button>

<a class="btn btn-link" href="#buttons" role="button">Como enlace</a>

Destructivas y feedback del sistema

Para acciones irreversibles, alertas y validacion—no para navegacion cotidiana.

HTML
<button class="btn btn-warning" type="button">
  <span class="label">Advertencia</span>
</button>

<button class="btn btn-danger" type="button">
  <span class="label">Peligro</span>
</button>

<button class="btn btn-outline-warning" type="button">
  <span class="label">Contorno advertencia</span>
</button>

<button class="btn btn-outline-danger" type="button">
  <span class="label">Contorno peligro</span>
</button>

Tamanos

HTML
<button class="btn btn-primary btn-sm" type="button">
  <span class="label">Pequeno</span>
</button>

<button class="btn btn-primary" type="button">
  <span class="label">Predeterminado</span>
</button>

<button class="btn btn-primary btn-lg" type="button">
  <span class="label">Grande</span>
</button>

Diseno

HTML
<button class="btn btn-primary btn-block" type="button">
  <span class="label">Ancho completo</span>
</button>

Ejemplo: acciones de dialogo

Pie tipico: cerrar, confirmar y control destructivo alineados.

HTML
<button class="btn btn-ghost" type="button">
  <span class="label">Cancelar</span>
</button>

<button class="btn btn-primary" type="button">
  <span class="label">Guardar</span>
</button>

<button class="btn btn-danger" type="button">
  <span class="label">Eliminar</span>
</button>

Cargadores

El componente Loader es un pequeño spinner personalizable que se usa para mostrar estados de carga. Acepta las propiedades width, height y border (cadenas o números) y establece variables CSS coincidentes (--loader-width, --loader-height, --loader-border) para que el spinner del pseudoelemento se pueda estilizar de forma consistente. Coloca el loader dentro de un contenedor centrado o usa un padre con posición (por ejemplo position: relative) cuando muestres un overlay.

HTML
<div class="loader" role="status" aria-label="Loading" style="--loader-width: 3.2rem; --loader-height: 3.2rem; --loader-border: 4px solid var(--brand-700);"></div>

Franja de CTA

Una franja destacada de llamada a la acción para demos, descargas o contacto.

¿Listo para alinear a tu equipo de estudio?

Obtén una demo adaptada a tu protocolo y tus cronogramas.

Solicitar una demoDescargar el resumen
HTML
<div class="card cta">
  <div>
    <h3>¿Listo para alinear a tu equipo de estudio?</h3>
    <p>Obtén una demo adaptada a tu protocolo y tus cronogramas.</p>
  </div>
  <div class="row btn-row">
    <a class="btn btn-primary" href="mailto:hello@example.com"><span class="label">Solicitar una demo</span></a>
    <a class="btn btn-secondary" href="#"><span class="label">Descargar el resumen</span></a>
  </div>
</div>
Formularios y validación

Entradas avanzadas

Selectores especializados, subidas y campos compuestos—útiles en herramientas densas; detrás del núcleo al contar la historia del sistema.

ComboBox / Autocompletar

Selección simple y múltiple con chips. Flechas + Enter, o haz clic para elegir.

Selección simple

  • Proyectos
  • Equipos
  • Informes
  • Documentos
  • Facturación
  • Ajustes

Selección múltiple

  • Desarrollo front-end
  • Accesibilidad
  • Sistemas de diseno
  • TypeScript
  • Investigacion UX
  • Rendimiento
HTML
<div class="combo" data-combo>
  <label class="hint" for="workspace">Workspace</label>
  <input id="workspace" class="combo-field" type="text" role="combobox" aria-expanded="false" />
</div>

Subidor de archivos

Arrastra archivos aquí o busca. Muestra validacion basica y progreso simulado.

HTML
<div class="uploader">
  <input class="uploader-input" type="file" />
  <div class="card dropzone">
    <div class="dropzone-inner">Drop files here</div>
  </div>
</div>

Subidor de archivos (Imágenes)

Arrastra y suelta o busca. Muestra miniaturas en vivo con opciones de quitar y validaciones de tamaño.

Drop images here
or click to — up to 10 files, max 10 MB each
HTML
<div class="card dropzone">
  <div class="dropzone-inner">Drop an image</div>
  <input type="file" accept="image/*" />
</div>

Medidor / Puntuacion

Puntuacion lineal con umbrales + estilos nativos de <meter>. Arrastra para previsualizar valores.

72 • Fair
0–49: Poor • 50–74: Fair • 75–89: Good • 90–100: Excellent
HTML
<label for="score">Score</label>
<meter id="score" class="xmeter" min="0" max="100" low="50" high="75" optimum="100" value="72">72</meter>

Selector de rango de fechas

Selecciona las fechas de inicio y fin usando el calendario o los presets rapidos. Haz clic en un dia para establecer la fecha de inicio; luego haz clic en otro dia para establecer la fecha de fin (si eliges un dia anterior se intercambian inicio y fin). Usa los presets para rangos comunes y el boton Limpiar para restablecer.

Usa las flechas para moverte entre dias, Av Pag/Re Pag para moverte entre meses, Inicio/Fin para ir al inicio/fin de la semana, y Enter o Espacio para seleccionar la fecha enfocada.

October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
HTML
<div class="card drp" data-daterange>
  <div class="drp-inputs">
    <input type="text" aria-label="Start" />
    <span class="separator"></span>
    <input type="text" aria-label="End" />
  </div>
  <div class="drp-presets">
    <button class="chip" type="button">Last 7 days</button>
  </div>
</div>

Selector de fecha

Elige una fecha con “Hoy” y “Limpiar”.

October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
HTML
<label for="date">Date</label>
<input id="date" type="date" />

Entrada de fecha (Popover)

El calendario se abre al escribir o enfocar; ESC o fuera para cerrar.

Start date
HTML
<label for="date-popover">Date</label>
<input id="date-popover" type="text" placeholder="YYYY-MM-DD" />

Navegación y estructura

Orientación, paginación y atajos por paleta—pestañas y acordeón al final de la página.

Paginación

Paginador reutilizable con primero/anterior/números/siguiente/último, atajos de teclado accesibles y selector de tamaño.

Teclado: ← → (anterior/siguiente), Inicio/Fin (primero/último), Av Pag/Re Pag (saltar paginas). La demo usa un salto de 5 paginas.
53 items • Page 1 of 7
  • Registro #1
    Fila de ejemplo para la demo de paginación.
  • Registro #2
    Fila de ejemplo para la demo de paginación.
  • Registro #3
    Fila de ejemplo para la demo de paginación.
  • Registro #4
    Fila de ejemplo para la demo de paginación.
  • Registro #5
    Fila de ejemplo para la demo de paginación.
  • Registro #6
    Fila de ejemplo para la demo de paginación.
  • Registro #7
    Fila de ejemplo para la demo de paginación.
  • Registro #8
    Fila de ejemplo para la demo de paginación.
HTML
<div class="card pagination-card">
  <ul class="pagi-list">
    <li class="card">Row</li>
  </ul>
</div>

Paleta de comandos

Salta rapido a secciones del sistema de diseño (los mismos anclajes que el menu lateral). Presiona ⌘/Ctrl + K o haz clic en el boton para abrir la paleta. Escribe para filtrar, usa ↑/↓ para navegar, Enter para ejecutar y Esc para cerrar.

HTML
<div class="overlay" role="dialog" aria-modal="true">
  <div class="card modal-window size-md cmdk-panel">
    <header class="modal-header"><h3 class="modal-title">Search</h3></header>
    <div class="modal-body">
      <input type="search" aria-label="Command" />
    </div>
  </div>
</div>

Búsqueda con sugerencias

Campo de búsqueda anclado al encabezado con una tarjeta de sugerencias filtradas. Se ubica debajo del encabezado y sobre el contenido para que los enlaces del encabezado sigan clicables. Conecta cualquier disparador — normalmente un SearchToggle en tu encabezado — a su `ref` imperativo (o a searchSuggestBus para disparadores en árboles distintos). Haz clic en el botón siguiente y empieza a escribir — usa ↑/↓ para navegar, Enter para elegir y Esc o la × para cerrar.

HTML
<label for="site-search">Search</label>
<input id="site-search" type="search" />
<ul class="suggest-list" role="listbox">
  <li role="option">Buttons</li>
</ul>

Asistente de modal de varios pasos

Flujo guiado con validacion por paso. Reutiliza tu sistema de modales.

HTML
<div class="card modal-window size-md">
  <header class="modal-header"><h3 class="modal-title">Step 1 of 3</h3></header>
  <div class="modal-body"><p>Choose a starting point.</p></div>
  <footer class="modal-footer">
    <button class="btn btn-ghost" type="button">Back</button>
    <button class="btn btn-primary" type="button">Next</button>
  </footer>
</div>

Datos y feedback

Tablas, filtros y superficies de feedback—vacío, error y éxito—para que las UIs densas sigan siendo claras.

Notificaciones

Los toasts se usan para mostrar notificaciones breves que se cierran automaticamente.

Notificaciones

HTML
<div class="card toast toast-info">
  <div class="card-header">
    <b>Invitacion a sala</b>
    <button class="btn btn-close toast-close" type="button" aria-label="Close">
      <span class="label">×</span>
    </button>
  </div>
  <p class="toast-message">Permanece abierto hasta que te unas o lo cierres.</p>
  <div class="toast-action">
    <button class="btn btn-primary" type="button">
      <span class="label">Unirse a la sala</span>
    </button>
  </div>
</div>

Alertas en linea

Exito: Tu configuracion se ha guardado.
Info: Hay nueva guia de plantilla disponible.
Advertencia: Un sitio tiene tareas vencidas.

Tooltips y Popovers

Pistas breves (hover/foco) y popovers mas completos, no modales (clic/ESC/afuera).

Tooltips

Enlace con tooltipChip hover o foco

Popovers

Ejemplos de Popovers

HTML
<button class="btn btn-ghost tooltip-trigger" type="button">Hover</button>
<div class="tooltip tooltip-top is-show" role="tooltip">Helpful hint</div>

<button class="btn popover-trigger" type="button">Open</button>
<div class="popover popover-bottom">
  <div class="popover-header">Title</div>
  <div class="popover-body">More detail.</div>
</div>

Modales y Overlays

Modal centrado y panel lateral. Teclado: ESC para cerrar. El foco queda atrapado dentro.

HTML
<div class="overlay" role="dialog" aria-modal="true">
  <div class="overlay-backdrop"></div>
  <div class="card modal-window size-md" role="document">
    <header class="modal-header">
      <h3 class="modal-title">Programar una consulta</h3>
      <button class="btn btn-close" type="button" aria-label="Close"></button>
    </header>
    <div class="modal-body">
      <p>Cuentanos un poco sobre tu estudio.</p>
    </div>
    <footer class="modal-footer">
      <button class="btn btn-ghost" type="button"><span class="label">Cancelar</span></button>
      <button class="btn btn-primary" type="button"><span class="label">Enviar</span></button>
    </footer>
  </div>
</div>

Vacios, error y confirmacion

Reserva estas superficies para contexto recuperable—explica en breve y ofrece un siguiente paso claro, incluida la confirmacion positiva tras el exito.

Lista vacia

Ningun proyecto coincide con estos filtros.

Quita filtros o crea un proyecto para empezar.

Error

No se pudieron cargar los resultados.

Comprueba la conexion e intentalo de nuevo.

Exito

Cambios guardados.

Tu equipo ya puede ver la actualizacion.

HTML
<article class="card surface-1">
  <h4>Empty</h4>
  <p class="small">Nothing here yet.</p>
</article>

Patron: panel de datos

Filtros, densidad y datos tabulares se componen mas abajo—este bloque anticipa como encajan en una barra de herramientas.

Estado: ActivoRegion: Todas

Ver Tabla de datos y Filtros para implementaciones completas y accesibilidad.

HTML
<article class="card metric">
  <span class="metric-title">Open items</span>
  <div class="metric-value">24</div>
</article>

Tarjetas

Diseños de tarjetas modulares con soporte de encabezado, estilos de variantes y estados interactivos de hover/focus para agrupar el contenido de forma clara y mantener una jerarquía visual.

Hoja de ruta trimestral

Temas priorizados para el siguiente ciclo, con responsables y fechas objetivo.

Actualizado hace 2 h · Estrategia · 4 responsables

Con Encabezado

Esta tarjeta tiene un encabezado con un icono y texto.

Esta tarjeta no tiene encabezado. Solo contenido.

Tarjeta 0: estilo alternativo.

Tarjeta 1: estilo alternativo.

Tarjeta 2: estilo alternativo.

Tarjeta con estilo inverso.

HTML
<article class="card">
  <div class="card-header"><h3>Title</h3></div>
  <p>Body copy</p>
  <div class="row btn-row gap">
    <button class="btn btn-primary" type="button"><span class="label">View plan</span></button>
    <button class="btn btn-secondary" type="button"><span class="label">Share</span></button>
  </div>
</article>
<article class="card card-0">Card 0</article>
<article class="card card-1">Card 1</article>
<article class="card card-2">Card 2</article>
<article class="card card-inverse">Inverse</article>

Tabla de datos

Columnas ordenables, encabezado fijo y paginación en el cliente.

Sort by:
IDFaseVersiónEstadoTarea
1000UI DesignISprint Planning12
1001UI DevelopmentIIIn Review19
1002Accessibility FixesIIIDeployed26
1003Bugs & IssuesISprint Planning33
1004UI DesignIIIn Review40
1005UI DevelopmentIIIDeployed47
1006Accessibility FixesISprint Planning54
1007Bugs & IssuesIIIn Review61
Click headers to sort. Rows per page selectable below.
Page 1 / 4
HTML
<div class="table-container">
  <table>
    <thead>
      <tr><th class="th-sort">Name</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>Alpha</td><td>Open</td></tr>
    </tbody>
  </table>
</div>

Tarjetas de métricas

Tarjetas pequeñas de métricas para paneles y resmenes.

...…
—
...…
—
...…
—
HTML
<article class="card metric">
  <div class="metric-top">
    <span class="metric-title">Active</span>
    <span class="change up">+4%</span>
  </div>
  <div class="metric-value">128</div>
</article>

Ejemplo de línea de tiempo

Una línea de tiempo vertical usando las clases .timeline y .step para layouts secuenciales.

1
Paso 1

Inicia tu proyecto y configura lo básico.

2
Paso 2

Desarrolla funciones e itera rápidamente.

3
Paso 3

Prueba, implementa y monitorea tu aplicación.

HTML
<div class="timeline">
  <div class="step">
    <div class="dot">1</div>
    <div class="body">
      <div class="h3">Step</div>
      <p>What happened.</p>
    </div>
  </div>
</div>

Filtros

Alterna chips con conteo, “Borrar todo” y resultados en vivo.

0 selected

Result 1

Sample result

Result 2

Sample result

Result 3

Sample result

Result 4

Sample result

Result 5

Sample result

Result 6

Sample result

Result 7

Sample result

Result 8

Sample result
HTML
<div class="card filters-card">
  <div class="row filters-chips">
    <button class="chip-toggle is-on" type="button">Open <span class="count">12</span></button>
    <button class="chip-toggle" type="button">Closed</button>
    <button class="btn btn-ghost btn-sm" type="button">Clear all</button>
  </div>
</div>

Píldoras de lógica (Filtros seleccionados)

Chips de filtro removibles con lógica AND/OR y “borrar todo” rápido.

No filters selected
18 results

Resultado 1

Versión: II • Estado: Desplegado • Fase: Diseño de UI

Resultado 2

Versión: I • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 3

Versión: II • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 4

Versión: I • Estado: Desplegado • Fase: Desarrollo de UI

Resultado 5

Versión: II • Estado: Planificacion de sprints • Fase: Diseño de UI

Resultado 6

Versión: I • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 7

Versión: II • Estado: Desplegado • Fase: Desarrollo de UI

Resultado 8

Versión: I • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 9

Versión: II • Estado: Planificacion de sprints • Fase: Diseño de UI

Resultado 10

Versión: I • Estado: Desplegado • Fase: Desarrollo de UI

Resultado 11

Versión: II • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 12

Versión: I • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 13

Versión: II • Estado: Desplegado • Fase: Diseño de UI

Resultado 14

Versión: I • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 15

Versión: II • Estado: Planificacion de sprints • Fase: Desarrollo de UI

Resultado 16

Versión: I • Estado: Desplegado • Fase: Desarrollo de UI

Resultado 17

Versión: II • Estado: Planificacion de sprints • Fase: Diseño de UI

Resultado 18

Versión: I • Estado: Planificacion de sprints • Fase: Desarrollo de UI
Add:
HTML
<div class="logic-pill-row" role="list">
  <button class="lp-pill chip btn-sm" type="button">Status</button>
  <span class="lp-connector">AND</span>
  <button class="lp-pill chip btn-sm" type="button">Owner</button>
</div>

Principios del sistema

Pautas que definen cómo se aplica el sistema en las interfaces.

  • Una acción principal por región

    Las acciones primarias se usan con moderación para mantener claridad y foco.

  • Los colores semánticos están reservados para feedback

    Advertencia y error comunican estado del sistema, no jerarquía visual.

  • Los patrones núcleo van antes que las entradas avanzadas

    Las interacciones habituales tienen prioridad antes de añadir complejidad.

  • La coherencia la impulsan los tokens

    Los design tokens alinean componentes, temas y estados.

  • La accesibilidad es la base, no un añadido

    Los componentes se diseñan para contraste, foco y usabilidad.

Hecho para productos reales

Este sistema está pensado para escalar en entornos de producción, equilibrando rendimiento, accesibilidad y usabilidad.

Pestañas y acordeón

Patrones de disclosure al final para que el ejemplo de flujo siga siendo la narrativa principal.

Pestañas

Interfaz de pestañas accesible con roles ARIA, navegación de teclado (←/→, Inicio/Fin), gestión del foco y desplazamiento horizontal para el exceso. Solo se muestra un panel de pestaña a la vez, y todos los controles son compatibles con lectores de pantalla.

Overview

High-level snapshot of the study—sites, milestones, and current risks.

Pestañas con estilo de píldoras.

Overview

High-level snapshot of the study—sites, milestones, and current risks.

Pestañas redondeadas con la base plana sobre el panel.

Overview

High-level snapshot of the study—sites, milestones, and current risks.
HTML
<div class="tabs" data-tabs>
  <div class="tabs-desktop">
    <div class="tablist scrollable" role="tablist">
      <button class="tab is-active" type="button" role="tab" aria-selected="true">Overview</button>
      <button class="tab" type="button" role="tab">Details</button>
    </div>
    <div class="card tab-panels">
      <div class="panel" role="tabpanel">Panel content</div>
    </div>
  </div>
</div>

<div class="tabs tabs-pills" data-tabs></div>
<div class="tabs tabs-rounded" data-tabs></div>

Acordeón

Un panel a la vez (type="accordion", el valor predeterminado). Abrir otro encabezado cierra el anterior. Haz clic en el encabezado abierto para cerrar todos.

En el inicio de sesión elige «Olvidé mi contraseña» y sigue el enlace del correo. Los enlaces caducan pronto por seguridad.

Plegable

Cualquier número de paneles abiertos (type="collapsible", o el alias Collapsible). Cada encabezado alterna solo su propio panel.

En el inicio de sesión elige «Olvidé mi contraseña» y sigue el enlace del correo. Los enlaces caducan pronto por seguridad.

Abre Facturación → Facturas y elige un periodo. Los PDF incluyen tu ID de cuenta e impuestos cuando aplica.

HTML
<div class="accordion" id="acc-demo">
  <div class="card acc-item is-open">
    <h3 class="acc-header">
      <button class="acc-trigger" type="button" aria-expanded="true">
        Title
        <span class="acc-indicator" aria-hidden="true"></span>
      </button>
    </h3>
    <div class="acc-panel">
      <div class="acc-panel-inner">Panel content</div>
    </div>
  </div>
</div>

<div class="accordion collapsible">
  <div class="card acc-item is-open">
    <h3 class="acc-header">
      <button class="acc-trigger" type="button" aria-expanded="true">Title</button>
    </h3>
    <div class="acc-panel"><div class="acc-panel-inner">Panel content</div></div>
  </div>
</div>