'/%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}
Datos
MediaCard y CalloutCard
Tarjetas que empiezan con una imagen o ilustración: un título, texto y hasta dos acciones, que se pueden cerrar. MediaCard pone la imagen al lado del texto y la apila cuando la tarjeta es angosta, o arriba; CalloutCard sugiere un próximo paso.
import { MediaCard, CalloutCard } from '@alea/ui';
Ejemplos
MediaCard y CalloutCard
Multimedia junto al texto (se apila cuando la tarjeta es angosta) o arriba; un callout con una ilustración. Ambas se pueden cerrar.
Build a dashboard in 10 minutes
New: Sheet
Invite your team
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-surface…--alea-text-muted…
Space
--alea-space-2…--alea-space-5…
Radius
--alea-radius-lg…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-md…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…
Props
MediaCard props
Una tarjeta que empieza con multimedia: una imagen o video junto a (o sobre) un título, texto y acciones. Para tutoriales, promociones, onboarding.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
mediaobligatoria | ReactNode | - | Una imagen, video o ilustración. |
titleobligatoria | ReactNode | - | El título. |
children | ReactNode | - | El texto. |
className | string | - | Clases extra. |
headingLevel | 2 | 3 | 4 | 3 | Nivel de título del título. Por defecto 3. |
layout | "horizontal" | "vertical" | 'horizontal' | horizontal (multimedia al costado, por defecto; se apila en tarjetas angostas) o vertical (multimedia arriba). |
onDismiss | (() => void) | - | Agrega un botón de cerrar que llama a esto. |
primaryAction | ReactNode | - | La acción principal. |
secondaryAction | ReactNode | - | Una segunda acción. |
CalloutCard props
Una tarjeta que sugiere un siguiente paso: un título, una oración, una acción y una ilustración. Se puede cerrar.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
titleobligatoria | ReactNode | - | El título. |
children | ReactNode | - | El texto. |
className | string | - | Clases extra. |
headingLevel | 2 | 3 | 4 | 3 | Nivel de título del título. Por defecto 3. |
illustration | ReactNode | - | Una ilustración a la derecha (oculta en tarjetas angostas). |
onDismiss | (() => void) | - | Agrega un botón de cerrar que llama a esto. |
primaryAction | ReactNode | - | La acción principal. |
secondaryAction | ReactNode | - | Una segunda acción. |
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.
MediaCard
- Variantes
layouthorizontalvertical- 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-media-card.alea-card-inner.alea-media-card-media.alea-media-card-body.alea-media-card-title.alea-media-card-text.alea-media-card-actions.alea-card-dismiss- Atributos data
data-layout=verticaldata-layout=horizontal
CalloutCard
- 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-callout-card.alea-card-inner.alea-callout-card-body.alea-media-card-title.alea-media-card-text.alea-media-card-actions.alea-callout-card-art.alea-card-dismiss- Atributos data
data-layout=verticaldata-layout=horizontal
Accesibilidad
- El título es un encabezado (nivel 3 por defecto).
- Las imágenes son decorativas salvo que les des texto alternativo; el botón de cerrar se llama Cerrar.
Qué hacer y qué evitar
Hacer
- Una acción clara por tarjeta.
Evitar
- No apiles muchos avisos que se cierran en una página.