Color paletted includes 13 named colors: primary, secondary, 4 states and 7 supporting. Hover, active and focus states are modified the saturation and lightness of their color.
There are 2 styles mostly used in our apps: flat and raised state.
Some components have hover state. We can activate this state by adding the class selection.
Helvetica and Arial are still two of the most popular typeface designs around. The primary difference between Arial and Helvetica is multiple weights. Helvetica has light, normal, medium and bold, while Arial's are normal and bold.
Helvetica Light
Helvetica Normal / Arial Normal
Helvetica Medium
Helvetica Bold / Arial Bold
Use bold
to bold text. Use upper
to convert text from lower case to upper case
Text
Bold Text
Uppercase Text
Headers may be oriented to give the hierarchy of a section in the context of the page. Page headings are sized using rem
and are not affected by surrounding content size.
Heading One
Heading One
Heading One
Heading Two
Heading Two
Heading Two
Heading Three
Heading Three
Heading Three
Heading Four
Heading Four
Heading Four
Heading Five
Heading Five
Heading Five
Helvetica and Arial are still two of the most popular typeface designs around. The primary difference between Arial and Helvetica is multiple weights. Helvetica has light, normal, medium and bold, while Arial's are normal and bold.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Google Photos lets you search by emoji
Don’t let the calendar confuse you, this one is no joking matter: Google has brought emoji search to Photos on the Web, Android and iOS.
All you need to do is paste in the appropriate emoji and it’ll return the matching results – a gift for anyone who is just all too busy (or lazy) to type, say, ‘sunrise’ into the search bar.