List items

ID: mantra_starter:list_items

Content list items.

Name Label Type Description
items Items Slot A list of renderables. An item that has children is instead a mapping of `value` and `below`, where `below` is a list of items of either shape -- it renders as a list of the same type inside the item's `li`. In a story such a mapping needs a `'#cache': {}` beside those keys to keep them.
list_type List type Enum Default: "ul"
Allowed values: ol, ul
line_height Line height Enum Default: 1
Allowed values: 1, 2, 3
list_title List title String
column_width Column width String Default: "auto"
column_count Column count Enum Default: "auto"
Allowed values: auto, 2, 3, 4, 6, 8

Rich items

An item is any renderable, not just a string -- a render array is printed as it stands. Anything with a `#`-prefixed key survives the slot cleaning that strips a plain mapping, so a render array needs nothing added to it.

  • A link inside an item
  • Markup an item may carry: strong, emphasis, code
  • A component-styled span
  • A plain string, for comparison

Nested ordered

  1. one
    1. one a
    2. one b
  2. two
  3. three
    1. three a
      1. three a i

Line height 3

  • one
  • two
  • three

Nested

  • one
    • one a
    • one b
      • one b i
      • one b ii
    • one c
  • two
  • three
    • three a
    • three b

Line height 1

  • one
  • two
  • three

Ordered

  1. one
  2. two
  3. three

Line height 2

  • one
  • two
  • three

Wide columns

`column_width: md` against the `sm` of the columns story. The width is a minimum, not a fixed measure -- the browser fits as many columns of at least that width as it can, so a wider setting means fewer columns.

  • Frame and forks
  • Wheels and tyres
  • Drivetrain
  • Brakes and cables
  • Bars, stem and seatpost
  • Saddle
  • Pedals
  • Bags and racks

Default

  • one
  • two
  • three

Columns

  • one
  • two
  • three
  • four
  • five
  • six
  • seven
  • eight
  • nine
  • ten
  • eleven
  • twelve
  • thirteen
  • fourteen
  • fifteen
  • sixteen
  • seventeen
  • eighteen
  • nineteen
  • twenty

Nested in columns

  • Frame
    • Steel
    • Aluminium
    • Titanium
  • Wheels
    • Rims
    • Hubs
    • Spokes
  • Drivetrain
    • Chainset
    • Cassette
    • Chain
  • Brakes
    • Rim
    • Disc
  • Saddle
  • Pedals

Long items

Items long enough to wrap, at line height 3. The single-word items the line height stories use sit on one line each, where the leading is only visible between items; here it is visible inside one.

  • A frame built for touring carries its load low and behind the rider, which keeps the steering predictable when the bags are full.
  • Gearing matters more than weight on a long climb, and a wide-range cassette costs less than the grams a lighter wheelset saves.
  • Mudguards are the least glamorous upgrade and the one most likely to be thanked for by whoever is riding behind.