'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Maquetación
FocusLayout
Una sola tarea en el centro de la pantalla, sin nada alrededor: iniciar sesión, un código, un paso de onboarding, un resultado.
import { FocusLayout } from '@alea/ui';
Ejemplos
Iniciar sesión
Una tarjeta en el centro con una sola tarea. Como página es el landmark main; dentro de otra página usa as="div".
Un resultado, sin tarjeta
card={false} para un mensaje que se sostiene solo en la página; size="md" le da más espacio.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Space
--alea-space-4…--alea-space-6…
Props
FocusLayout props
Una sola tarea en el centro de la pantalla, nada más alrededor: iniciar sesión, verificar, onboarding, un resultado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | La tarea única: iniciar sesión, un código, un paso de configuración. |
as | "div" | "main" | - | El elemento: main (por defecto, cuando es la página) o div. |
card | boolean | true | Envuelve el contenido en una tarjeta. Por defecto true. |
className | string | - | Clases extra para el elemento raíz. |
size | "sm" | "md" | 'sm' | Ancho de la tarjeta: sm (420 px, un formulario) o md (640 px, un paso con opciones). Por defecto sm. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
asdivmainsizesmmd- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-focus-layout.alea-focus-layout-card- Atributos data
data-size=md
Accesibilidad
- Es el landmark main de la página (as="div" cuando está dentro de otro).
- Empiézalo con un título de nivel 1 que nombre la tarea.
Qué hacer y qué evitar
Hacer
- Mantén una sola acción principal.
- Usa size="md" para un paso con opciones.
Evitar
- No pongas navegación alrededor: el punto es la tarea única.
En Figma
Focus layout con Size (sm, md) y Card (on, off).