H1 Lorem Ipsum 50

H2 Lorem Ipsum 35

H3 Lorem Ipsum 24

H4 Lorem Ipsum 21

H5 Lorem Ipsum
H6 Lorem Ipsum

The font families in use on this website are Karla and Work Sans with weights of 300, 400, 600, 700 and 800.

<p class="lead">This is a lead paragraph.</p>

Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong. Pork tenderloin chicken corned beef, chuck burgdoggen landjaeger brisket sirloin alcatra pastrami. Filet mignon tenderloin chuck meatball andouille. Boudin tongue venison shoulder, strip steak t-bone ham salami bresaola andouille picanha ball tip tail biltong.

Accordions

Accordions can be used to shorten text sections or collapse content such as frequently asked questions. There are two styles, default and 'circles'. You will need to add an additional class of 'circles' to your accordion markup to achieve that style.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

<div class="accordion circles">
    <h4>Accordion Title</h4>
    <div><p>Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.</p></div>
    <h4>Accordion Title</h4>
    <div><p>Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong.</p></div>
</div>

Box Styles

These box styles are available to use for call to actions within your content or as static sidebar blocks. Simply add your box class to the wrapping div or the block. You can also add the classes of 'center', 'title1' or 'title2' to further adjust your styling.

Box1 Center Style

This box style by default is light blue, but can be changed to several colors - navy, gray and light gray.

<div class="box1 center">
    <h4>Box1 Center Style</h4>
    <p>This box style by default is light blue, but can be changed to several colors - navy, gray and light gray. </p>
</div>

Box1 Blue Style

This box style is blue, with white text and aqua links.

This is a link.

<div class="box1 blue ">
    <h4>Box1 Blue Style</h4>
    <p>This box style is blue, with white text and aqua links. </p>
    <p><a href="">This is a link.</a></p>
</div>

Box1 Medium Blue Style

This box style is Medium blue, with white text and aqua links.

This is a link.

<div class="box1 md-blue ">
    <h4>Box1 Medium Blue Style</h4>
    <p>This box style is Medium blue, with white text and aqua links. </p>
    <p><a href="">This is a link.</a></p>
</div>

Box2 Style

This box style is has green top and bottom borders.

<div class="box2">
    <h4>Box2 Style</h4>
    <p>This box style is has green top and bottom borders </p>
</div>
Box3 Style

This box style is has light blue borders.

<div class="box3">
    <h5>Box3 Style</h5>
    <p>This box style is has light blue borders. </p>
</div>

Table

Tables are used to present tabular data or charts. If you wish to create a 'responsive table' see the second example below.

Table heading Table heading Table heading
Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak. Filet mignon tenderloin chuck meatball andouille.
Filet mignon tenderloin chuck meatball andouille. Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak.
Tongue short ribs swine, shoulder shank strip steak. Filet mignon tenderloin chuck meatball andouille. Bacon ipsum dolor amet salami ground round chicken tri-tip.
Table heading Table heading Table heading
Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak. Filet mignon tenderloin chuck meatball andouille.
<table class="table">
    <tr>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
    </tr>
    <tr>
        <td>Bacon ipsum dolor amet salami ground round chicken tri-tip.</td>
        <td>Tongue short ribs swine, shoulder shank strip steak.</td>
        <td>Filet mignon tenderloin chuck meatball andouille.</td>
    </tr>
</table>
Table heading Table heading Table heading
Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak. Filet mignon tenderloin chuck meatball andouille.
<div class="table-responsive">
    <table class="table">
        <tr>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
        <tr>
            <td>Bacon ipsum dolor amet salami ground round chicken tri-tip.</td>
            <td>Tongue short ribs swine, shoulder shank strip steak.</td>
            <td>Filet mignon tenderloin chuck meatball andouille.</td>
        </tr>
    </table>
</div>

Buttons

Because of the special effects of buttons on this site, any link you wish to make a button must have a span around the text. See the example for details. Once your span is in place, you can choose the color button you want from the styles dropdown. Various options are show below.

Learn More Learn More

Learn More Learn More

Learn More Learn More

Learn More Learn More

<a href="" class="btn blue"><span>This is a blue button</span></a>
<a href="" class="btn aqua upper large"><span>This is a button</span></a>

Lists

There are several styled of lists to choose from, which are shown below. You can create your list in the cms, and then chose which style you'd like from the styles dropdown.

Default Unordered List

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Unstyled Unordered List

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Default ordered List

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item
  6. List Item
  7. List Item

Default ordered List

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item
  6. List Item
  7. List Item

Two Column Unordered List

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
<ul class="two-col">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Colors

sky-blue
#00a1df
aqua
#63d0df
lt-green
#b7dc78
green
#587f17
blue
#1073bf
md-blue
#0c4d80
dk-blue
#1c1f38
md-gray
#7d868c
lt-gray
#eaf0f3
lt-blue
#e5f5fc
xl-gray
#f4f7fa
gray
#d8dce1
dk-gray
#2d2d2d
blue-gray
#414956

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/j50HN50E6JE?rel=0" frameborder="0" allowfullscreen=""> </iframe>
</div>


Image Styles

Image Style Dimensions Comments
Homepage Hero 1600 x 695
Homepage Servies CTA 800 x 600
Image/Video Sliders 800 x 450
Stories 800 x 450
Dr Profile 600 x 720
Hero Images 2400 x 690
CTA Images 800 x 600