Layout system
Composing structure
Containers, cards, grids, stacks, and dividers provide the scaffolding for product surfaces. The examples below demonstrate the recommended combinations for content blocks and responsive layouts.
Responsive container
Wrap page content with consistent padding and max-width breakpoints.
Container handles horizontal padding and max-width. Nest cards, grids, or sections inside to compose full layouts.
Cards and stack spacing
Use Stack for vertical rhythm and Card for surface elevation.
Session summary
Upcoming milestones
• Submit practice log by Friday
• Schedule tutoring session
• Review flagged questions
Grid layout
Align content responsively across columns using the Grid component.
Drafts
5 lessons ready for review
Published
18 lessons live
Feedback
12 new student ratings
Dividers
Separate content groups with semantic `<hr>` styling.
Before the exam
Warm-up questions and topic reviews.
During the exam
Timer countdown, calculator toggles, and AI explanations.
After the exam
Flag review, bookmark exports, and score breakdown.