H1 Lorem Ipsum 50

H2 Lorem Ipsum 35

H3 Lorem Ipsum 26

H4 Lorem Ipsum 21

H5 Lorem Ipsum
H6 Lorem Ipsum

The font families in use on this website are Museo Slab and Museo Sans with weights of 300, 500, and 700.

<p class="lead">This is a lead paragraph.</p>
The font families in use on this website are Museo Slab and Museo Sans with weights of 300, 500, and 700.
<blockquote>This is a blockquote.</blockquote>

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.

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.

<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">
    <h3>Box1 Center Style</h3>
    <p>This box style by default is light blue, but can be changed to several colors - navy, gray and light gray. </p>
</div>
<div class="box1 navy title1">
    <h3>Box1 Title1 Style</h3>
    <p>This box style is navy, with white text and cerulean links. </p>
    <p><a href="">This is a link.</a></p>
</div>

Box1 Style

This box style is light gray with dark gray text.

<div class="box1 lt-gray">
    <h3>Box1 Style</h3>
    <p>This box style is light gray with dark gray text. </p>
</div>

Box1 Title2 Style

This box style is gray with dark gray text.

<div class="box1 gray title2">
    <h4>Box1 Title2 Style</h4>
    <p>This box style is gray with dark gray text. </p>
</div>

Box1 Style

This box style by default has a gold border, but can be changed to have a blue border instead.

<div class="box3">
    <h3>Box1 Style</h3>
    <p>This box style by default has a gold border, but can be changed to have a blue border instead. </p>
</div>

Box1 Style

This box style has a blue border.

<div class="box3 blue">
    <h3>Box1 Style</h3>
    <p>This box style has a blue border. </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 gold upper large"><span>This is a gold 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

Blue Styled Unordered List

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

Gold Styled 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

Styled 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

#0072ce
#eeb319
#38393f
#edf5fc
#cce3f5
#b2d4f0
#f1f3f4
#d8dce1
#62C6FF
#279488
#6e3c7f
#7c7d81

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 815
Homepage New at Valley 770 x 556 Fixed width, height varies.
Patient Stories 370 x 240
Doctor Profile Image 780 x 972 Will auto-size for listing page
Service Landing hero 1600 x 455
Location detail hero 1600 x 300
Location Detail 600 x 472
Getting to Valley, Image Gallery 800 x 450
Interior two column images 385 x 230
Interior full width three column images 370 x 245
Interior full width four column images 270 x 180
Valley Medical Group hero 1600 x 455
VMG full width CTA 277.5 x 200
CTAs 770 x 460
Interior feature slider 800 x 450
Blog Gallery 800 x 490

Left Column Form Elements