Semantic Examples

Hello, world!

This template contains examples of simple Semantic elements. Read the docs for more information.

Learn more »

Buttons

Default Primary Basic Success Error

Unbelievable Breadth

Definitions aren't limited to just buttons on a page. Semantic's components allow several distinct types of definitions: elements, collections, views, modules and behaviors which cover the gamut of interface design.

See Layout Examples

Menu

Inbox
1
 Trash
1
Tab Tab
Inbox Starred Trash
Inbox Starred Trash

Divider

A
or
B

Accordion

Size
Colors

Message

This site uses cookies
Looking for help?
We're creating your profile page

It will be ready in just a second.

Card

Add Friend
Rachel Maddaw
Pundit
Joined in 1998 22 Friends

Feed

Mark added you as a friend
You added Lena to the group Close Friends
Eve just posted on your page

Label

molly@thebears.com
23 New Dresses

Step

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Dropdown

Select Country
Andorra
United Arab Emirates
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
England
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
Tag Label
Important
Announcement
Cannot Fix
News
Enhancement
Change Declined
Off Topic
Interesting
Discussion

Segment

Input

Search
http://
Add Tags

Checkbox

Responsively Designed

Semantic is designed completely with em making responsive sizing a breeze. Design variations built into elements allow you to make the choice how content adjusts for tablet and mobile.

Responsive Examples

Partners with Libraries You Love

Semantic has integrations with React, Angular, Meteor, Ember and many other frameworks to help organize your UI layer alongside your application logic.

See Integrations

Liberate your Development

Enterprise Ready

Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritance—a developer's dream.

Get Started Now


Thumbnails

Badges

One 2
Two 2
Three 2

Tables

Name Premium Plan
John No
Jamie Yes
Jill Yes
Name Premium Plan
John No
Jamie Yes
Jill Yes
Name Premium Plan
John No
Jamie Yes
Jill Yes
Name Premium Plan
John No
Jamie Yes
Jill Yes
Name Type Files Languages
Ruby JavaScript Python
Alpha Team Project 1 2
Beta Team Project 1 52
Project 2 12
Project 3 21

Alerts

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

List groups

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

Cras justo odio

Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panels

One
Two
Three
One
Two
Three
One
Two
Three
Error
Panel content
Info
Panel content
Success
Panel content

Header

Panel content

Header

Panel content

Header

Panel content

Wells

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.