Typographic components

Hero unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"

.pull-left {
  float: left;
  marginr-right: 15px;
}

.pull-right

Float an element right

class="pull-right"

.pull-right {
  float: right;
  margin-left: 15px;
}

.muted

Change an element's color to #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}