Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Course tip help popover
Complete a help popover in a lesson tip scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts.
Open and runField handover log contact index
Complete the contact index in a field handover log scenario: with real content, actionable controls, clear status feedback, and layouts that adapt across sizes.
Open and runMaintenance Board Multi-Column Sort Table
Complete a multi-column sortable table for a maintenance board scenario: real content, interactive controls, clear status feedback, and responsive layout across screen sizes.
Open and runClassroom Display Master-Detail Content Layout
Complete a master-detail content layout in a classroom display setting: includes real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runPodcast membership quarterly subscription conversion page
A subscription conversion page completed for the podcast membership season scenario: includes real content, actionable controls, clear status feedback, and a cross-size layout.
Open and runGreenhouse Main Desk Incident Response Board
Complete an incident response dashboard for a greenhouse headquarters scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runPantry Control Console Color Swatches Selection
Create color swatch selection for pantry control console scenarios: includes real content, interactive controls, clear state feedback, and layouts that adapt across sizes.
Open and runInternship Intake Local Suggestions Input
Create a local suggestions input in an intern onboarding scenario: include real content, interactive controls, clear state feedback, and responsive layouts.
Open and runClinic Terminal Responsive Main Menu
Complete a responsive main menu for the outpatient terminal scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runMedia queue bottom action panel
Complete a bottom action sheet for a media queue scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runField Notebook Expandable Records
Complete an expandable records experience for a field notebook scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runSticky Header for Delivery Details
Complete a sticky header for a delivery detail scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCourse guide split-screen narrative layout
Complete a split-screen narrative layout for a course guide scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runPodcast Open Day pricing plan page
Complete the pricing plans page in the Podcast Open Day scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runGreenhouse Dispatch Control Center KPI Overview
Complete the key metrics overview for the greenhouse dispatch room scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and runOutpatient appointment ledger generator
Build an invoice generator for outpatient appointment desk scenarios: includes real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runClass Zine Text Mask Effect
Create a text masking effect in a classroom zine scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runOutpatient Cycle Notification Pop-up Feedback
Complete notification pop-up feedback in an outpatient loop scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runCoral Hall Organic Fluid Shapes
Complete organic fluid shapes for the Coral Hall scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runPublic Forecast Board Donut Chart
A completed donut chart for a civic forecast board scenario: includes realistic content, interactive controls, clear state feedback, and cross-size layout.
Open and runClassroom Panel Local Storage Notes
Complete the local storage note in the classroom panel scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runClass Checklist Station Random Picker
Complete a random picker for the classroom roster station scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runPantry demo screen dual-range control
Complete the dual-value range control in a pantry demo screen scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runStep-by-step Library Card Application Flow
Complete a step-by-step form-filling flow for a library card application: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and run