'/%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
BentoGrid
Un diseño bento: tarjetas de distintos tamaños en una grilla pareja, con spans por breakpoint, un visual opcional y enlaces de tarjeta completa. Combina con el preset Graphite.
import { BentoGrid, BentoCard } from '@alea/ui';
Ejemplos
Grilla bento
Tarjetas de distintos tamaños en una grilla pareja: spans por breakpoint, una columna en teléfonos.
Analytics that read well
Charts with a table view, keyboard focus on every point and live tooltips.
Your brand
Accent, radius and density.
Accessible
Keyboard and screen readers, built in.
Motion built in
Fourteen patterns and a motion prop on every overlay.
Fast
CSS first; JavaScript only where it helps.
Bento Graphite
El preset monocromo en un contenedor: superficies casi negras, acento blanco, títulos sans.
Ship faster, quietly.
99.99% uptime
Global by default
Every region, one deploy.
Secure
Keys never leave your account.
Edge compute
Runs close to people.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Component
--alea-bento-row…--alea-cols-base…--alea-cols-lg…--alea-cols-md…--alea-cols-sm…--alea-cols-xl…--alea-gap-base…--alea-gap-lg…--alea-gap-md…--alea-gap-sm…--alea-gap-xl…
Props
BentoGrid props
Un diseño bento: tarjetas de distintos tamaños en una grilla pareja que llena los huecos. En teléfonos es una columna.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | - | |
columns | Responsive<number> | - | Columnas por breakpoint. Por defecto { base: 1, sm: 2, lg: 4 }. |
gap | Responsive<Space> | - | Espacio entre tarjetas. Por defecto 4 (16 px). |
rowHeight | number | - | Altura de una fila en px; las tarjetas ocupan filas con rowSpan. Por defecto 200. |
BentoCard props
Una celda de un BentoGrid: un visual opcional arriba, luego el título y el texto.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'article' | |
colSpan | Responsive<number> | - | Columnas que ocupa, por breakpoint: { base: 1, lg: 2 }. |
description | ReactNode | - | |
eyebrow | ReactNode | - | Una pequeña etiqueta sobre el título. |
headingLevel | 2 | 3 | 4 | 3 | Nivel de título del título. Por defecto 3. |
href | string | - | Hace que toda la tarjeta sea un enlace (una parada de tab, con el título como nombre). |
icon | ReactNode | - | Un ícono junto al título. |
padding | "none" | "tight" | "normal" | "loose" | 'normal' | Espacio interior, como en Card. Por defecto normal. |
rowSpan | Responsive<number> | - | Filas que ocupa, por breakpoint. |
title | ReactNode | - | |
variant | "default" | "deep" | "outline" | "glass" | 'default' | default: la superficie; deep: más oscura; glass: esmerilada; outline: solo borde. |
visual | ReactNode | - | Una imagen, gráfico o componente en vivo que llena la tarjeta sobre el texto. |
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.
BentoGrid
- 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-bento.alea-r-gap.alea-r-cols.alea-gap.alea-cols
BentoCard
- Variantes
paddingnonetightnormalloosevariantdefaultdeepoutlineglass- Motion
- liftpress
- 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-card.alea-bento-card.alea-r-span.alea-r-rspan.alea-span.alea-rspan.alea-bento-visual.alea-bento-text.alea-bento-eyebrow.alea-bento-title.alea-bento-icon.alea-card-link- Atributos data
data-variant=glass
Accesibilidad
- Cada tarjeta es un article con un título (nivel 3 por defecto; cambia headingLevel según la página).
- Con href, el título es el único enlace y toda la tarjeta es clicable, así hay una sola parada de tab con un nombre claro.
- El orden en el marcado es el orden de lectura; el empaquetado denso puede mover tarjetas visualmente, así que mantén juntas en el código las tarjetas relacionadas.
Qué hacer y qué evitar
Hacer
- Dale la celda más grande a lo más importante.
- Mantén el texto corto: un título y una línea.
- Usa visuales que muestren la función (un gráfico, un componente), no decoración.
Evitar
- No pongas más de 6 a 8 tarjetas en una grilla.
- No dependas del diseño para explicar el orden; el texto debe sostenerse solo en teléfonos.
En Figma
Plantillas bento en el tema Graphite, construidas con Card y auto layout.