Navigation

  • Main navigation bar should not exceed 6 items
  • Main navigation bar dropdowns should not exceed 10 items



Standard Usage

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Header Classes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Standard

	<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Classes

	<p class="h1"></p>
<p class="h2"></p>
<p class="h3"></p>
<p class="h4"></p>
<p class="h5"></p>
<p class="h6"></p>
  • Each page begins with an <h1> pulled from the Page/Menu Title field set in Page Properties
  • When adding a new page, start headers with <h2>
  • Follow proper header hierarchy when coding content: <h2>, <h3>, <h4>, <h5>, <h6>
  • When using a header out of proper hierarchy, apply a class to the <p> instead of using the code itself
  • Ensure headers conform to web standards by removing any other tags (<strong>, <em>, etc.) from within the header code
  • Capitalize the first letter of each word in a header, instead of using lowercase or all caps
  • Replace any text appearing to be a header with an appropriate header tag



Text

<p> - This text is a sentence or paragraph.

<a> - This is a text link.

<strong> - Strong is used to indicate strong importance

<em> - Em is used to emphasize text

<small> - Small is used for disclaimer and note text

<p class="lead"> - This is lead text.

<del> & <ins> - This text is deleted and this text is inserted.

<s> - This text has a strikethrough.

<sup> - Superscript®

<sub> - Subscript for things like H2O

<abbr> - Abbreviation: HTML

<cite> - This is a citation.

<mark> - The mark element indicates a highlight.

Alignment

Left aligned

Center aligned

Right aligned

<p class="text-left"></p>
<p class="text-center"></p>
<p class="text-right"></p>

Transformation

Lowercase

Uppercase

capitalized

<p class="text-lowercase">Lowercase</p>
<p class="text-uppercase">Uppercase</p>
<p class="text-capitalized">capitalized</p>

Color

Text in primary color.

Text in secondary color.

Text in primary gradient.

Text in secondary gradient.

Text in support color.

Text in support gradient.

Text in white.

Text in gray.

Text in black.

<p class="text-primary">Text in primary color.</p>
<p class="text-secondary">Text in secondary color.</p>
<p class="text-primary-alt">Text in primary gradient.</p>
<p class="text-secondary-alt">Text in secondary gradient.</p>
<p class="text-support">Text in support color.</p>
<p class="text-support-alt">Text in support gradient.</p>
<p class="text-white">Text in white.</p>
<p class="text-gray">Text in gray.</p>
<p class="text-black">Text in black.</p>

Contextual Colors

Class Color Description
.default White Applies an unstyled treatment
.active
.muted
Gray Applies the hover color to a particular row or cell
.primary Dark Blue Indicates a neutral informative change or action
.success Green Indicates a successful or positive action
.info Light Blue Indicates a neutral informative change or action
.warning Yellow Indicates a warning that might need attention
.danger Red Indicates a dangerous or potentially negative action

Backgrounds

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Buttons

<a class="btn btn-default" href="#">...</a>
<a class="btn btn-primary" href="#">...</a>
<a class="btn btn-success" href="#">...</a>
<a class="btn btn-info" href="#">...</a>
<a class="btn btn-warning" href="#">...</a>
<a class="btn btn-danger" href="#">...</a>

Tables

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Text

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Formatting

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
Phone: (123) 456-7890
Fax: (123) 456-7890

<p><strong>Location Name</strong><br />
Address, Suite/Apt #<br />
City, State, Zip<br />
<strong>Phone:</strong> (123) 456-7890<br />
<strong>Fax:</strong> (123) 456-7890</p>

The following street address standards have been adopted based on the United States Postal Service standards for State and Street Suffixes.

  • Suite = Suite
  • Road = Rd
  • Street = St
  • Boulevard = Blvd
  • Court = Ct
  • Avenue = Ave
  • Circle = Cir
  • Drive = Dr
  • Highway = Hwy
  • Lane = Ln
  • Pike = Pike
  • Plaza = Plz
  • Each day of the week should use the standard abbreviation
    • Example: Sun, Mon, Tues, Wed, Thurs, Fri, Sat
  • Each month should use the standard abbreviation
    • Example: Jan, Feb, Mar, April, May, June, July, Aug, Sept, Oct, Nov, Dec
  • Use lower case for Ante Meridiem and Post Meridiem
  • Do not use separating characters
  • A single hyphen with one space before and one space after should be used
  • Do not use a double hyphen, also known as an, “Em Dash” (see reference)
  • The date range is followed by a semicolon, single space, and the time range
    • Example: Mon - Thurs: 8:00am - 5:00pm
  • Numbers throughout entire site should be consistently formatted as (xxx) xxx-xxxx
    • Example: (555) 555-5555



Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>



