OCS Container Grammar

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

Popcorn Hack: Parade Invite Rescue

The broken parade invite is rebuilt inside one ocs__container and one ocs__card. The schedule uses a responsive 3-column standard grid, and the start time is accented.

Community Service Event

Join local volunteers for a community service event and check the details below.

Location: Community Center

Start Time: 8:30 AM

What You Get: Community fun and Rotary spirit

Homework Hack: Parade Hub Page

The full parade hub uses exactly one container and one card. It includes the required standard cols-3 grid with header, accent, and muted cells, an OCS table with two body rows, and a final callout.

Community Event Hub

Key event details, volunteer information, and status in one responsive page.

Event Information

Parade Start: 9:00 AM on Poway Road

Volunteer Check-In: 8:00 AM

Event	Status
Parade Floats	Confirmed
Food Drive	Collecting donations

One OCS container keeps the entire Parade hub consistent and responsive on phones and computers.