Menu
All UI
UI Docs
Getting Started New in 2.4
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Advertisement Card Comment Feed Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition
Behaviors
API Form Validation Visibility

All UI
Examples of all user interface elements

Elements Collections Views Modules

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

Flag

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
Label

Label

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

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
Link Link Link Link Link
Selection Selection Selection Selection Selection
Header
Description
Sub-header
Sub-header
Sub-header
Header
Description
Header
Description
Getting Started Introduction
Languages
HTML Javascript CSS
Review
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...












Reveal

Segment

Step

Step
Description
Step
Description
Previous Step
Description
Active Step
Description
Disabled Step
Description
Previous Step
Description
Active Step
Description
Disabled Step
Description

Collections

Breadcrumb

Home
/
Store
/
T-Shirt
Home Registration
Personal Information

Form

Select
Choice 1
Choice 2

Sub-header

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

Error message long description

Submit

Grid

Menu

A B C
A B
1
Tab Tab
A B C
A B C
A B C
A B C
A B C

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
Meta
One or two sentence description that may go to several lines
Arbitrary Arbitrary
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
Username added new photos
You wrote something
Time period ago
Blockquote
Metadata Metadata
You uploaded a photo
Time period ago
Metadata Metadata
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
Date Category
A description which may flow for several lines and give context to the content.
Username
Content Header
Date Category
A description which may flow for several lines and give context to the content.
Primary
Limited
Content Header
Date Category
A description which may flow for several lines and give context to the content.
Primary
Content Header
A description which may flow for several lines and give context to the content.
Content Header
A description which may flow for several lines and give context to the content.
Content Header
A description which may flow for several lines and give context to the content.

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

Menu Item
Menu Item
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

Select Language
Arabic
Chinese
Danish
Dutch
English
French
German
Greek
Hungarian
Italian
Japanese
Korean
Lithuanian
Persian
Polish
Portuguese
Russian
Spanish
Swedish
Turkish
Vietnamese
Select Country
Andorra
U.A.E
Afghanistan
Antigua
Anguilla
Albania
Armenia
Netherlands Antilles
Angola
Argentina
American Samoa
Austria
Australia
Aruba
Aland Islands
Azerbaijan
Bosnia
Barbados
Bangladesh
Belgium
Burkina Faso
Bulgaria
Bahrain
Burundi
Benin
Bermuda
Brunei
Bolivia
Brazil
Bahamas
Bhutan
Bouvet Island
Botswana
Belarus
Belize
Canada
Cocos Islands
Congo
Central African Republic
Congo Brazzaville
Switzerland
Cote Divoire
Cook Islands
Chile
Cameroon
China
Colombia
Costa Rica
Serbia
Cuba
Cape Verde
Christmas Island
Cyprus
Czech Republic
Germany
Djibouti
Denmark
Dominica
Dominican Republic
Algeria
Ecuador
Estonia
Egypt
Western Sahara
Eritrea
Spain
Ethiopia
European Union
Finland
Fiji
Falkland Islands
Micronesia
Faroe Islands
France
Gabon
United Kingdom
Grenada
Georgia
French Guiana
Ghana
Gibraltar
Greenland
Gambia
Guinea
Guadeloupe
Equatorial Guinea
Greece
Sandwich Islands
Guatemala
Guam
Guinea-Bissau
Guyana
Hong Kong
Heard Island
Honduras
Croatia
Haiti
Hungary
Indonesia
Ireland
Israel
India
Indian Ocean Territory
Iraq
Iran
Iceland
Italy
Jamaica
Jordan
Japan
Kenya
Kyrgyzstan
Cambodia
Kiribati
Comoros
Saint Kitts and Nevis
North Korea
South Korea
Kuwait
Cayman Islands
Kazakhstan
Laos
Lebanon
Saint Lucia
Liechtenstein
Sri Lanka
Liberia
Lesotho
Lithuania
Luxembourg
Latvia
Libya
Morocco
Monaco
Moldova
Montenegro
Madagascar
Marshall Islands
MacEdonia
Mali
Burma
Mongolia
MacAu
Northern Mariana Islands
Martinique
Mauritania
Montserrat
Malta
Mauritius
Maldives
Malawi
Mexico
Malaysia
Mozambique
Namibia
New Caledonia
Niger
Norfolk Island
Nigeria
Nicaragua
Netherlands
Norway
Nepal
Nauru
Niue
New Zealand
Oman
Panama
Peru
French Polynesia
New Guinea
Philippines
Pakistan
Poland
Saint Pierre
Pitcairn Islands
Puerto Rico
Palestine
Portugal
Palau
Paraguay
Qatar
Reunion
Romania
Serbia
Russia
Rwanda
Saudi Arabia
Solomon Islands
Seychelles
Sudan
Sweden
Singapore
Saint Helena
Slovenia
Svalbard, I Flag Jan Mayen
Slovakia
Sierra Leone
San Marino
Senegal
Somalia
Suriname
Sao Tome
El Salvador
Syria
Swaziland
Caicos Islands
Chad
French Territories
Togo
Thailand
Tajikistan
Tokelau
Timorleste
Turkmenistan
Tunisia
Tonga
Turkey
Trinidad
Tuvalu
Taiwan
Tanzania
Ukraine
Uganda
Us Minor Islands
United States
Uruguay
Uzbekistan
Vatican City
Saint Vincent
Venezuela
British Virgin Islands
Us Virgin Islands
Vietnam
Vanuatu
Wallis and Futuna
Samoa
Yemen
Mayotte
South Africa
Zambia
Zimbabwe
Filter Posts
Filter
Tag A
Tag B
Tag C
Tag D
Show me posts trending
today
Today
This Week
This Month
Filter by tag
Important
Announcement
Discussion
Home
Shopping
Categories
Clothing
Mens
Shirts
Pants
Jeans
Shoes
Womens
Dresses
Shoes
Bags
Home Goods
Bedroom
Order
Status
Cancellations
Forums Contact Us
Home
Messages
Inbox
Starred
Sent Mail
Drafts (143)
Spam (1009)
Trash
Browse Help
Edit User
Remove User
Make Invisible
Edit Group
Remove Group
Hide from Group
Edit
Remove
Hide

Modal

Standard Modal
Basic Modal
Full-Screen Modal
Profile Picture
We've auto-chosen a profile image for you.

We've grabbed the following image from the gravatar image associated with your registered e-mail address.

Is it okay to use this photo?

Nope
Yep, that's me
Archive Old Messages

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

No
Yes
Update Your Settings

Give us your feedback

Cancel
Send

Popup

Fluid Popup
1
2
3
4
HTML Content
Basic Popup
Basic pop-up
Small
Small pop-up
Large
Large pop-up
Inverted
Link Popup Link

Fabrics

Cashmere Linen Cotton Viscose

Sizes

Small Medium Large Plus Sizes

Colors

Neutrals Brights Pastels

Types

Knitwear Outerwear Pants Shoes

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

Left
Right
Top
Bottom
Animation
Overlay
Push
Scale Down
Horizontal-Only Animation
Uncover
Slide Along
Slide Out
File Permissions Share on Social Share by E-mail Edit Permissions Delete Permanently
Home Topics Friends History Messages Discussions Achievements Store Settings

New Content Awaits

Home Topics Friends History Messages Discussions Achievements Store Settings

Tab

First Second Third
1A 1B 1C
1A
1B
1C
2A 2B 2C
2A
2B
2C
3A 3B 3C
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

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header