Damstra logo Damstra UX hub
Back to Core UI design principles

Atoms

Next: Molecules
Typography & badges
Headings Text elements Icon with text Lists Badges
Buttons & links
Buttons Icon only buttons Text links
Form elements
Labels & legends Text & number inputs Select inputs File inputs
Tables
Tables
Back

Headings

h1 example

h1 example

h1

Used for page titles

Copy HTML

Styles

h2 example

h2 example

h2

Copy HTML

h3 example

h3 example

h3

Copy HTML

h4 example

h4 example

h4

Copy HTML

h5 example
h5 example

h5

Copy HTML

h6 example
h6 example

h6

Copy HTML

Headings with icons

h2 with success icon

h2

h2 with success icon

Copy HTML

h2 with danger icon

h2

h2 with danger icon

Copy HTML

h2 with warning icon

h2

h2 with warning icon

Copy HTML

h2 with inactive icon

h2

h2 with inactive icon

Copy HTML

h2 with highlight icon

h2

h2 with highlight icon

Copy HTML

h2 with brand two icon

h2

h2 with brand two icon

Copy HTML

h3 with success icon

h3

h3 with success icon

Copy HTML

h3 with danger icon

h3

h3 with danger icon

Copy HTML

h3 with warning icon

h3

h3 with warning icon

Copy HTML

h3 with inactive icon

h3

h3 with inactive icon

Copy HTML

h3 with highlight icon

h3

h3 with highlight icon

Copy HTML

h3 with brand two icon

h3

h3 with brand two icon

Copy HTML

h4 with success icon

h4

h4 with success icon

Copy HTML

h4 with danger icon

h4

h4 with danger icon

Copy HTML

h4 with warning icon

h4

h4 with warning icon

Copy HTML

h4 with inactive icon

h4

h4 with inactive icon

Copy HTML

h4 with highlight icon

h4

h4 with highlight icon

Copy HTML

h4 with brand two icon

h4

h4 with brand two icon

Copy HTML

h5 with success icon
h5

h5 with success icon

Copy HTML

h5 with danger icon
h5

h5 with danger icon

Copy HTML

h5 with warning icon
h5

h5 with warning icon

Copy HTML

h5 with inactive icon
h5

h5 with inactive icon

Copy HTML

h5 with highlight icon
h5

h5 with highlight icon

Copy HTML

h5 with brand two icon
h5

h5 with brand two icon

Copy HTML

h6 with success icon
h6

h6 with success icon

Copy HTML

h6 with danger icon
h6

h6 with danger icon

Copy HTML

h6 with warning icon
h6

h6 with warning icon

Copy HTML

h6 with inactive icon
h6

h6 with inactive icon

Copy HTML

h6 with highlight icon
h6

h6 with highlight icon

Copy HTML

h6 with brand two icon
h6

h6 with brand two icon

Copy HTML

Loading...

Text elements

HTML text elements

p example

A standard paragraph example

p

Copy HTML

strong example
Strong text

strong

Copy HTML

em example
Emphasised text

em

Copy HTML

Abbreviation example
HTML

Abbreviation

Copy HTML

Small example
Small text

Small

Copy HTML

Other text elements

Price example
AUD $0.00

Price

Copy HTML

Text stack example
[First row] [Second row]

Text stack

Copy HTML

Employee example
Doe, John ID: 123456

Employee

Copy HTML

New employee example
New employee Doe, John

New employee example

Copy HTML

Employee link example
[Surname], First ID: 123456

Employee

Copy HTML

Visitor example
Doe, John Visitor

Visitor example

Copy HTML

Visitor with company example
Doe, John [Company name] Visitor

Visitor with company example

Copy HTML

Asset example
[Asset description] - [Asset code]

Asset

Copy HTML

New asset example
New asset [Asset description] - [Asset code]

Asset

Copy HTML

Asset link example
[Asset description] - [Asset code]

Asset

Copy HTML

Loading...

Icon with text

