Web Expressive: Example Layouts

Example layouts are design starters made by Material Design. They are meant to be a starting point rather than a final destination. Web Expressive provides an implementation for these starters as standalone HTML files that you can easily download, customize, or feed directly into AI coding assistants.

Why Example Layouts?

Web Expressive provides these starters to accelerate product development and optimize building in agentic workflows:

  • Example layouts are built using Web Expressive: They demonstrate how to implement real-world designs by composing the library's design tokens and components into custom patterns that follow Material Design 3 guidelines.
  • Example layouts are optimized for agentic workflows: Their standalone HTML files give AI agents concrete examples to inspect and adapt. These examples use modern CSS, semantic HTML, progressive enhancement, and native browser features, including <dialog>, the Popover API, and CSS carousels.
  • Example layouts are built with an unopinionated architecture: They provide complete flexibility, allowing you to easily adapt, modify, or integrate them into your stack. Each starter is a standalone HTML file that requires no build step.

Available Starters

Explore the curated collection of responsive layout patterns below:

Home Feed

A content-rich landing experience featuring top navigation, featured content hero, horizontal category filter chips, and multi-column article grids that adapt fluidly from mobile cards to expansive desktop arrangements.

Image-led browsing experience showcasing fluid responsive media grids, aspect-ratio containers, and view-mode toggles. Built to showcase visual assets with harmonious spacing and subtle hover elevations.

Library

Searchable, filterable catalog for saved, owned, or categorized items. Demonstrates sticky search headers, interactive chip filters, item counters, and flexible card grids for data-dense collections.

Detailed View

A focused item, article, or product display layout. Features hero media headers, contextual metadata chips, action bars with primary Extended FAB triggers, and supporting recommendation lists.

Upcoming Content

Chronological timelines and release schedules for events, episodes, or time-sensitive updates. Demonstrates date-grouped content lists, status indicators, and notification toggle controls.

Messaging

Two-pane communication interface featuring responsive conversation drawers, message history bubbles, contextual input containers, and suggested reply chips. Adapts from full-screen thread views on mobile to side-by-side panes on desktop.

Reviews and Ratings

Community feedback and evaluation view with aggregate rating scorecards, distribution progress indicators, featured user testimonials, and review submission triggers.

Learn More About Web Expressive

Every starter layout is composed from Web Expressive design tokens and primitives. To customize or build new interfaces from scratch, refer to the comprehensive guides in the documentation: