Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Care Recap Bento-Style Grid Layout
Complete a Bento grid layout in the care recap page scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runCreative Storytelling Product Comparison Page
Build a product comparison page in a story-sharing event setting: include real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runCourse Duty Roster Trend Analysis Dashboard
Complete the trend analysis panel for a class duty roster scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runLoft plan board option card selection
Complete option card selection in a loft plan board scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runHomestay application time-slot booking form
Complete a time-slot booking form in a homestay request scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.
Open and runCampus Visit Pass Bottom Dock Navigation
Complete a bottom quick navigation in a campus visit pass scenario: includes real content, actionable controls, clear status feedback, and responsive layout.
Open and runGallery Support Row Keyboard Tooltip
Complete the keyboard tooltip in a gallery support bar scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runOutpatient Visit Priority Queue
Complete a priority queue in an outpatient round-robin scenario: includes real content, interactive controls, clear state feedback, and responsive layout.
Open and runExhibit Stock Book Comparison Matrix
Complete a comparison table in an exhibit inventory book scenario: include realistic content, actionable controls, clear status feedback, and cross-size layouts.
Open and runClassroom Atlas Dashboard Shell
Complete the dashboard shell in a classroom atlas scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runMeal Service Event Agenda Page
Complete the event agenda page in a meal service scenario: includes real content, interactive controls, clear state feedback, and a responsive layout.
Open and runReal-time activity stream for classroom duty desk
Complete a real-time activity feed in a class duty station scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCare visit shopping cart calculator
Complete the shopping cart calculator for a care visit scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runOutlined Title Design for a Brand Manifesto
Complete the outlined title design in the brand manifesto scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCourse progress button morph transition
Complete a button morph transition in a course progress scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts.
Open and runCoral Dome Glass Depth Space
Complete the glass depth-of-field space in a coral dome scene: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runPublic Atlas timeline chart
Complete the timeline chart in a public atlas scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runAudio Toolkit Clipboard Demo
Demonstrate clipboard operations in an audio toolkit scenario: includes realistic content, interactive controls, clear status feedback, and layouts across sizes.
Open and runMemory Match Game for Book Club
Complete the flip-card memory game in a book club scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runLoft configuration cart range adjuster
Complete the range adjuster in the loft setup cart scenario: includes real content, actionable controls, clear state feedback, and responsive layout across sizes.
Open and runResidential Service Review Desk Summary Confirmation Form
Complete a summary confirmation form for a co-living review desk scenario: includes realistic content, actionable controls, clear state feedback, and cross-size layouts.
Open and runCare Route Breadcrumb Navigation
Complete breadcrumb navigation for a care-path scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runGallery update window notification stack
Complete a toast stack in a gallery update window scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCommunity Market Story Carousel Card
Complete a story-carousel card in a community market scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.
Open and run