OCS Container Grammar

The finished OCS Containers lesson hacks are below. Click Run on each labeled UI runner to preview the layout. Both solutions rely only on the shared OCS container grammar, with no custom CSS.

Popcorn Hack: Parade Invite Rescue

The broken invite is rebuilt with a single ocs__container wrapping a single ocs__card. The details sit in a responsive 3-column standard grid, and the start time is the accented cell.

Challenge

Popcorn Hack — Parade Invite Rescue

Lines: 1 Characters: 0

UI Output

Homework Hack: Parade Hub Page

The hub page keeps to exactly one container and one card. Inside are the required standard cols-3 grid (header, accent, and muted cells), an OCS table with two body rows, and a closing callout.

Challenge

Homework Hack — Poway Rotary Parade Hub

Lines: 1 Characters: 0

UI Output