Semantic-UI themeHomeAboutContact
Dropdown
ActionAnother actionSomething else here
Nav header
Separated linkOne more separated link
Theme example

This is a template showcasing the optional theme stylesheet included in Semantic-UI. Use it as a starting point to create something more unique by building on or modifying it.

Buttons

Default
Primary
Success
Teal
Warning
Danger
Link

Default
Primary
Success
Teal
Warning
Danger
Link

Default
Primary
Success
Teal
Warning
Danger
Link

Default
Primary
Success
Teal
Warning
Danger
Link

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Tdornton @fat
3 Larry tde Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Tdornton @fat
3 Larry tde Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @mdo
2 Jacob Tdornton @fat
3 Larry tde Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Tdornton @fat
3 Larry tde Bird @twitter

Thumbnails

Labels

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Badges

Inbox
42

Dropdown menus

ActionAnother actionSomething else here
Separated link

Navs

HomeProfileMessages
HomeProfileMessages

Navbars

Project nameHomeAboutContact
Dropdown
ActionAnother actionSomething else here
Nav header
Separated linkOne more separated link
Project NameHomeAboutContact
Dropdown
ActionAnother actionSomething else here
Nav header
Separated linkOne more separated link

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.

Progress bars

List groups

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

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

Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
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.