Links

This is a text link.

This is a text link that opens in a new window.

This is a text link for PDF documents.PDF icon

This is a text link for email addresses.

<p><a href="/home/">This is a text link.</a></p>
<p><a href="/home/" target="_blank">This is a text link that opens in a new window.</a></p>
<p><a href="/home/" target="_blank">This is a text link for PDF documents.</a><img src="/util/images/icon-pdf.gif" alt="PDF icon" width="16" height="16" /></p>
<p>This is a text link for <a href="mailto:jane.doe@hcahealthcare.com" target="_blank">email addresses</a>.</p>

  • When appropriate, make links into buttons and add an icon to help explain the purpose of a link
  • Any URLs appearing within content should be made active links
  • Replace verbiage within a link if it contains "click here"
  • For links directed to internal pages, do not use <target=“_blank”>
  • For links directed to external pages or PDFs, use <target=“_blank”>
  • For email addresses, use <a href="mailto:jane.doe@hcahealthcare.com>email </a> rather than, email <a href="mailto:jane.doe@hcahealthcare.com>jane.doe@hcahealthcare.com </a>



Lists

Ordered

  1. This is an ordered list.
  2. This is the second item, which contains a sub list.
    1. This is the sub list, which is also ordered.
    2. It has two items.
  3. This is the final item on this list.
<ol>
  <li>This is an ordered list.</li>
  <li>This is the second item, which contains a sub list.
    <ol>
      <li>This is the sub list, which is also ordered.</li>
      <li>It has two items.</li>
    </ol></li>
  <li>This is the final item on this list.</li>
</ol>
  • Use <strong>, <em>, or <a> within lists to highlight or link to important information
  • For unstyled lists, add <class="unstyled">

Unordered

  • This is an unordered list.
  • This is the second item, which contains a sub list.
    1. This is the sub list.
    2. It has two items.
  • This is the final item on this list.
<ul>
  <li>This is an unordered list.</li>
  <li>This is the second item, which contains a sub list.
    <ol>
      <li>This is the sub list.</li>
      <li>It has two items.</li>
    </ol></li>
 <li>This is the final item on this list.</li>
</ul>
  • Use <strong>, <em>, or <a> within lists to highlight or link to important information
  • For unstyled lists, add <class="unstyled">

Description Vertical

Description Lists
A description list is perfect for defining terms.
The Word You Are Describing Goes Here
The definition of the word goes in this spot.
<dl>
  <dt>Description Lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>The Word You Are Describing Goes Here</dt>
  <dd>The definition of the word goes in this spot.</dd>
</dl>

Description Horizontal

Description Lists
They can also be placed in a horizontal format.
The Word You Are Describing Goes Here
The definition of the word goes in this spot.
<dl class="dl-horizontal">
  <dt>Description Lists</dt>
  <dd>They can also be placed in a horizontal format.</dd>
  <dt>The Word You Are Describing Goes Here</dt>
  <dd>The definition of the word goes in this spot.</dd>
</dl>



Tables

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<div class="table-responsive">
<table class="table">
<caption>Optional table caption.</caption>
 <thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
  </tr>
 </tbody>
</table>
</div>
  • For basic styling, use <class="table">
  • For a striped table, use <class="table table-striped">
  • For a bordered table, use <class="table table-bordered">
  • For a hover table, use <class="table table-hover">
  • For a condensed table, use <class="table table-condensed">
  • For more styling info, visit: http://getbootstrap.com/css/#tables

Accessibility

  • If tables are used, all table headers should be identified with the th element
  • Table header should have appropriate scope attribute:
    • <th scope="col"> for column headers
    • <th scope="row"> for row headers
    • There should be no empty <th>
  • Do not use table summary, use <caption> instead to describe the table’s purpose



Templates

photo of HUT template photo of HUT template photo of HUT template photo of HUT template photo of HUT template photo of HUT template