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>
<em>italicized text</em>
Bold Text
<strong>
<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
- 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
<ol>
<li></li>
</ol>
- 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
<ol class="styled">
<li></li>
</ol>
- 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
<ol class="unstyled">
<li></li>
</ol>
Tables
First Name | Last Name | Username |
---|---|---|
Mark | Otto | @mdo |
Jacob | Thornton | @jaket |
Larry | the Bird |
<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 |
<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" |