CSS usage examples

Typography

h1. heading

h2. heading

h3. heading

h4. heading

p. Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas libero. Aliquam erat volutpat. Integer lacinia. Nulla non lectus sed nisl molestie malesuada. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Etiam quis quam. Maecenas aliquet accumsan leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Pellentesque sapien. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Pellentesque arcu.

Buttons

Default button

Secondary button

Destructive button

Default button - inverted

Secondary button - inverted

Destructive button - inverted

Button with icon

Small buttons

Block buttons

Checkboxes and Radio buttons

Inverted options

Dropdown

Default dropdown

Disabled dropdown

Dropdown has error

Dropdown menu

Mutli select

Barista
Select options
Personas
Coffee expert
Barista
Cafe owner
Coffee enthusiast
Coffee lover
Coffee blogger
Processing
Wet (Washed)
Dry (Natural)

Inputs

Editable input

Draggable input

Invalid input

Read-only with button

Status indicator

Required Required Required Not translated

Switch

Active

Tree