List
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
Renders ordered or unordered lists with configurable marker styles.
Import
import { List } from "~lib/typography";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
items | string[] | Yes | N/A | List items to render |
ordered | boolean | No | false | Use <ol> vs <ul> |
marker | "disc" | "circle" | "square" | "decimal" | "none" | No | "disc" (ul) / "decimal" (ol) | Marker style |
size | "xs" | "sm" | "base" | No | "base" | Text size |
truncate | boolean | No | false | Truncate overflow |
fit | "content" | "fill" | number | No | "content" | Container height behavior |
Examples
Unordered
Ordered
Square Markers
No Markers
Sizes
Set size to match the paragraph above the list, on the same steps as Paragraph. The markers'
indent and the gap between items shrink with the text, so a smaller list fits a short or narrow
box.
<List
size="sm"
items={["2 cups flour", "1 tsp baking soda", "A pinch of salt"]}
/>
Fit Modes
Fit Content (default)
Container sizes to its text content. Use when the text should take only as much space as it needs.
Fit Fill
Container fills available flex space. Use inside flex layouts when the text should expand to fill remaining space. Text that runs past that space is cut at the container's edge instead of drawn over the block below, which keeps a widget's saved render tidy when it is laid out in a smaller box than the one it was measured in.
Fixed Height
Container has a hard-coded pixel height. Use when you need a precise, known container size.