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.

mantra_starter:list

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.

  • one
  • two
  • three

Default

  • one
  • two
  • three

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.

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`.

Opening hours
  • Monday to Friday, 9am to 5pm
  • Saturday, 10am to 4pm
  • Closed Sunday

List heading

Content list heading.

mantra_starter:list_header

Default

Hello

Normal

`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.

Hello

H4

Hello

Button

button

List items

Content list items.

mantra_starter:list_items

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.