'/%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}
Tipografía
Blockquote y List
Una cita con su autor, y listas con estilo con viñetas, números o checks.
import { Blockquote, List } from '@alea/ui';
Ejemplos
Cita y listas
Un blockquote con su autor, y tres marcadores de lista.
Design systems are for people, not for screenshots.
- Tokens for every color
- Dark and light
- Tested with axe
- Install
- Add the stylesheet
- Wrap the app in ThemeProvider
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-gradient-accent-linear…--alea-surface…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-4…--alea-space-5…
Radius
--alea-radius-md…
Type
--alea-font-family-display…--alea-font-size-sm…--alea-font-size-xl…--alea-font-weight-light…
Props
Blockquote props
Una cita con su autor.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
cite | ReactNode | - | Quién lo dijo. |
className | string | - | |
source | string | - | La URL de la fuente (define cite en la cita). |
List props
Una lista con estilo con viñetas, números o checks.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | ReactNode[] | - | Los elementos. |
className | string | - | |
marker | "number" | "none" | "bullet" | "check" | 'bullet' | bullet (por defecto), number, check o none. |
spacing | "sm" | "md" | 'md' | Espacio entre elementos: sm o md (por defecto). |
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.
Blockquote
- 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-blockquote
List
- Variantes
markernumbernonebulletcheckspacingsmmd- 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-text-list.alea-text-list-check- Atributos data
data-spacing=mddata-spacing=smdata-marker=checkdata-marker=none
Accesibilidad
- Elementos blockquote, ul y ol reales; los checks son decorativos y la lista se sigue leyendo como lista.
Qué hacer y qué evitar
Hacer
- Usa el marcador de check para listas de funciones.
Evitar
- No uses un blockquote solo para sangrar.