Menu
Header
UI Docs
Globals
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
Card Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Modal Popup Progress Search Shape Sidebar Sticky Tab Transition

Header

Header

Types
Page HeadersContent HeadersIcon HeadersSub Headers
Content
ImageIconSubheader
States
Disabled
Variations
DividingBlockAttachedFloatingText AlignmentColoredInverted

Types

Page Headers

Headers may be oriented to give the hierarchy of a section in the context of the page

Page headings are sized using rem and are not affected by surrounding content size.

First header

Second header

Third header

Fourth header

Fifth header

Content Headers

Headers may be oriented to give the importance of a section in the context of the content that surrounds it

Content headings are sized with em and are based on the font-size of their container.
Huge Header
Large Header
Medium Header
Small Header
Tiny Header

Icon Headers

A header can be formatted to emphasize an icon

Account Settings
Manage your account settings and set e-mail preferences.

Friends

Sub Headers

Headers may be formatted to label smaller or de-emphasized content.

Price

$10.99
Molly
Coordinator
Elyse
Developer
Eve
Project Manager

Content

Image

A header may contain an image

Learn More

Patrick

Plug-ins
Check out our plug-in marketplace

Icon

A header may contain an icon

Uptime Guarantee

Account Settings
Manage your preferences

Subheader

Headers may contain subheaders

Account Settings
Manage your account settings and set e-mail preferences.

H1
Sub Header

H2
Sub Header

H3
Sub Header

H4
Sub Header

H5
Sub Header

States

Disabled

A header can show that it is inactive

Disabled Header

Variations

Dividing

A header can be formatted to divide itself from the content below it

Dividing Header

Block

A header can be formatted to appear inside a content block

Block Header

Attached

A header can be attached to other content, like a segment

Top Attached

Attached

Bottom Attached

Floating

A header can sit to the left or right of other content

Go Forward

Go Back

Text Alignment

A header can have its text aligned to a side

Right

Left

This should take up the full width even if only one line

Center

Colored

A header can be formatted with different colors

Red

Orange

Yellow

Olive

Green

Teal

Blue

Purple

Violet

Pink

Brown

Grey

Inverted

A header can have its colors inverted for contrast

Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background

Red

Orange

Yellow

Olive

Green

Teal

Blue

Purple

Violet

Pink

Brown

Grey

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