Lists Reference ↓

Variants

Unordered - ui-list

  • Design tokens & variables
  • Responsive grid system
    • 12-column layout
    • Auto-fit
  • Dark mode ready
  • WCAG AA accessible

Ordered - ui-list-ordered

  1. Install the CSS & JS
  2. Override design tokens
    1. Set color palette
    2. Set border-radius
  3. Add components to HTML
  4. Ship to production

Unstyled - ui-list-unstyled

Sizes

@xs

  • Extra small
  • Dense sidebar
  • Compact menus

@s

  • Small size
  • Secondary copy
  • Sidebar nav

m

  • Default body
  • Standard list
  • Content text

@l

  • Large size
  • Feature list
  • Marketing copy

@xl

  • Extra large
  • Hero section

Reference

Base

ClassValues / Description
.ui-listBase unordered list with spacing and marker styles
.ui-list-orderedApply to <ol> for ordered (numbered) list style
.ui-list-unstyledRemoves markers and default list padding

Modifiers

ClassValues / Description
.ui-list@*Size modifier — xs, s, m, l, xl

Options

ClassValues / Description