Style Guide

Typography

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Text Emphasis

<em>

The following snippet of text is rendered as italicized text.
<em>italicized text</em>

Bold Text

<strong>

The following snippet of text is rendered as bold text.
<strong> bold text

Body copy

Our global default font-size is 16px, with a line-height of x. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

<p>...</p>

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

<p class="lead">...</p>

Small body copy

<p class="small">

This snippet of text is rendered as small text.

<p class="small">small text</p>

Accordions

Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

<div class="accordion">
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
          <div>
            <p>Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
          </div>
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
          <div>
            <p>Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
          </div>
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
          <div>
            <p>Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
          </div>

Accordions

Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

<div class="accordion circles">
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
          <div>
            <p>Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
          </div>
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
          <div>
            <p>Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
          </div>
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
          <div>
            <p>Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
          </div>

Block Quote

"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
<blockquote>Your blockquote text</blockquote>

Image styles

Below are the image dimensions for each image you'll find in the website. Please use this doctor image as a guide to how you should crop your doctor photos.

Image Style Dimensions Comments
Conditions/Treatments Banner 1600 x 500
Home Slider Image 560 x 370 Homepage section below banner. About 3:2 aspect ratio
Featured Story Image 750 x 490 Shows teaser on Homepage, full on story detail. About 3:2 aspect ratio
Sidebar Image CTA 260 x 170 With text and optional button. About 3:2 aspect ratio

Video Embeds

When adding in an embed code from youtube or vimeo you must remember to add it's wrapping div and responsive classes!

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9ZfN87gSjvI" frameborder="0" allowfullscreen></iframe>
</div>


Box Styles

You can use these classes to make nice looking callouts or calls to action. You can also add classes like center, title1 or title2 as well! Give it a try!

This is div with a class of box1.

This is an h3 title

and perhaps some text with a link

This is div with a class of box2.

Reserved

Not for content entry use

This is div with a class of box3.

This is a title

and perhaps some text

Form Elements

<select class="selectpicker">
    <option value="0">This is a dropdown</option>
    <option value="1">This is a dropdown 1</option>
    <option value="2">This is a dropdown 2</option>
</select>
<div class="form-item">
    <input type="text" class="form-text" >
</div>

Unordered Lists

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
<ul>
    <li></li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="styled">
    <li></li>
</ul>
  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
<ul class="unstyled">
    <li></li>
</ul>

Ordered Lists

  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  3. Faucibus porta lacus fringilla vel
  4. Eget porttitor lorem
<ol>
    <li></li>
</ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol class="styled">
    <li></li>
</ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol class="unstyled">
    <li></li>
</ol>

Tables

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @jaket
Larry the Bird @twitter
<table class="table">
    <tr>
        <td>Larry</td>
        <td>the Bird</td>
     </tr>
     <tr>
        <td>Jacob</td>
        <td>Thornton</td>
     </tr>
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @jaket
3 Larry the Bird @twitter
<table class="table table-bordered">
     <tr>
        <td>Larry</td>
        <td>the Bird</td>
     </tr>
     <tr>
        <td>Jacob</td>
        <td>Thornton</td>
     </tr>
</table>

Buttons

Button Class Description
btn Standard button
btn large upper blue Create a larger blue button with uppercase
btn blue Standard blue button
btn blue-dark Standard dark blue button
btn blue upper Standard blue button with uppercase
btn blue-dark upper Standard dark blue button with uppercase
btn blue outline Standard blue outlined button
btn slate outline Standard slate outlined button

Icons

This is a list of all the icons available to use

Icon Class Icon Class
class="icon-pdf" class="icon-print"
class="icon-circle-check" class="icon-check"
class="icon-patients" class="icon-shield"
class="icon-careers" class="icon-location"
class="icon-locations" class="icon-doctor"
class="icon-calendar" class="icon-star-half"
class="icon-star" class="icon-send"
class="icon-skinny-arrow-right" class="icon-skinny-arrow-left"
class="icon-linkedin" class="icon-pinterest"
class="icon-instagram" class="icon-facebook"
class="icon-youtube" class="icon-twitter"
class="icon-search" class="icon-menu"
class="icon-search" class="icon-chevron-left"
class="icon-chevron-right" class="icon-close"
class="icon-play"