List

A vertical flex layout for structured rows. Use list-row on each <li>; the 2nd child fills remaining space by default. Override with list-col-grow or push a child to its own row with list-col-wrap.

Basic list

Music playlist. The 2nd child (title/artist column) fills remaining space by default — no extra classes needed.

list-col-grow

Override which column fills remaining space with list-col-grow. Here the rank number is first, but the 3rd child (title) is the one that should grow.

list-col-wrap

list-col-wrap pushes a child to its own full-width row below the other children. Good for descriptions or secondary content.

Text-only list

Simple text rows with no media — useful for menus, tables of contents, or category lists.

Settings panel

Icon + label + action element — a common pattern for settings menus.