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

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

Line height 3

  • one
  • two
  • three

Nested

Items nested to three levels. An item with children is a mapping of `value` and `below`; the `'#cache': {}` beside them is what keeps those keys -- a slot array with no render array property is passed through `array_values()` and arrives as a sequence. Nested lists take the list type of the list they sit in.

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

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

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

Ordered

  1. one
  2. two
  3. three

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.

Nested in columns

Nesting and columns together, which is where they conflict: a column break falling inside an item would leave its children in the next column, under nothing. `break-inside: avoid` on the `li` keeps each item whole, and the nested list carries no block margin of its own so the item stays compact.

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

Line height 2

  • one
  • two
  • three

Nested ordered

The same nesting in an `ol`. Numbering restarts at each level -- the nested list is a list of its own, not a continuation of the one above it.

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

Line height 1

  • one
  • two
  • three