list

Styled unordered or ordered list with consistent spacing and colour tokens. Use this instead of raw <ul> / <ol>. Items are HTML strings — other components can be passed as items.

Unordered

Streaming SSR on every page
Security headers by default
Zero client-side dependencies
Lighthouse 100 out of the box

list({
  items: [
    'Streaming SSR on every page',
    'Security headers by default',
    'Zero client-side dependencies',
    'Lighthouse 100 out of the box',
  ],
})

Ordered

Create a new Pulse project
Add your pages to src/pages/
Run pulse dev to start the server
Deploy when ready

list({
  ordered: true,
  items: [
    'Create a new Pulse project',
    'Add your pages to src/pages/',
    'Run pulse dev to start the server',
    'Deploy when ready',
  ],
})

Gap

Control vertical spacing between items with the gap prop.

Design
Build
Ship

sm (default)

Design
Build
Ship

Design
Build
Ship

list({ gap: 'xs', items: [...] })
list({ gap: 'sm', items: [...] })  // default
list({ gap: 'md', items: [...] })

Items with markup

Items are HTML strings — pass any markup including other components. Always escape user data before including it in item strings.

spec.state — initial client state, deep-cloned on mount
spec.mutations — synchronous state updates
spec.actions — async operations with lifecycle hooks
spec.server — server-side data fetchers

list({
  items: [
    '<strong>spec.state</strong> — initial client state',
    '<strong>spec.mutations</strong> — synchronous state updates',
    '<strong>spec.actions</strong> — async operations with lifecycle hooks',
    '<strong>spec.server</strong> — server-side data fetchers',
  ],
})

Prop	Type	Default
`items`	string[]	—	Array of HTML strings for each list item — escape user data before passing
`ordered`	boolean	`false`	`false` renders `<ul>`, `true` renders `<ol>`
`gap`	`xs \| sm \| md`	`sm`	Vertical spacing between items
`class`	string	—	Extra classes on the list element