Menu

All UI
Examples of all user interface elements

Elements

Button

View
Add to Cart
Save for Later
Rate
Basic
Horizontal
Vertical
Fade In
Google Plus
1
2
3
Cancel
Save
Blue
Red
Teal
Blue
Red
Teal
Inverted
Blue
Red
Basic
Blue
Red
Feed
Messages
Events
Photos
1
2
3

Divider

A
and
B
A
or
B
Specifications

A

B

Header

H1

H2

H3

H4

H5
Icon Header
Sub-header
Header
Sub-header
Block
Sub-header
Dividing
Sub-header
Color
Sub-header
Attached
Attached

Icon

Image

User Avatar

Input

Search
http://

Label

email@address.com
Some Name Group Icon Tag
Pointing Label
Pointing below label
Top Labeled
Bottom Labeled
Top Left
Top Right
Bottom Left
Bottom Right

List

Header
Description
Sub Header
Sub Description
Sub Header
Sub Description
Header
Description
Sub Header
Sub Description
Sub Header
Sub Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Sub-header
Sub-header
Sub-header
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Steve Jobes
50 Points
Stevie Feliciano
44 Points
Jenny Hess
11 Points

Loader

























Loading






Loading






Loading






Loading






























Loading






Loading






Loading






Loading






Preparing...












Collections

Breadcrumb

Form

Sub-header

Submit
Warning Message
  • Problem #1
  • Problem #2
Submit
Error Message

Error message long description

Submit

Grid

Menu

Message

Closable message
Warning Message
  • List item
  • List item
List Message
  • List item 1
  • List item 2
  • List item 3
Info Message

Example description

Positive Message

Example description

Negative Message

Example description

Top attached
Bottom attached

Table

Files
folder Comment 10 hours ago
folder2 Comment 10 hours ago
folder3 Comment 10 hours ago
package.json Comment 10 hours ago
Gruntfile.js Comment 10 hours ago
Header 1 Header 2
Definition 1A 1B
Definition 2A 2B
Name Registration Date E-mail address Premium Plan
Primary
Button
Disabled
Name Status Notes
User 1 Value Comment
User 1 Selected Data
User 1 Value Comment
User 2 Value Data
User 1 Value Warning
User 3 Value Data
User 1 Value Positive
User 2 Warning Data
User 2 Positive Data
User 2 Value Data
Name Status Notes
User 1 Data Data
User 3 Data Data
User 2 Denied Data
Footer Footer

Views

Card

Add Friend
Title
One or two sentence description that may go to several lines
Abbreviated Header
Short Description
Action 1
Action 2

Feed

Username added you as a friend
You added Username to the group Group Name
Time period ago
You wrote something
Time period ago
Blockquote
You uploaded a photo
Time period ago
Elliot Fu added Jenny Hess as a friend
Stevie Feliciano added Elliot Fu as a friend
Helen Troy added Christian Rocha as a friend
Christian Rocha signed up for the site.

Item

Content Header
A description which may flow for several lines and give context to the content.
Username
Content Header
A description which may flow for several lines and give context to the content.
Primary
Limited
Content Header
A description which may flow for several lines and give context to the content.
Primary

Statistic

Top Label
4:05
22
Bottom Label
Eighty
Two
Text
5
Labeled Icon
22
Horizontal Label
51
Horizontal Label
81
Horizontal Label

Modules

Accordion

FAQ Question 1?
FAQ Question 2?
FAQ Question 3?
Title
Title
Title

Checkbox

Dimmer

Dimmable Section

Inverted Dimmer

Dimmer With Content

Dimmed Message!

Page Dimmer

Dropdown

Show me posts trending

Modal

Standard Modal
Basic Modal
Full-Screen Modal

Popup

Progress

Uploading Files
Funding

Rating

Choice #1
Choice #2
Choice #3
Content Header
A description which may flow for several lines and give context to the content.
11
Content Header
A description which may flow for several lines and give context to the content.
42
Content Header
A description which may flow for several lines and give context to the content.
16

Search

Shape

1
2
3
4
5
6
Did you know? This side starts visible.
Help, its another side!
This is the last side

Sidebar

Tab

1A
1B
1C
2A
2B
2C
3A
3B
3C

Transition

Flash
Shake
Pulse
Tada
Bounce
Drop
Browse
Horizontal Flip
Vertical Flip
Fade
Fade Up
Fade Down
Scale
Slide Down
Slide Up

Dimmer Message
Dimmer sub-header