Skip to content
Darkside Demo

A list, written one item per line. The marker is a choice rather than a class to write, and a numbered list renders as an ordered list so it reads correctly to a screen reader as well as on screen.

Divided

  • A line between each item
  • None under the last one
  • The gap sets the room around it

Divided, closed off

  • A line above the first
  • Between each
  • And under the last

Bulleted

  • Type, colour and spacing come from Typography
  • A long item wraps under its words rather than under the mark
  • The gap between the mark and the words is a setting

Numbered

  1. Write the items, one per line
  2. Choose a marker
  3. Set the columns if the list is long

Icon

  • Any icon from the library
  • Drawn as a real shape, not a font character
  • Falls back to a bullet if the icon is missing

No marker

  • For a list being used as layout
  • Where the words are the whole point
  • And a bullet would be noise

Three columns

Columns collapse to one below 700px, because two columns of list on a phone is one word per line.

  • Products
  • Variations
  • Categories
  • Orders
  • Coupons
  • Shipping
  • Tax
  • Emails
  • Subscriptions