Container devices example functions

Summary

The payoff page for the container system, showing the rounded devices filled with real-looking F1 content: news cards, color-coded driver stat panels, icon tiles, lap-time readouts and a logo lock-up.

Visual description

Cream (#F4F0E8) page with the standard header (title "Container devices / Example functions", page "144"). The left column notes this shows the devices "brought to life with notional content". The main area is a multi-column collage of rounded cards. Top-left "Image, pattern container": a trackside pit-stop photo above a small grid-pattern strip. Center "Mixed content": a news card with a driver photo, white headline "Hamilton shows Usain Bolt a new meaning of speed", a red "VIDEO" tag and timestamp. Right "Interface element/overlay": stacked branded stat panels, a teal Mercedes "Lewis Hamilton 44" card with a car render and flag, a navy Red Bull Racing card with Verstappen and Ricciardo portraits and numbers, a teal "BOTTAS" waveform bar, and two lap-time tiles (black "2.01.989 WET", green "2.01.989 PERSONAL BEST"). Lower band "Icon container": four rounded icon tiles (All Races, No Video, a shutter mark, a Do Not Bend label) and red "+" / arrow / Twitter interactive tiles. Bottom-left "Logo lockup contruction": a black "MONACO GP" pill lock-up.

Key takeaway

Proving an abstract container system by skinning it with believable product content (broadcast graphics, news cards, stat overlays) all sharing one corner radius. The color-coded driver cards (team color as the card field) and the dual lap-time tiles are strong, reusable data-display patterns.

Reuse notes

A persuasive "applied examples" page to close a component spec, showing the system in context rather than in the abstract. The stat-overlay and news-card treatments map directly to sports, broadcast, or live-data products. Densest page in this run; good reference for masonry card collages. Content is F1-specific demo material, swap for your own.