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>

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
Our Stories / Article type 1040 x 615
Service line Banners - Full width 1600 x 600 Also for interior sliders, like on Children's Health
Service line Banners - Contained 1400 x 640
Treatment Full width 760 x * MUST be at least 760px wide, can be any height.
Inline head shot 250x 300
Patient Portal 1160 x 750
Homepage 'yes' campaign 1160 x 580
Featured Treatments 952 x 625 Treatments Slider, homepage
Doctor Profiles 1000 x 1200 Profile Image
Video Thumbnails 800 x 450 Profile related videos slider
Homepage Care That Matters 400 x 400
In the News Link w/Thumbnail 800 x 450
Campaign Landing Hero 1600 x 740
Campaign Landing 2 column 540 x 360
Campaign Landing 3 column 350 x 240
Campaign Landing Squares 360 x 360

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/JwACkH1vYm8" 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 a link

and perhaps some text

This is div with a class of box2.

This is a title

and perhaps some text

This is div with a class of box3.

This is a title

and perhaps some text

This is div with a class of box4.

This is a title

and perhaps some text

This is div with a class of box5.

This is a title

and perhaps some text

This is div with a class of box6.

This is a title

and perhaps some text

This is div with a class of box7.

This is a title

and perhaps some text

This is div with a class of box8.

This is a title

and perhaps some text

This is div with a class of box1 title1 center.

This is an h2 title

and perhaps some text

This is div with a class of box2 title2.

This is an h2 title

And this is an h4 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>

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>
  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>
    <li></li>
</ol>
  • 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>

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @jaket
3 Larry the Bird @twitter
<table class="table">
     <tr>
         <th>First Name</th>
         <th>Last Name</th>
    </tr>
    <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>
         <th>First Name</th>
         <th>Last Name</th>
    </tr>
     <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 btn-block Create a button that spans the full width of a parent
btn btn-yellow Standard yellow button
btn btn-clear Standard clear button
btn btn-link Plain link button
btn btn-xlblue Standard extra light blue button
btn btn-ltblue Standard light blue button
btn btn-lwmgray Standard light warm gray button
btn btn-wmgray Standard warm gray button
btn btn-xlgray Standard extra light gray button
btn btn-mdgray Standard Medium Gray button
btn btn-gray Standard Gray button
btn btn-black Standard black button
btn btn-black  outline Outline black button
btn btn-heart Heart Awareness button
btn btn-cancer Cancer Survivor Awareness button
btn btn-breast Breast Cancer Awareness button
btn btn-pink pink button
btn btn-colon Colon Awareness 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"