Item
A row with media on the left, a title and description in the middle and actions on the right - three surfaces, three sizes, and the two ends published separately so they compose instead of multiplying.
Default paints nothing at all, Outline is base.background on a 1px base.input line, Muted is a base.muted block. All three keep the same 10px radius and the same 12px gap, so a list can switch treatment without anything moving.
The title holds at 14/500 throughout. sm keeps default's 16 of side padding and takes xs's 8 on top; xs tightens both and drops the description to 12. Two levers, three steps, and each one four pixels from the last.
The source draws the line plainly: Field for form inputs, Item for displaying content. A row with a title, a description and a button beside them is an Item even when it sits in a settings screen that looks like a form.
What goes on the left, and what goes on the right
Both published on their own so the row does not need a variant for every pairing. Five kinds of media and three kinds of action would be fifteen combinations on one axis; separately they are eight variants that compose.
Loose rows, and nine of them boxed into one group
1124 by 1130. Outline rows for files, muted rows for teammates, rows with avatars and image previews, and the ItemGroup: 460 × 540 of nine rows sharing one border, with a 1px divider between each pair rather than around each row.
Four components, seventeen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Item
The source draws the line plainly: Field for form inputs, Item for displaying content. A row carrying a title, a description and a button beside them is an Item even when it sits in a settings screen that looks like a form. If a value is being typed, it is a Field.
Only the surface. Default paints nothing, Outline is base.background on a 1px base.input line, Muted is a base.muted block. The radius stays 10 and the gap stays 12 in all three, so switching a list from loose rows to bordered ones moves nothing inside them.
Because five kinds of media times three kinds of action is fifteen combinations. As separate components they are eight variants that compose, and adding a sixth media type costs one variant rather than three.
One border instead of nine. The group is 460 × 540 with a single base.input outline and a 1px divider between each pair of rows, so the seams are one line wide rather than two. Loose rows each carry their own outline and sit 8 apart.