The Simplest framework you will ever need
Grid System
1
11
2
10
3
9
4
8
5
7
6
6
Cards & Tabs
Card Title
Title description
Regular Card body text
Elevated Card Title
Title description
Card body text
Card Title
Title description
Regular Card body text with image and buttons
Card Title First
Card body text text with image and buttons
Typo
Uses Open Sans out from the box (300 & 600 only, but you can add more if needed)
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Paragraph
Divider
Base Colors
Highlight Colors
Tables
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
|---|---|---|---|---|---|
| Cell A1 | Cell A2 | Cell A3 | Cell A4 | Cell A5 | Cell A6 |
| Cell B1 | Cell B2 | Cell B3 | Cell B4 | Cell B5 | Cell B6 |
| Cell C1 | Cell C2 | Cell C3 | Cell C4 | Cell C5 | Cell C6 |
| Cell D1 | Cell D2 | Cell D3 | Cell D4 | Cell D5 | Cell D6 |
Lists & Chips
Basic Chip
Chip with Icon
Filled Chip
Closable Chip x
Image and Name ChipSingle-Line List
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
Two-Line List
- List Item
Secondary text
- List Item
Secondary text
- List Item
Secondary text
- List Item
Secondary text
- List Item
Secondary text
Three-Line List
- List Item
Secondary text
Tertiary text
- List Item
Secondary text
Tertiary text
- List Item
Secondary text
Tertiary text
- List Item
Secondary text
Tertiary text
1-Line + Icon
- List Item
- List Item
- List Item
2-Line + Icon & Image
- List Item
Secondary text
![]()
- List Item
Secondary text
![]()
3-Line + Image
- List Item
Secondary text
Tertiary text
![]()
- List Item
Secondary text
Tertiary text
![]()
Image Gallery
Image Info
Dialogs, Sheets & Snackbar
Progress Indicators
Environment
Indeterminate loading indicators on screen that applies to environment processes
Inline
25%
50%
100%
Indeterminate
Circular 25%
Circular 50%
Circular 70%
Circular Indeterminate