Components, content
Every story of every component under `mantra_starter/components/content`: the content list, its heading and its items, including the column counts and the three line heights the items are built at. They are shown together because they are used together -- a list is its heading and its items, and the spacing only reads once all three are on the page. Each block is a `*.story.yml` committed beside its component. Every story is made up and nothing is saved.
List
Content list.
Text heading
The heading slot as plain text rather than a component. `list` pins `heading_size` to `normal`, so this is the size a list gets in content -- the `list_header` stories show the same heading at `large`.
Links
What a list usually holds in content -- a heading over a set of links. Items are render arrays, so the markup inside one is the caller's to choose.
No heading
The heading slot left empty. `list` includes `list_header` unconditionally, so the header element is still in the markup with nothing in it.
Default
List heading
Content list heading.
H4
Hello
Button
Default
HelloNormal
`heading_size: normal`, the default and the size `list` passes. The other stories are all `large`, so this is the only one showing what a list heading inside content actually looks like.
List items
Content list items.
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
- one
- two
- 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.
- one
- one a
- one b
- two
- three
- three a
- three a i
- three a
Line height 1
- one
- two
- three