'/%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
Card
El panel de Alea: una superficie redondeada con un anillo suave. Versiones deep, outline e interactiva.
import { Card, CardTitle, CardDescription, CardLink } from '@alea/ui';
Ejemplos
Variantes
Por defecto con el anillo suave, deep para áreas hundidas, outline para agrupar sin llamar la atención.
Default
The Alea panel.
Deep
An inset area.
Outline
Just a border.
Tarjeta interactiva
Se eleva y brilla con hover. Un CardLink hace clicable toda la tarjeta con una sola parada de tab.
Padding
tight, normal (por defecto) y loose.
Tight
Normal
Loose
Encabezado, multimedia, pie, lado a lado y cargando
CardHeader, CardMedia y CardFooter componen una tarjeta; orientation="horizontal" pone la multimedia a la izquierda; isLoading muestra un esqueleto.
Lisbon in spring
Ana Rivas · 4 min read
Tiles, light and a lot of hills. Notes from a week of walking.
Pro plan
$12 a month
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Interactive
interactive - Orientation
orientation - Padding
padding - Variant
variant
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border-strong…--alea-focus…--alea-surface…--alea-surface-deep…--alea-text…
Space
--alea-space-2…--alea-space-3…--alea-space-5…
Radius
--alea-radius-lg…--alea-radius-md…--alea-radius-xl…
Shadow
--alea-shadow-card…--alea-shadow-glow…--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-duration-slow…--alea-motion-ease-out…
Component
--alea-card-pad…--alea-glass-blur…--alea-glass-rim…--alea-glass-saturate…--alea-glass-tint…
Props
Card props
El panel de Alea: superficie redondeada con el anillo interior suave. Partes de encabezado, multimedia y pie, lado a lado o apiladas, y un estado de carga.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | El elemento a usar. Por defecto div; usa article o section cuando corresponda. |
interactive | boolean | - | Se eleva y brilla con hover; úsalo cuando toda la tarjeta es un enlace (pon el enlace adentro con CardLink). |
isLoading | boolean | - | Muestra el esqueleto de una tarjeta mientras carga su contenido. |
orientation | "horizontal" | "vertical" | - | vertical (por defecto) u horizontal: CardMedia a la izquierda, el resto a la derecha (se apila en tarjetas angostas). |
padding | "none" | "tight" | "normal" | "loose" | 'normal' | tight usa menos padding y un radio más pequeño. |
variant | "default" | "deep" | "outline" | "glass" | 'default' | default: la superficie con el anillo suave; deep: un panel hundido más oscuro; outline: solo borde; glass: vidrio esmerilado sobre lo que hay detrás. |
CardTitle props
Título de tarjeta en Crimson Pro.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'h3' | El elemento del título. Por defecto h3; sigue el esquema de la página. |
CardDescription props
Texto del cuerpo de la tarjeta, apagado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Define un texto que etiqueta al elemento actual. @see aria-labelledby. (heredada) |
autoFocus | boolean | - | (heredada) |
className | string | - | (heredada) |
defaultValue | string | number | readonly string[] | - | (heredada) |
id | string | - | (heredada) |
inputMode | "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | - | Sugiere el tipo de datos que se pueden ingresar al editar el elemento o su contenido @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (heredada) |
onChange | ChangeEventHandler<HTMLElement, Element> | - | (heredada) |
onSubmit | SubmitEventHandler<HTMLElement> | - | (heredada) |
role | AriaRole | - | (heredada) |
style | CSSProperties | - | (heredada) |
CardLink props
Hace clicable toda la tarjeta con un solo enlace real (mantiene una parada de tab y el texto del enlace como nombre).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Define un texto que etiqueta al elemento actual. @see aria-labelledby. (heredada) |
autoFocus | boolean | - | (heredada) |
className | string | - | (heredada) |
defaultValue | string | number | readonly string[] | - | (heredada) |
href | string | - | (heredada) |
id | string | - | (heredada) |
inputMode | "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | - | Sugiere el tipo de datos que se pueden ingresar al editar el elemento o su contenido @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (heredada) |
onChange | ChangeEventHandler<HTMLElement, Element> | - | (heredada) |
onSubmit | SubmitEventHandler<HTMLElement> | - | (heredada) |
role | AriaRole | - | (heredada) |
style | CSSProperties | - | (heredada) |
target | HTMLAttributeAnchorTarget | - | (heredada) |
type | string | - | (heredada) |
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.
Variant × padding
Oscuro
padding="tight" | padding="normal" | padding="loose" | |
|---|---|---|---|
variant="default" | Card | Card | Card |
variant="deep" | Card | Card | Card |
variant="outline" | Card | Card | Card |
variant="glass" | Card | Card | Card |
Claro
padding="tight" | padding="normal" | padding="loose" | |
|---|---|---|---|
variant="default" | Card | Card | Card |
variant="deep" | Card | Card | Card |
variant="outline" | Card | Card | Card |
variant="glass" | Card | Card | Card |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Card
- Variantes
orientationhorizontalverticalpaddingnonetightnormalloosevariantdefaultdeepoutlineglass- Estados
- Hover (CSS)Keyboard focus
- 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-loading.alea-skeleton.alea-card- Atributos data
data-variant=deepdata-variant=outlinedata-padding=nonedata-padding=tightdata-padding=normaldata-padding=loosedata-interactivedata-orientation=horizontaldata-variant=glass
CardTitle
- 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-title
CardDescription
- 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-description
CardLink
- Estados
- Keyboard focus
- 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-link
Accesibilidad
- Una tarjeta interactiva se vuelve clicable con un enlace real adentro (CardLink), así hay una sola parada de Tab y un nombre claro.
Qué hacer y qué evitar
Hacer
- Agrupa un tema por tarjeta.
- Usa CardLink para tarjetas que llevan a algún lugar.
Evitar
- No anides tarjetas dentro de tarjetas; usa deep para un área interior.
- No pongas varios enlaces en una tarjeta interactiva.
En Figma
Card con Variant (Default, Deep, Outline) y Padding (Tight, Normal, Loose).