Examples

These examples show you show to put style, layout, and components together to create beautiful interfaces. For specific details about each component or layout element, refer to those sections of the docs.

Components

Card sizes

Explore the differences in cards across all viewport sizes.

Card dashboard

Full-featured example of an admin dashboard built with cards.

Dialog - Landing page

A dialog used in a landing page after sign in.

Dialog - Sign in

A dialog use for logging in to the product.

Dialog

A typical notification dialog for blocking actions.

Drawer

A large drawer that opens from the right.

Timeline

An interactive timeline example.

Layout

Build mode

Learn about build-mode layout variations.

Grid layout and action bar

Use the grid to create a multi-column layout.

Page header

A basic page header example demonstrating design across all viewport sizes.

Master detail

Use the region typically used for application menus as a home for a master detail view.