Flexible list primitives for every use case. Apply wf-list to any ul , ol , or div and compose with type, density, separator, and interaction modifiers.
Use on a div with wf-list-item children, or on a native ul / ol with li children.
A list of groups related content
<div class="wf-list">
<div class="wf-list-item">First item</div>
<div class="wf-list-item">Second item</div>
<div class="wf-list-item">Third item</div>
</div>A native ordered numerically or bulleted list
<ul class="wf-list">
<li>Apples</li>
<li>Oranges</li>
</ul>
<ol class="wf-list">
<li>Install</li>
<li>Import</li>
</ol>Add a leading icon with wf-list-icon and rich content with wf-list-content , wf-list-header , and wf-list-description .
A list item can contain an icon.
<div class="wf-list">
<div class="wf-list-item wf-items-center">
<i class="icon check circle wf-list-icon" aria-hidden="true"></i>
Payment processed
</div>
</div>A list item can contain a header and description.
<div class="wf-list">
<div class="wf-list-item">
<i class="icon user wf-list-icon" aria-hidden="true"></i>
<div class="wf-list-content">
<span class="wf-list-header">Alex Johnson</span>
<span class="wf-list-description">alex@example.com</span>
</div>
</div>
</div>Custom bullet, numbered, link, selection, animated, and todo list types.
A list can mark items with a bullet.
<!-- CSS bullet -->
<div class="wf-list wf-list-bulleted">
<div class="wf-list-item">Red</div>
</div>
<!-- CSS counter -->
<div class="wf-list wf-list-ordered">
<div class="wf-list-item">First</div>
</div>A list can be specially formatted for navigation links.
<div class="wf-list wf-list-link">
<a class="wf-list-item wf-active" href="#">Dashboard</a>
<a class="wf-list-item" href="#">Analytics</a>
<a class="wf-list-item" href="#">Settings</a>
</div>Hover and active highlight. Add wf-active via JavaScript on click.
<div class="wf-list wf-list-selection">
<div class="wf-list-item">…</div>
<!-- Active item -->
<div class="wf-list-item wf-active">…</div>
</div>A list can be animated to set the current item apart from the list.
<!-- Animated slide -->
<div class="wf-list wf-list-animated">
<div class="wf-list-item">…</div>
</div>
<!-- Todo — checked items auto strikethrough -->
<ul class="wf-list wf-list-todo">
<li><input type="checkbox" checked> Done task</li>
<li><input type="checkbox"> Pending task</li>
</ul>Add hairlines between items with wf-list-divided , or full cell borders with wf-list-celled .
A list can show divisions between content.
<div class="wf-list wf-list-divided">
<div class="wf-list-item">…</div>
<div class="wf-list-item">…</div>
</div>A list can divide its items into cells.
<div class="wf-list wf-list-celled">
<div class="wf-list-item">…</div>
<div class="wf-list-item">…</div>
</div>Add wf-list-horizontal for a flex row. Combine with wf-list-bulleted or wf-list-divided for separators between inline items.
<!-- Horizontal with bullet separators -->
<div class="wf-list wf-list-horizontal wf-list-bulleted">
<div class="wf-list-item">Home</div>
<div class="wf-list-item">Products</div>
</div>
<!-- Horizontal with divider separators -->
<div class="wf-list wf-list-horizontal wf-list-divided">
<div class="wf-list-item">June 2026</div>
<div class="wf-list-item">Alex J.</div>
</div>Control vertical padding via density modifiers. The spacing scale utilities wf-list-space-* map to the global space tokens for fine-grained control.
Compact — 0.25 rem
Default — 0.5 rem
Relaxed — 0.75 rem
Very relaxed — 1.125 rem
<div class="wf-list wf-list-compact">…</div> <!-- 0.25 rem -->
<div class="wf-list">…</div> <!-- 0.5 rem (default) -->
<div class="wf-list wf-list-relaxed">…</div> <!-- 0.75 rem -->
<div class="wf-list wf-list-very-relaxed">…</div> <!-- 1.125 rem -->wf-table-list creates a two-column max-content / 1fr grid — ideal for label / value pairs.
<div class="wf-table-list">
<label>Full name</label>
<span>Alex Johnson</span>
<label>Email</label>
<span>alex@example.com</span>
<label>Status</label>
<span><span class="wd-badge wd-badge-positive">Active</span></span>
</div>Four size modifiers scale both font and icon sizes together.
xs — 0.75 rem
sm — 0.875 rem
Default — 1rem
lg — 1.125 rem
xl — 1.25 rem
<div class="wf-list wf-list-xs">…</div> <!-- 0.75 rem -->
<div class="wf-list wf-list-sm">…</div> <!-- 0.875 rem -->
<div class="wf-list">…</div> <!-- 1 rem (default) -->
<div class="wf-list wf-list-lg">…</div> <!-- 1.125 rem -->
<div class="wf-list wf-list-xl">…</div> <!-- 1.25 rem -->| Property | Default | Description |
|---|---|---|
| --wf-list-icon-color | var(--wf-text-muted) | Public custom property for icon color. Override on any parent element to tint all icons. |
| --_list-pad-v | .5rem | Vertical padding on each item. Driven by density modifiers. |
| --_list-pad-h | 0 | Horizontal padding on each item. |
| --_list-gap | .625rem | Gap between the icon and the content within an item. |
| --_list-hover-bg | var(--wf-surface-subtle) | Hover background for wf-list-selection and wf-list-animated . |
| --_list-active-bg | rgba(20,99,255,.07) | Active item background for wf-list-selection . |
| --_list-border | var(--wf-border) | Color of divided and celled borders. |
| --_list-icon-size | 1rem | Icon size. Driven by size modifiers ( wf-list-xs → wf-list-xl ). |
All modifier classes available on .wf-list
| Class | Type | Description |
|---|---|---|
| wf-list | Base | Required. Resets margins, padding, and list-style. Works on div , ul , and ol . |
| wf-list-item | Structure | Flex row item. Use on direct children of a div.wf-list . For ul / ol use native li elements. |
| wf-list-content | Structure | Flex-grow content block inside an item. Prevents the text column from shrinking. |
| wf-list-header / wf-list-description | Structure | Bold heading and muted description inside wf-list-content . |
| wf-list-icon | Structure | Flex-shrink icon aligned with the item. Color set by --wf-list-icon-color . |
| wf-list-bulleted / wf-list-ordered | Type | CSS-generated bullet (•) or auto-incremented counter via ::before . Applied to div.wf-list . |
| wf-list-link | Type | Navigation list — items get a hover color. Add wf-active to mark the current item. |
| wf-list-selection | Type | Clickable selection list with hover and active backgrounds. Add wf-active to highlight the selected item. |
| wf-list-animated | Type | Items slide to the right on hover with a background tint. |
| wf-list-todo | Type | Checkbox list — checked items get a strikethrough and muted color automatically via :has() . |
| wf-list-horizontal | Layout | Renders items in a flex row. Combine with wf-list-bulleted or wf-list-divided for separators. |
| wf-list-divided / wf-list-celled | Separator | divided — hairline between items. celled — full top/bottom border around the list. Both work on vertical and horizontal lists. |
| wf-list-compact / wf-list-relaxed / wf-list-very-relaxed | Density | Vertical padding steps: 0.25 rem / 0.75 rem / 1.125 rem. Default is 0.5 rem. |
| wf-list-xs / -sm / -lg / -xl | Size | Font and icon size variants: 0.75 / 0.875 / 1.125 / 1.25 rem. |
| wf-table-list | Utility | Two-column grid for label / value pairs. Place on a container; direct children alternate as label and value. |