BulletList

A bulleted list with the discs, indent and gap built in.

Overview

Items that read as a list of points: what changed, what to bring.

Items

Do
  • Moved the nightly build from cron to a queue.
  • Cut the cold start from nine seconds to two.
  • Wrote the runbook the team still uses.
import { Body, BulletList } from "@hackcove/ui";

<BulletList>
  <Body as="li">Moved the nightly build from cron to a queue.</Body>
  <Body as="li">Cut the cold start from nine seconds to two.</Body>
  <Body as="li">Wrote the runbook the team still uses.</Body>
</BulletList>
A list is a BulletList of Body as="li": the list owns the discs, the indent and the gap.
Don't

- Moved the nightly build from cron to a queue.

- Cut the cold start from nine seconds to two.

- Wrote the runbook the team still uses.

import { Body, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Body as="p">- Moved the nightly build from cron to a queue.</Body>
  <Body as="p">- Cut the cold start from nine seconds to two.</Body>
  <Body as="p">- Wrote the runbook the team still uses.</Body>
</Stack>
Hyphens typed into paragraphs are not a list: no discs, no indent and no list for a screen reader.

Usage

  • Give a BulletList <li> children, set in Body as="li".
  • Never type a hyphen into a paragraph to make a list.
  • Items that have a label and a value are a KeyValueList; a list of records is a Table or a ListRow.

Accessibility

  • A BulletList renders a <ul>, so a screen reader announces a list and the number of items.
  • id, aria-* and data-* go on the list.

API

BulletList

A bulleted <ul>: discs, indented, a small gap between items. Its children are <li>s (e.g. Body as="li").