First nested card
This authored two-column list reduces from its own available width, even on a wide viewport.
Sections and regions
Layout mechanics should stay useful without locking a theme into one look.
Default section
This section uses the default width and default appearance.
Wide section
This section combines the authored wide width with the standard alternate surface treatment.
Transparent section
Transparent is part of the standard section appearance mapping and should remain structurally predictable.
Full-width section
Full uses all safely available inline space while retaining the normal Base surface treatment.
Theme-owned section
Theme emits no standard width or appearance modifier. The authored class is the extension point, and QP Base intentionally supplies no special treatment for it.
Balanced regions
Two equal regions in one row.
The first region contains prose and a list.
- Region-owned content
- Parent-owned arrangement
Second nested card
The containing Region does not need CardList-specific responsive rules.
Weighted regions
A wider main region with a narrower supporting region.
This region has twice the relative width of its sibling and acts as the main content area.
This narrower region acts as supporting content.
Sticky tray placement
Three independently positioned trays exercise the Base viewport-placement contract.
This tray relies on the default top and center placement values.
Activation remains immediate while placement moves to the bottom edge.
Independent axes allow a vertically centered tray aligned to the right side.