Success example
[Message]

Icon text success

Copy HTML

Danger example
[Message]

Icon text danger

Copy HTML

Warning example
[Message]

Icon text warning

Copy HTML

Inactive example
[Message]

Icon text inactive

Copy HTML

Highlight example
[Message]

Icon text highlight

Copy HTML

Brand two example
[Message]

Icon text brand two

Copy HTML

Success smaller example
[Message]

Icon text smaller success

Copy HTML

Danger smaller example
[Message]

Icon text smaller danger

Copy HTML

Warning smaller example
[Message]

Icon text smaller warning

Copy HTML

Inactive smaller example
[Message]

Icon text smaller inactive

Copy HTML

Highlight smaller example
[Message]

Icon text smaller highlight

Copy HTML

Brand two smaller example
[Message]

Icon text smaller brand two

Copy HTML

Success larger icon example
[Message]

Icon text larger success

Copy HTML

Danger larger icon example
[Message]

Icon text larger danger

Copy HTML

Warning larger icon example
[Message]

Icon text larger warning

Copy HTML

Inactive larger icon example
[Message]

Icon text larger inactive

Copy HTML

Highlight larger icon example
[Message]

Icon text larger highlight

Copy HTML

Brand two larger icon example
[Message]

Icon text larger brand two

Copy HTML

Success smaller with larger icon example
[Message]

Icon text smaller larger icon success

Copy HTML

Danger smaller with larger icon example
[Message]

Icon text smaller larger icon danger

Copy HTML

Warning smaller with larger icon example
[Message]

Icon text smaller larger icon warning

Copy HTML

Inactive smaller with larger icon example
[Message]

Icon text smaller larger icon inactive

Copy HTML

Highlight smaller with larger icon example
[Message]

Icon text smaller larger icon highlight

Copy HTML

Brand two smaller with larger icon example
[Message]

Icon text smaller larger icon brand two

Copy HTML

With titles

Success example
[Message]

Icon text success with title

Copy HTML

Danger example
[Message]

Icon text danger with title

Copy HTML

Warning example
[Message]

Icon text warning with title

Copy HTML

Inactive example
[Message]

Icon text inactive with title

Copy HTML

Highlight example
[Message]

Icon text highlight with title

Copy HTML

Brand two example
[Message]

Icon text brand two with title

Copy HTML

Loading...

Lists

Unordered list example
  • List item
  • List item
  • List item

Unordered list

Copy HTML

Ordered list example
  1. List item
  2. List item
  3. List item

Ordered list

Copy HTML

Plain list example
  • List item
  • List item
  • List item

Plain list

Copy HTML

Bordered list example
  • List item
  • List item
  • List item

Plain list

Copy HTML

Inline list example
  • List item
  • List item
  • List item

Inline list

Copy HTML

Definition list example
Definition term
Definition
Definition term two
Definition

Definition list

Copy HTML

Inline definition list example
Definition term
Definition
Definition term two
Definition

Inline definition list

Copy HTML

Definition list columns example
Definition term
Definition
Definition term two
Definition
Definition term
Definition
Definition term two
Definition
Definition term
Definition
Definition term two
Definition

Definition list in columns

Copy HTML

Loading...

Badges

Smaller text badges

Success text badge
Success

Success text badge

Copy HTML

Danger text badge
Danger

Danger text badge

Copy HTML

Warning text badge
Warning

Warning text badge

Copy HTML

Info text badge
Info

Info text badge

Copy HTML

Highlight text badge
Highlight

Highlight text badge

Copy HTML

Secondary text badge
Secondary

Secondary text badge

Copy HTML

Secondary filled text badge
Secondary

Secondary filled text badge

Copy HTML

Larger text badges

Success larger text badge
Success

Success larger text badge

Copy HTML

Danger larger text badge
Danger

Danger larger text badge

Copy HTML

Warning larger text badge
Warning

Warning larger text badge

Copy HTML

Info larger text badge
Info

