Skip to content

FeatureList

Feature points (icon, title, a sentence or two) between hairlines, for a section that already has one strong visual.

DataServer-rendered

Examples

Two points and a planned one

  • One server name, every build

    Your agent always calls the same tool names.

  • Switch in one command

    The next call goes to the new build.

  • Replay a call

    Coming

    Send a recorded call to another build.

Example
<FeatureList
  min="240px"
  items={[
    { icon: 'cable', title: 'One server name, every build', body: '…' },
    { icon: 'route', title: 'Replay a call', body: '…', badge: <Badge tone="info">Coming</Badge> },
  ]}
/>

Usage

Usage
import { FeatureList } from '@switchboard/ui'

<FeatureList items={[{ icon, title, body, badge? }]} min?="240px" level?={3} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

FeatureList

FeatureList props
PropTypeDefaultDescription
items*{ icon: IconName; title: string; body: RemixNode; badge?: RemixNode }[]–One list item each.
minstring"240px"Minimum column width before the list wraps to fewer columns.
level3 | 43Heading level of each title.

Also accepts every <ul> attribute.

Accessibility

  • A real <ul>; each title is a heading (h3 by default) so the points are navigable.
  • Icons are aria-hidden.

Guidance

Do

  • Mark planned items with a "Coming" Badge.

Don’t

  • Number the items unless they are a sequence (use StepList).
  • Stack it next to a wall of Cards.