Component preview
A living reference for shared MUI defaults before we use them in School Portal and Library Admin.
UI tuner
Changes preview the gallery immediately. Save keeps this tuning in this browser only.
General radius · 4px
Buttons, text fields, chips, and small controlsPaper radius · 6px
Card radius · 6px
Spacing density · 8px
Typography scale · 100%
Adjusts the base type size across the preview.ICLA palette
Shared theme values used by School Portal and Library Admin.
Primary blue
#5d7bb7
Supporting blue
#8aabbe
Highlight yellow
#fed000
Page background
#fdfcfb
Primary text
#080704
Each row uses the matching MUI variant from the shared ICLA theme.
h1
Lead the future with hope
h2
Page heading
h3
Section heading
h4
Content heading
h5
Card heading
h6
Small heading
subtitle1
A clear supporting introduction
subtitle2
A compact supporting introduction
body1
Default reading text for paragraphs, descriptions, and detailed content.
body2
Compact reading text for supporting details and card descriptions.
button
caption
Caption, metadata, or helper informationoverline
SECTION LABELButtons
Use one clear primary action per area. Outlined and text buttons support lower-priority choices.
Variant
Choose priority before colour.
Theme colour
Use primary for the main action. Reserve warning and error for a meaningful highlight or destructive action.
Size and state
Icon buttons
Use an icon button only when the icon is universally recognisable. Add a tooltip when its meaning needs support.
Chips
Chips label filters, categories, and compact statuses. They are not a replacement for primary actions.
04 · Content
Cards
Real MUI card building blocks for the Programs, Events, and Facilities sections in the About Us reference.
Study with purpose
Academic formation that pairs theological inquiry with lived spirituality.
Community in motion
Gatherings and community moments that bring the ICLA family together.
A place to belong
Spaces for reflection, learning, conversation, and community life.
05 · Editorial content
Accordion and List
Supporting components for detailed programme information and the Mission bullet points in the About Us reference.
Accordion
Use for optional answers and supporting details.
Use this for additional programme, event, or admissions context.
This pattern keeps detailed information available but visually calm.
Mission list
Use for a short, readable set of commitments or outcomes.
Educates for competent service through theological reflection and formation.
Promotes vocation and commitment to mission in a multicultural environment.
Seeks gospel values expressed through compassionate service and friendship.
Fosters openness to the transforming power of the Spirit.
06 · Form fields
Inputs and choice controls
Real MUI fields for future sign-in, enquiries, registrations, and staff workflows. These are visual samples only and do not submit anything.
TextField variants
Outlined is the recommended default. Filled and standard are available when a page needs a different visual density.
Size and state
This field needs attention.
Select field
Use when a visitor chooses one option from a defined set.
Autocomplete
Use when a list is long enough that searching is more helpful than scrolling through a Select menu.
Date Picker
Use a calendar picker when the date needs to be precise, such as an event date, return date, or appointment.
Choice controls
Checkbox permits several choices. Radio selects one. Switch changes an immediate on/off preference.
07 · Feedback and overlays
Alerts, notifications, and modal decisions
Presentation samples only. Open the live examples to see the actual MUI behaviour; they do not submit, navigate, or save anything.
Alert
Inline feedback within the page or form.
Snackbar notification
A short, temporary confirmation after a completed action.
Dialog modal
A focused decision that needs confirmation before continuing.
08 · Browsing and identity
Pagination, Avatar, and Tabs
Visual patterns for browsing News and Events, grouping Programs, and introducing people such as authors, faculty, or event speakers.
Pagination
Use for long News and Events lists, not a short featured group.
Avatar
Use an image when available; initials are the dependable fallback.
Tabs
Use only when a visitor switches between closely related content on the same page.
Showing: All programs
09 · Data and progress
Table and Stepper
Shared patterns for compact records and guided multi-step tasks. The labels are samples, not a real workflow or dataset.
Data table with selection
Use for structured records where staff may take a bulk action.
| Activity | Owner | Status | |
|---|---|---|---|
| Orientation request | Maria Aquino | Available | |
| Programme enquiry | John dela Cruz | In progress | |
| Member update | Aisha Malik | Needs attention |
Stepper
Use when a person must complete a short sequence in order, such as a registration or staff task.
- Choose details
- Review information
- Complete
10 · Media and states
ImageList, Menu, and loading
Supporting presentation patterns for galleries, compact actions, and the moments before content is ready.
ImageList
Use for an image-forward gallery such as facilities, campus, or events.
Menu
Keep secondary actions compact when they do not need permanent space.
Loading states
Match the loading treatment to the amount of content still arriving.
Loading content
11 · Guidance and discovery
Tooltip, feature discovery, and walkthrough
Small, optional hints that help people notice a feature without making the main interface feel busy.
Tooltip
Hover or focus for a short explanation of an otherwise recognisable icon.
Feature discovery
A small, temporary cue for a newly added or changed feature.
Walkthrough
A short guided sequence for a genuinely unfamiliar workflow.
Product references
What the drafts need
Practical checklists from the current product drafts. Both draw from this one shared MUI catalogue, while their page patterns remain distinct.
School Portal reference
About Us wireframe
| Page area | What we need | Implementation note |
|---|---|---|
| Top menu | AppBar Toolbar Link Drawer | Drawer is the compact mobile navigation. |
| Hero | Container Typography Stack / Grid Next Image | Image and brush artwork are custom assets, not MUI components. |
| Events, Programs, Facilities | Card CardMedia CardContent Typography | One reusable content-card pattern with different content. |
| Vision and Mission | Typography Divider Stack / Grid | Editorial content sections with long-form copy. |
| Footer and contact | Box Stack Link Typography | Contact details, logo, and utility links. |
| Location map | Embedded map / iframe | An external map embed; MUI provides only its surrounding layout. |
| Brush strokes and curves | Custom CSS / asset | Decorative visual treatment outside the MUI component set. |
Library System reference
Library dashboard draft
| Page area | What we need | Implementation note |
|---|---|---|
| Staff navigation | AppBar Drawer List ListItemButton | A staff workspace shell with focused navigation. |
| Library overview | Card Typography Stack / Grid | Summary metrics and quick operational context. |
| Book catalogue | Table Checkbox Chip Pagination | The primary browsing and bulk-selection pattern. |
| Search and filters | TextField Autocomplete Select Chip | Find books, refine results, and show active filters. |
| Book actions | Button IconButton Menu Dialog | Create, edit, inspect, or remove a book through clear actions. |
| Status feedback | Alert Snackbar CircularProgress | Communicate saving, success, errors, and loading states. |