'/%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}
Typography
Blockquote and List
A quotation with its author, and styled lists with bullets, numbers or checks.
Ant Design: Typography
import { Blockquote, List } from '@alea/ui';
Examples
Quote and lists
A blockquote with its author, and three list markers.
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
Props
Blockquote props
A quotation with its author (Mantine Blockquote).
| Prop | Type | Default | Description |
|---|---|---|---|
cite | ReactNode | - | Who said it. |
className | string | - | |
source | string | - | The source URL (sets cite on the quote). |
List props
A styled list with bullets, numbers or checks (Mantine List, Chakra List).
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | ReactNode[] | - | The items. |
className | string | - | |
marker | "number" | "none" | "bullet" | "check" | 'bullet' | bullet (default), number, check or none. |
spacing | "sm" | "md" | 'md' | Space between items: sm or md (default). |
Accessibility
- Real blockquote, ul and ol elements; check marks are decorative and the list still reads as a list.
Do and don't
Do
- Use the check marker for feature lists.
Don't
- Don't use a blockquote just for indentation.