Header
A top bar with the title of the page.
Documentation
Sections
Ready-made pieces of a screen, dropped in one go.
A section is a piece of screen already built from the widgets of the previous page. Once dropped it is just widgets: you edit it like anything else.
General
Search Bar
A search bar with its icon.
List
A list of rows separated by a hairline, to edit as you like.
Settings
A list of settings: switches, a language and privacy.
Card
A ready-made card: photo, title, description and a button.
Form
A form with name, email, password and the continue button.
Profile
A person's profile: avatar, name, occupation and an edit button.
Empty State
What is shown when there is nothing yet: an icon, a text and a button.
Gauge
A circular progress gauge inside a card.
Stat Card
A card with a gauge and its name.
E-commerce
Product Card
A product card: photo, name, price and rating.
Product Grid
A grid of product cards, two across.
Categories
A row of categories to filter by.
Cart Item
A cart item: photo, name, detail, price and quantity.
Order Summary
An order summary: subtotal, shipping, discount, total and the checkout button.
Add to Cart Bar
The bottom bar with the price and the add to cart button.
Chat
Chat Composer
An assistant composer: a text field and a send button.
Chat Bar
A bar to write messages, with its text field and buttons.
User Message
The person's message in a conversation with an assistant.
Assistant Message
An assistant's reply.
Typing Indicator
The indicator that someone is typing.
Prompt Suggestions
Suggestions of what you can ask.
Conversation
A whole conversation with messages back and forth.
Chat Header
The header of a chat, with the person's name.
Chat List
The list of recent conversations.
Incoming Message
A received message.
Outgoing Message
A sent message.
Voice Message
A voice message with its play button and its length.
Date Separator
The date separator between messages.
Message Bar
The message bar fixed at the bottom: a text field with buttons.
Social
Stories
A row of stories, with their circles.
Social Post
A post: author, photo, actions and text.
Comment
A comment with its author.
Bottom Sheets
Product Sheet
A bottom sheet with a product's detail.
Player Sheet
A bottom sheet with a music player.
Place Sheet
A bottom sheet with a place's information.