Alert
An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
Basic Alert
Outlined Alert
Avatar
The Avatar component is used to represent a user, and displays the profile picture
Basic Avatar
Avatar Sizes
Avatar Outline
Combining avatar classes
Badge
Badges are used to highlight an item's status for quick recognition.
Badge on Avatar
Badge on Icon
Button
The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Basic Button
Outlined Button
Link Button
Icon Button
Floating Action Button
Card
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Basic Vertical Card
Card with text
Card with text overlay
Basic Horizontal Card
Grid
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs.
Grid with 2 items
Grid with 3 items
Image
A component for displaying images.
Responsive Image
Resize the window to see the responsiveness.
Round Image
Input
Input components allow a flow to accept user input, such as through a text input field.
Text Input
Text Input with validation style
List
Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
Ordered List
- list item 1
- list item 2
- list item 3
Unordered-list
- list item
- list item
- list item
Notification list
- Notification 1
- Notification 2
- Notification 3
Modal
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes and more.
Modal
This is a modal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nesciunt aliquam blanditiis, labore necessitatibus magni eligendi distinctio tempora quo exercitationem.
Rating
Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
Read-only Rating
User-input Rating
Toast
Send push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Toast
You have two new messages! Click to view
Typography
Use typography to present your design and content as clearly and efficiently as possible.
Heading
This is an h1 heading
This is an h2 heading
This is an h3 heading
This is an h4 heading
This is an h5 heading
Paragraph
This is an extra-large text
This is a large text
This is a medium text
This is a small text
This is an extra-small text