Info larger text badge

Copy HTML

Highlight larger text badge
Highlight

Highlight larger text badge

Copy HTML

Secondary larger text badge
Secondary

Secondary larger text badge

Copy HTML

Secondary filled larger text badge
Secondary

Secondary filled larger text badge

Copy HTML

Smaller text badges with tooltips

Success text badge
Success

Success text badge

Copy HTML

Danger text badge
Danger

Danger text badge

Copy HTML

Warning text badge
Warning

Warning text badge

Copy HTML

Info text badge
Info

Info text badge

Copy HTML

Highlight text badge
Highlight

Highlight text badge

Copy HTML

Secondary text badge
Secondary

Secondary text badge

Copy HTML

Secondary filled text badge
Secondary

Secondary filled text badge

Copy HTML

Number badges

Success number badge
10

Success number badge

Copy HTML

Danger number badge
10

Danger number badge

Copy HTML

Warning number badge
10

Warning number badge

Copy HTML

Info number badge
10

Info number badge

Copy HTML

Highlight number badge
10

Highlight number badge

Copy HTML

Secondary number badge
10

Secondary number badge

Copy HTML

Secondary filled number badge
10

Secondary filled number badge

Copy HTML

Loading...

Buttons

As a general rule, all buttons are right aligned

Primary buttons

Used for accessing the 'create new' pages, proceeding to the next step, saving forms and any essential actions.

Primary action buttons are always right aligned.

Primary button

Primary button

Copy HTML

Primary button disabled

Primary button disabled

Copy HTML

Primary button with icon

Primary button with icon

Copy HTML

Primary button with icon after

Primary button with icon after

Copy HTML

Primary button

Primary button

Copy HTML

Primary button disabled

Primary button disabled

Copy HTML

Primary button with icon

Primary button with icon

Copy HTML

Primary button with icon after

Primary button with icon after

Copy HTML

Secondary buttons

Used for additional actions that are not the primary action

Secondary button

Secondary button

Copy HTML

Secondary button disabled

Secondary button disabled

Copy HTML

Secondary button with icon

Secondary button with icon

Copy HTML

Secondary button with icon after

Secondary button with icon after

Copy HTML

Secondary button

Secondary button

Copy HTML

Secondary button disabled

Secondary button disabled

Copy HTML

Danger buttons

Used to confirm negative actions such as deleting or removing

Danger button

Danger button

Copy HTML

Danger button disabled

Danger button disabled

Copy HTML

Danger button with icon

Danger button with icon

Copy HTML

Danger button with icon after

Danger button with icon after

Copy HTML

Buttons variations

Secondary button danger with icon

Secondary button danger with icon

Copy HTML

Secondary dropdown button
Action
Action Action
Negative action Negative action

Secondary dropdown button

Copy HTML

Secondary button danger with icon

Secondary button danger with icon

Copy HTML

Secondary smaller dropdown button
Action
Action Action
Negative action Negative action

Secondary smaller dropdown button

Copy HTML

Loading...

Icon only buttons

Icon only button

Icon only button

Copy HTML

Icon only danger button

Icon only danger button

Copy HTML

Icon only button disabled

Icon only button disabled

Copy HTML

Icon only danger button disabled

Icon only danger button disabled

Copy HTML

Smaller icon buttons

Icon only button

Icon only button

Copy HTML

Icon only danger button

Icon only danger button

Copy HTML

Icon only button disabled

Icon only button disabled

Copy HTML

Icon only danger button disabled

Icon only danger button disabled

Copy HTML

Dropdown icon buttons

Icon dropdown button
Action
Action Action
Negative action Negative action

Icon dropdown button

Copy HTML

Icon dropdown button smaller
Action
Action Action
Negative action Negative action

Icon dropdown button smaller

Copy HTML

Tooltips

Tooltip button

Tooltip button

Copy HTML

Inline clear button

Inline clear button

Inline clear button

Copy HTML

Loading...

Text links

