Simple Framework

The Simplest framework you will ever need

Grid System

12
1
11
2
10
3
9
4
8
5
7
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1

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

#EEEEFA
#CCD
#557
#334

Highlight Colors

#FFD
#E68
#DCF
#86E

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 Chip
Single-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

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

Forms

All components almost out of the box (no classes needed for default styles)

Buttons

This style applies to button and a.button

Input Fields

* Required
Error info
Unavailable

Radio & Checkbox