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

element     : 'header'
elementType : 'element'

title       : 'Header'
description : 'A header provides a short summary of content'
type        : 'UI Element'

themes      : ['Default', 'Classic', 'Bookish', 'Chubby']
---

<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/header.less" />
<script src="/javascript/header.js"></script>

<div class="main container">

  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Header</h4>
    <p>A standard header</p>
    <h2 class="ui header">
      Account Settings
    </h2>
    <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
  </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">
      Account Settings
      <div class="sub header">Manage your account settings and set e-mail preferences.</div>
    </h2>
    <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
  </div>
  <div class="another example">
    <h2 class="ui 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>
    <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
  </div>

  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>A header can be formatted to emphasize an icon</p>
    <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>
    <img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
  </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="ignored info ui message">Page headings size themselves relative to the base font of the entire page not the surrounding text.</div>
    <div class="ui ignored two fluid font buttons">
      <a class="increase ui button"> <i class="plus icon"></i> Base Font</a>
      <a class="decrease ui button"> <i class="minus icon"></i> Base Font</a>
    </div>
    <div class="sizer">
      <h1 class="ui header">First header</h1>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <h2 class="ui header">Second header</h2>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <h3 class="ui header">Third header</h3>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <h4 class="ui header">Fourth header</h4>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <h5 class="ui header">Fifth header</h5>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
    </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="ignored info ui message">Content headings size themselves relative to the base font of the surrounding text</div>
    <div class="ui ignored two fluid font buttons">
      <a class="increase ui button"> <i class="plus icon"></i> Base Font</a>
      <a class="decrease ui button"> <i class="minus icon"></i> Base Font</a>
    </div>
    <div class="sizer">
      <div class="ui huge header">Huge Header</div>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <div class="ui large header">Large Header</div>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <div class="ui medium header">Medium Header</div>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <div class="ui small header">Small Header</div>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
      <div class="ui tiny header">Tiny Header</div>
      <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
    </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>
    <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
  </div>

  <h2 class="ui dividing header">Variations</h2>


  <div class="example">
    <h4 class="ui header">Dividing</h4>
    <p>A header can be formatted to divide itself from the content below it</p>
    <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
    <h3 class="ui dividing header">
      Dividing Header
    </h3>
    <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
  </div>


  <div class="example">
    <h4 class="ui header">Block</h4>
    <p>A header can be formatted to appear inside a content block</p>
    <h3 class="ui black block header">
      Block Header
    </h3>
    <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">

  </div>

  <div class="example">
    <h4 class="ui header">Attached</h4>
    <p>A header can be attached to other content, like a <a href="/elements/segment.html">segment</a></p>
    <h3 class="ui top attached header">
      Top Attached
    </h3>
    <div class="ui attached segment">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
    </div>
    <h3 class="ui attached header">
      Attached
    </h3>
    <div class="ui attached segment">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
    </div>
    <h3 class="ui bottom attached header">
      Bottom Attached
    </h3>
  </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="clearing 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 justified header">
        This should take up the full width even if only one line
      </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>
    <h4 class="ui black header">
      Black
    </h4>
    <h4 class="ui blue header">
      Blue
    </h4>
    <h4 class="ui green header">
      Green
    </h4>
    <h4 class="ui orange header">
      Orange
    </h4>
    <h4 class="ui pink header">
      Pink
    </h4>
    <h4 class="ui purple header">
      Purple
    </h4>
    <h4 class="ui red header">
      Red
    </h4>
    <h4 class="ui teal header">
      Teal
    </h4>
    <h4 class="ui yellow header">
      Yellow
    </h4>
  </div>


  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A header can have its colors inverted for contrast</p>
    <div class="ui info message">
      Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background
    </div>
    <div class="ui inverted segment">
      <h4 class="ui black header">
        Black
      </h4>
      <h4 class="ui blue header">
        Blue
      </h4>
      <h4 class="ui green header">
        Green
      </h4>
      <h4 class="ui orange header">
        Orange
      </h4>
      <h4 class="ui pink header">
        Pink
      </h4>
      <h4 class="ui purple header">
        Purple
      </h4>
      <h4 class="ui red header">
        Red
      </h4>
      <h4 class="ui teal header">
        Teal
      </h4>
      <h4 class="ui yellow header">
        Yellow
      </h4>
    </div>
  </div>

</div>