List
List renders ordered or unordered lists with configurable marker style, spacing, and an unstyled option.
Basic Usage
- First item
- Second item
- Third item
import { List } from "@paramanu/typography-react"
export default function App() {return ( <List> <li>First item</li> <li>Second item</li> <li>Third item</li> </List>)}<ul class="pm-list pm-list--unordered pm-list--spacing-md"><li>First item</li><li>Second item</li><li>Third item</li></ul>Accessibility
Renders semantic <ul> or <ol> elements. Screen readers announce list items and count automatically.
React Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "ordered" | "unordered" | "unordered" | List type |
styleType | "disc" | "circle" | "square" | "decimal" | ... | — | Marker style |
spacing | "sm" | "md" | "lg" | "md" | Item spacing |
unstyled | boolean | false | Remove markers |
CSS Classes
| Class | Purpose |
|---|---|
pm-list | Base |
pm-list--ordered | Ordered list |
pm-list--unordered | Unordered list |
pm-list--spacing-{s} | Spacing |
pm-list--style-{t} | Marker style |
pm-list--unstyled | Remove markers |