.icon

.colors

bg-base-0

bg-base-1

bg-base-2

bg-base-3

bg-base-content

bg-primary-1

bg-secondary-1

bg-success-1

bg-warning-1

bg-danger-1

bg-primary-2

bg-secondary-2

bg-success-2

bg-warning-2

bg-danger-2

bg-hr

bg-disabled

bg-incident

bg-exercise

bg-event

.a

Default Link External Link Unstyled Link

.input

A text field

With a hint.

Remember me

A hint under a checkbox can be very useful.

A select field with width auto sized

This is the hint for a select field.

Text area

Copy the attendance record from an exported CSV file in Excel and paste into this text area.

It can even have formatted text

And this is text right after a text area

A field with an error

is invalid

.table

	A header can span multiple columns
	Name	Age in years
	Alice in Wonderland looking through the looking glass	9
	Bob	42
	Carol	33
	Doug	104

.btn and .form_actions

[707, 931, 776, 841, 870, 593, 161, 458, 394, 127, 186]

Examples of all button styles but the app mainly uses the default, success, link, and danger.

Log in Sign up for FREE

.badge

Default Primary Secondary Success Warning Danger Primary Hours Secondary Hours

.typography

This is a .title-hero

This is a .title

This is .lead text inside a p tag.

This is another paragraph of text.

This is a .heading element

This is a paragraph of text. Paragraphs have a bottom margin.

This is a .subheading element

This is a paragraph of text inside a div block with styled with .paragraph.