Text link
Text link

Text link

Copy HTML

Text link disabled
Text link

Text link disabled

Copy HTML

Text link with icon
Text link

Text link with icon

Copy HTML

Employee link
[Surname], First ID: 123456

Employee link

Copy HTML

File and date link
[File name] Added [2 May, 2018]

File and date link

Copy HTML

Disabled file and date link
[File name] Added [2 May, 2018]

Disabled file and date link

Copy HTML

Loading...

Labels & legends

Form labels

Ideally all form inputs will have labels

Form label

Form label

Copy HTML

Optional form label

Optional form label

Copy HTML

Form label with tooltip

Form label with tooltip

Copy HTML

Optional form label with tooltip

Optional form label with tooltip

Copy HTML

Form legend

Used to separate sections of a one page form

Form legend
[Form legend]

Form legend

Copy HTML

Loading...

Text & number inputs

Text fields

Text input

Text input

Copy HTML

Text input with placeholder

Text input with placeholder

Copy HTML

Text input disabled

Text input disabled

Copy HTML

Text input readonly

Text input readonly

Copy HTML

Number fields

Number fields bring up the number keypad on a touch devices

Number input

Number input

Copy HTML

Number input with placeholder

Number input with placeholder

Copy HTML

Number input disabled

Number input disabled

Copy HTML

Number input readonly

Number input readonly

Copy HTML

Number only fields

Number only fields bring up the number only keypad on a touch devices

Number only input

Number only input

Copy HTML

Number only input with placeholder

Number only input with placeholder

Copy HTML

Number only input disabled

Number only input disabled

Copy HTML

Number only input readonly

Number only input readonly

Copy HTML

Telephone fields

Telephone fields bring up the telephone keypad on a touch devices

Telephone input

Telephone input

Copy HTML

Telephone input with placeholder

Telephone input with placeholder

Copy HTML

Telephone input disabled

Telephone input disabled

Copy HTML

Telephone input readonly

Telephone input readonly

Copy HTML

Text areas

Textarea

Textarea

Copy HTML

Textarea placeholder

Textarea placeholder

Copy HTML

Textarea disabled

Textarea disabled

Copy HTML

Textarea readonly

Textarea readonly

Copy HTML

Email fields

Email input

Email input

Copy HTML

Email input disabled

Email input disabled

Copy HTML

Email input readonly

Email input readonly

Copy HTML

Password fields

Password input

Password input

Copy HTML

Password input disabled

Password input disabled

Copy HTML

Password input readonly

Password input readonly

Copy HTML

Date & time inputs

Date input

Date input

Copy HTML

Date input disabled

Date input disabled

Copy HTML

Date input readonly

Date input readonly

Copy HTML

Time input

Time input

Copy HTML

Time input disabled

Time input disabled

Copy HTML

Time input readonly

Time input readonly

Copy HTML

Input wizard

Input wizard

Input wizard

Copy HTML

Input wizard disabled

Input wizard disabled

Copy HTML

Input wizard readonly

Input wizard readonly

Copy HTML

Loading...

Select inputs

Select box

Select box
Loading...

Select box

Copy HTML

Select box with groups
Loading...

Select box with groups

Copy HTML

Disabled select box
Loading...

Disabled select box

Copy HTML

Readonly select box
Loading...

Readonly select box

Copy HTML

Select with search

Select with search
Loading...

Select with search

Copy HTML

Select with search and groups
Loading...

Select with search and groups

Copy HTML

Select with collapsible groups, and group name shown on select
Loading...

Select with collapsible groups, and group name shown on select

Copy HTML

Select with search disabled
Loading...

Select with search disabled

Copy HTML

Select with search readonly
Loading...

Select with search readonly

Copy HTML

Select with nested options
Loading...

Select with nested options

Copy HTML

Multi select

Multi select
Loading...

Multi select

Copy HTML

Multi select with groups
Loading...

Multi select with groups

Copy HTML

