Standard container uses spec

Summary

A uses page showing three ways the standard container flexes: holding an image, nesting an image plus headline and metadata, and being subdivided internally with hairlines.

Visual description

Cream (#F4F0E8) page with the standard header (title "Standard container / Uses", page "142"). The left column lists labeled guidance with bold lead-ins ("Image container", "Nesting", "Subdivision"). The main area shows three columns of example panels with faint red corner-construction marks. Left: an "Image container" with a white image-placeholder (diagonal-cross) inside a grey container, and below it a "Nesting Multiple" example of three small icon cards in a row over a wide one. Center: "Nesting with text", a grey container holding an image placeholder, a white headline "Headline may be nested inside container" and an all-caps "SUB HEADLINE / DATE" footer row. Right: "Subdivision", a dark grey container with a heavy black "CONTAINER SUBDIVISION" display headline at top and the interior split by hairlines into two text columns.

Key takeaway

Showing one flexible primitive doing three jobs (image frame, captioned card, subdivided panel) on a single page, which sells the container's range without new components. Matching the hairline subdivision corner radius to the container radius for a cohesive feel. The headline-plus-sub-headline-plus-date card pattern is a ready-made content block.

Reuse notes

A reusable layout for a "uses" or "anatomy" page in a component guideline. The nested-card and subdivision patterns translate directly to real editorial or dashboard cards. Best read alongside the sizing and misuse pages. Placeholder content (Image, icons, lorem) keeps it generic and reusable.