Typography

Page Headers

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

First header

Second header

Third header

Fourth header

Fifth header
    
<h1 class="ui header">First header</h1>
<h2 class="ui header">Second header</h2>
<h3 class="ui header">Third header</h3>
<h4 class="ui header">Fourth header</h4>
<h5 class="ui header">Fifth header</h5>
    

Content Headers

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

Huge Header

Large Header

Medium Header

Small Header

Tiny Header

    
<div class="ui huge header">Huge Header</div>
<p></p>
<div class="ui large header">Large Header</div>
<p></p>
<div class="ui medium header">Medium Header</div>
<p></p>
<div class="ui small header">Small Header</div>
<p></p>
<div class="ui tiny header">Tiny Header</div>
<p></p>
    

Icon Headers

A header can be formatted to emphasize an icon

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

    
<h2 class="ui icon header">
    <i class="settings icon"></i>
    <div class="content">
        Account Settings
        <div class="sub header">Manage your account settings and set e-mail preferences.</div>
    </div>
</h2>
    

Friends

    
<h2 class="ui center aligned icon header">
    <i class="circular users icon"></i>
    Friends
</h2>
    

Image

A header may contain an image

Learn More

    
<h2 class="ui header">
    <img class="ui image" src="https://semantic-ui.com/images/icons/school.png">
    <div class="content">
        Learn More
    </div>
</h2>
    

Patrick

    
<h2 class="ui header">
    <img src="https://semantic-ui.com/images/avatar2/large/patrick.png" class="ui circular image">
    Patrick
</h2>
    

Plug-ins
Check out our plug-in marketplace

    
<h2 class="ui header">
    <img src="https://semantic-ui.com/images/icons/plugin.png">
    <div class="content">
        Plug-ins
        <div class="sub header">Check out our plug-in marketplace</div>
    </div>
</h2>