Multi select disabled
Loading...

Multi select disabled

Copy HTML

Multi select readonly
Loading...

Multi select readonly

Copy HTML

Multi select with clear buttons
Loading...

Multi select with clear buttons

Copy HTML

Multi select with groups and clear buttons
Loading...

Multi select with groups and clear buttons

Copy HTML

Multi select, badge style with clear buttons
Loading...

Multi select, badge style with clear buttons

Copy HTML

Multi select with a large data source
Loading...

Multi select with a large data source

Copy HTML

Multi select with a large data source, badge style
Loading...

Multi select with a large data source, badge style

Copy HTML

Checkboxes

Checkbox

Checkbox

Copy HTML

Checkbox with title

Checkbox with title

Copy HTML

Disabled checkbox

Disabled checkbox

Copy HTML

Readonly checkbox

Readonly checkbox

Copy HTML

Radios

Radio

Radio

Copy HTML

Radio with title

Radio with title

Copy HTML

Disabled radio

Disabled radio

Copy HTML

Readonly radio

Readonly radio

Copy HTML

Date selector

Future date selector
New Zealand (UTC +12hrs)

Future date selector

Copy HTML

Past date selector

Past date selector

Copy HTML

Disabled date selector

Disabled date selector

Copy HTML

Date range selector, with apply button

Date range selector, with apply button

Copy HTML

Date range selector, future dates

Date range selector, future dates

Copy HTML

Date range selector, any dates

Date range selector, any dates

Copy HTML

Color picker

Color picker

Color picker

Copy HTML

Loading...

File inputs

Drag and drop single file upload

Single file upload
Drop file here or click to upload

Single file upload

Copy HTML

Single file upload disabled
Drop file here or click to upload

Single file upload disabled

Copy HTML

Drag and drop multi file upload

Multi file upload
Drop files here or click to upload

Multiple file upload

Copy HTML

Multi file upload disabled
Drop files here or click to upload

Multiple file upload disabled

Copy HTML

Loading...

Tables

Table header

Table header
Column header Column header Column header
Loading...

Table header

Copy HTML

Sortable table header

Note, tables can only be sorted by one column at a time
Loading...

Sortable table header

Copy HTML

Table rows

Table row
Row header Cell content Cell content
Loading...

Table row

Copy HTML

Table row success
Row header Cell content Cell content
Loading...

Table row success

Copy HTML

Table row danger
Row header Cell content Cell content
Loading...

Table row danger

Copy HTML

Table row warning
Row header Cell content Cell content
Loading...

Table row warning

Copy HTML

Table row inactive
Row header Cell content Cell content
Loading...

Table row inactive

Copy HTML

Table row highlight
Row header Cell content Cell content
Loading...

Table row highlight

Copy HTML

Table row brandtwo
Row header Cell content Cell content
Loading...

Table row brandtwo

Copy HTML

Table row success shaded
Row header Cell content Cell content
Loading...

Table row success shaded

Copy HTML

Table row danger shaded
Row header Cell content Cell content
Loading...

Table row danger shaded

Copy HTML

Table row warning shaded
Row header Cell content Cell content
Loading...

Table row warning shaded

Copy HTML

Table row inactive shaded
Row header Cell content Cell content
Loading...

Table row inactive shaded

Copy HTML

Table row highlight shaded
Row header Cell content Cell content
Loading...

Table row highlight shaded

Copy HTML

Table row brandtwo shaded
Row header Cell content Cell content
Loading...

Table row brandtwo shaded

Copy HTML

Table totals row
Row header Cell content Cell content
Loading...

Table totals row

Copy HTML

Table cells

Shaded table cells
Row header Cell content Cell content Cell content Cell content Cell content
Loading...

Shaded table cells

Copy HTML

Cell content

Cell content text
Row header with small text Small text Left half mobile Right half mobile Centered Danger text Inactive text
Loading...

Cell content text

Copy HTML

Loading...
Loading...
Loading...
Loading...