Modes
The Modes section provides a side-by-side comparison for every variable mode a component uses, including per-mode artwork and a matching content list of resolved styling values.
What It Includes
The artwork includes:
- Mode artwork — a copy of the component forced into each mode, so the rendered appearance reflects real mode-bound values rather than defaults
The content includes:
- Content style list — the styling values in effect for that mode, shown alongside the artwork
A collection subsection is included for every qualifying variable collection (two or more modes), with one exhibit per mode inside it.
Examples
Basic Modes
A component bound to a single variable collection with two modes — like a Theme collection with Light and Dark — gets one subsection with two exhibits side by side: the artwork rendered in each mode, plus its resolved styling values.
Multiple Collections
A component can draw from more than one qualifying variable collection at once — for example a Theme collection (Light/Dark) alongside a separate Density collection (Comfortable/Compact). Each collection gets its own subsection, and each subsection lists all of its modes as exhibits, so the total number of exhibits multiplies with the number of collections and modes involved.