---
layout      : 'default'
css         : 'header'
title       : 'Header'
description : 'Headers provide a short summary of content'
type        : 'UI Element'
---

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>
  <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>
  </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>
    <h2 class="ui header">
      <i class="settings icon"></i>
      Account Settings
    </h2>
    <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>
  </div>

  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>A header can be formatted to emphasize an icon</p>
    <div class="ui icon header">
      <i class="circular question icon"></i>Questions
      <div class="sub header">Have any questions? Contact Us</div>
    </div>
  </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 vertical 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 ignored secondary font menu">
      <a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
      <a class="decrease item"> <i class="icon circular 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="ignored info ui message">Content headings size themselves relative to the base font of the surrounding text</div>
    <div class="ui vertical 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 ignored secondary font menu">
      <a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
      <a class="decrease item"> <i class="icon circular 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">Attached</h4>
    <p>A header can be attached to other content</p>
    <h4 class="ui top attached header">
      Sign Up For Our Site
    </h4>
    <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>
    <h4 class="ui bottom attached header">
      Thanks
    </h4>
  </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>
    <h3 class="ui black header">
      Black
      <div class="sub header">An excellent color</div>
    </h3>
    <h3 class="ui blue header">
      Blue
      <div class="sub header">An excellent color</div>
    </h3>
    <h3 class="ui red header">
      Red
      <div class="sub header">An excellent color</div>
    </h3>
    <h3 class="ui green header">
      Green
      <div class="sub header">An excellent color</div>
    </h3>
    <h3 class="ui purple header">
      Purple
      <div class="sub header">An excellent color</div>
    </h3>
    <h3 class="ui teal header">
      Teal
      <div class="sub header">An excellent color</div>
    </h3>
  </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>
    <h3 class="ui dividing header">
      The nature of dogs
    </h3>
    <p>Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.</p>
    <p>When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!</p>
    <p>Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.</p>
  </div>


  <div class="example">
    <h4 class="ui header">Block</h4>
    <p>A header can be formatted to create a block</p>
    <h4 class="ui black block header">
      Block Header
    </h4>
    <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>
    <h4 class="ui inverted black block header">
      Black
    </h4>
    <h4 class="ui inverted blue block header">
      Blue
    </h4>
    <h4 class="ui inverted red block header">
      Red
    </h4>
    <h4 class="ui inverted green block header">
      Green
    </h4>
    <h4 class="ui inverted purple block header">
      Purple
    </h4>
    <h4 class="ui inverted teal block header">
      Teal
    </h4>
  </div>

</div>