---
layout : 'default'
css    : 'header'

title  : 'Header'
type   : 'UI Element'
---
<div class="segment">
  <div class="container">
  <h1 class="ui dividing header">Header</h1>
  <p>Headers provide a short summary of content</p>
  </div>
</div>
<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Standard</a>
      <a class="item">States</a>
      <a class="item">Variations</a> 
    </div>
  </div>
  <h2 class="ui dividing header">Standard</h2>
  
  <div class="example">
    <h4 class="ui header">Header</h4>
    <p>A simple header</p>
    <h2 class="ui header">
      Account Settings
    </h2>
  </div>

  <div class="example">
    <h4 class="ui header">Descriptive Headers</h4>
    <p>Headers may have sub headers containing further context to the section</p>
    <h2 class="ui header">
      <i class="settings icon"></i> Account Settings
      <div class="sub header">Manage your account settings and set e-mail preferences.</div>
    </h2>
  </div>

  <div class="example">
    <h4 class="ui header">Page Headings</h4>
      <p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p>
    <div class="ui segment">
      <h1 class="ui header">First header</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      <h2 class="ui header">Second header</h2>
      <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      <h3 class="ui header">Third header</h3>
      <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
      <h4 class="ui header">Fourth header</h4>
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
      <h5 class="ui header">Fifth header</h5>
      <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
    </div>
    <div class="ui secondary font menu">
      <a class="increase item"> <i class="icon green plus"></i> Base Font</a>
      <a class="decrease item"> <i class="icon red minus"></i> Base Font</a>
    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Content Headings</h4>
    <p>Headers may be oriented to give the importance of a section in the context of the content that surrounds it</p>
    <div class="ui segment">
      <div class="ui huge header">Huge Header</div>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      <div class="ui large header">Large Header</div>
      <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      <div class="ui medium header">Medium Header</div>
      <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
      <div class="ui small header">Small Header</div>
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
      <div class="ui tiny header">Tiny Header</div>
      <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
    </div>
    <div class="ui secondary font menu">
      <a class="increase item"> <i class="icon green plus"></i> Base Font</a>
      <a class="decrease item"> <i class="icon red minus"></i> Base Font</a>
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>
  
  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>A header can show that it is inactive</p>
    <div class="ui disabled header">
      Disabled Header
    </div>
  </div>
  
  <h2 class="ui dividing header">Variations</h2>
  
  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>A header can be formatted to emphasize an icon</p>
    <h1 class="ui icon header">
      <i class="icon mail"></i>
      Message Anyone
    </h1>
  </div>
  
  <div class="example">
    <h4 class="ui header">Floating</h4>
    <p>A header can sit to the left or right of other content</p>
    <div class="ui segment">
      <h3 class="ui right floated header">
        Go Forward
      </h3>
      <h3 class="ui left floated header">
        Go Back
      </h3>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Text Alignment</h4>
    <p>A header can have its text aligned to a side</p>
    <div class="ui segment">
      <h3 class="ui right aligned header">
        Right
      </h3>
      <h3 class="ui left aligned header">
        Left
      </h3>
      <h3 class="ui center aligned header">
        Center
      </h3>
    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Colors</h4>
    <p>A header can be formatted with different colors</p>
    <h5 class="ui black header">
      Black
    </h5>
    <h5 class="ui blue header">
      Blue
    </h5>
    <h5 class="ui red header">
      Red
    </h5>
    <h5 class="ui green header">
      Green
    </h5>
    <h5 class="ui purple header">
      Purple
    </h5>
    <h5 class="ui teal header">
      Teal
    </h5>
  </div>

  <div class="example">
    <h4 class="ui header">Dividing</h4>
    <p>A header can be formatted to divide itself from the content below it</p>
    <h5 class="ui dividing header">
      Dividing
    </h5>
    <h5 class="ui black dividing header">
      Black
    </h5>
    <h5 class="ui blue dividing header">
      Blue
    </h5>
    <h5 class="ui red dividing header">
      Red
    </h5>
    <h5 class="ui green dividing header">
      Green
    </h5>
    <h5 class="ui purple dividing header">
      Purple
    </h5>
    <h5 class="ui teal dividing header">
      Teal
    </h5>
  </div>


  <div class="another example">
    <h5 class="ui black block header">
      Black
    </h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h5 class="ui blue block header">
      Blue
    </h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h5 class="ui red block header">
      Red
    </h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h5 class="ui green block header">
      Green
    </h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h5 class="ui purple block header">
      Purple
    </h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h5 class="ui teal block header">
      Teal
    </h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
  
  
  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A header can have its colors inverted for contrast</p>
    <h5 class="ui inverted black header">
      Black
    </h5>
    <h5 class="ui inverted blue header">
      Blue
    </h5>
    <h5 class="ui inverted red header">
      Red
    </h5>
    <h5 class="ui inverted green header">
      Green
    </h5>
    <h5 class="ui inverted purple header">
      Purple
    </h5>
    <h5 class="ui inverted teal header">
      Teal
    </h5>
  </div>
  <div class="another example">
    <h3 class="ui black inverted block header">
      Black
    </h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h3 class="ui blue inverted block header">
      Blue
    </h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h3 class="ui red inverted block header">
      Red
    </h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h3 class="ui green inverted block header">
      Green
    </h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h3 class="ui purple inverted block header">
      Purple
    </h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <h3 class="ui teal inverted block header">
      Teal
    </h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
  
  <div class="example">
    <h4 class="ui header">Attached</h4>
    <p>A header can be attached to other content</p>
    <h3 class="ui top attached header">
      Sign Up For Our Site
    </h3>
    <div class="ui segment attached">
      <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
    </div>
    <h3 class="ui bottom attached header">
      Thanks
    </h3>
    
  </div>
</div>