Components in Context
Realistic application layouts showing how design system components work together. These mockups demonstrate the look-and-feel of actual JPG Academy apps.
Full App Shell — Dashboard
AppHeader + HorizontalNav + Breadcrumb + Cards + Table — the complete dashboard layout.
Required Services
Today's Attendance
Click a row to open the student detail drawer →
Drawer — Student Detail
Click "Open Drawer" or a table row above to see the student detail panel.
Modal — Edit Student
A form inside a modal dialog for editing student information.
Login Page
SchoolBrand + Input + Button — the authentication entry point for all apps.
John Paul the Great Academy
A Catholic, Classical School for Acadiana
Sign in with your JPG Academy Google account
Authorized accounts only. Contact IT for access.
Settings Page
Toggle + Select + Stepper — common settings patterns.
Preferences
Choose which page opens when you log in.
Account Setup Progress
Loading States
Skeleton components that show while data loads — maintaining layout stability.