Paper CSS

  1. Typography
  2. Components
  3. Containers

Typography

Title Large
Title
Title Small
Heading 1
Heading 2
Heading 3
Subheading
Subheading Dense
Body
Body Dense
Caption
Overline

Titles

Titles are intended to be used once per page. Three sizes are available to cater for different title lengths.

Headings

There are three heading sizes intended for three levels of content heirarchy.

Subheading

The subheading is intended for short descriptions which expand on the heading it's paired with.

Components

Button

Buttons are clickable controls which can be bound to an action.

Default Styling

By default, button and button like input elements are styled automatically to be contained-like buttons. This button style is not recommended for use but is provided as an improvement on the default styles.

Styles

Buttons have three styles to allow for different levels of prominance. Button content must be wrapped in a div.

Icon Only

Buttons are rendered differently when given the icon class.

Floating Action Button

Floating action buttons are clickable controls which can be bound to an action.

Styles

There are three variants of FAB.

Snackbar

A snackbar temporarily displays a message.

Styles

Snackbars contain one or two lines of text and an optional action.

Snackbar
Snackbar with action
Snackbar with action
on two lines

Tooltip

A tooltip temporarily displays a message on hover.

Styles

Tooltips contain a single line of text.

Tooltip
Tooltip

Checkbox

A tooltip temporarily displays a message on hover.

Styles

Tooltips contain a single line of text.

Radiobutton

A tooltip temporarily displays a message on hover.

Styles

Tooltips contain a single line of text.

Containers

Card

A card is a raised container for content.

Styles

Card
Interactive card