Below are simple and complex code snippets to be used enterprise-wide for things like sidebar content, buttons and accordions. If you do not have HTML experience or have issues using the snippets, let your Web Project Manager know.

We are using Twitter Bootstrap as a code base. In the below snippets there have been styles added for enterprise use. You are welcome to use Bootstrap solutions not seen here for your site, however if extra styling is needed eHC will need be involved.

Icon Library

A list of approved icons for use in HUT sites

Code Snippets

Icons

Buttons

Enable Side Navigation

Aside Cards

Floats

Quotes & Call-Outs

Accordion

Carousel

CRM



Icons

To add icons to the page, follow this format:

<i class="icon-x"></i>

Example:

Notes:

  • Request icon options from your WPM. Some icons are set in stone and others are more flexible. Here are list of the set icons.
  • Replace 'x' in the example above with icon class name.

Buttons

To add buttons to the page, follow these formats:


  <a class="btn btn-primary" href="">Regular Button</a>
  <a class="btn btn-primary btn-sm btn-small" href="">Small Button</a>
  <a class="btn btn-primary btn-block" href="">Button Spans Container</a>

To add an icon button, follow this format:


  <a class="btn btn-primary" href="/locations/">
    <i class="icon-arrow-right"></i>
    Find Location &amp; Directions
  </a>

Notes:

The addition of the class 'btn-primary' to all buttons will bring in the primary color for the background when we upgrade to BootStrap 3. Please start to use this as your standard.

Enable Side Navigation

To display side navigation add the following code to the /local/config.vtl file on your host. If you do not have access to this file, assign this task to your eHC migrator or FED assisting with your site build.

#*_________________________________*#
#* Enable Sub Navigation *#
#set ($enable_subnav_aside_left = true)
##set ($enable_subnav_aside_right = false)

Notes:

  • Only set one of the values to true. If the other is false, be sure to put the two hash marks to the left of the 'set' in order to disable the line of code
  • The navigation will not display on the No Asides and Three Even Sections templates
  • When set to left, the navigation will not display on Page Aside Right and Two Asides Right
  • When set to right, the navigation will not display on Page Aside Left and Two Asides Left

Aside Cards

The styles are written for the sidebars A and B, not the main content. When using this, do not remove the 'hr' tags or change any of the other mark-up unless it's adding list items or paragraphes. To add these aside cards to the page sidebar, follow this format:


  <div class="card card-aside filled">
    <h3>Mark Up For Aside Cards</h3>
    <hr />
    <p>Use the style class="card card-aside" in order to style your aside
    cards that do not have ready made content. Evaluate the content for this
    area to be sure it does not need a structure created.</p>
    <p>Items already having a ready made cards or content pulls are:</p>
    <ul>
      <li>Locations</li>
      <li>Sub-Nav</li>
      <li>Related Physicians (either through Website Segment or the 
      Clinician Spotlight)</li>
    </ul>
    <a href="/home/" class="btn btn-primary btn-block">My Button That Goes Nowhere</a>
  </div>

Notes:

  • Add 'filled' to the div class only if you want a solid background (live example).
  • There is also an example of this snippet in the sidebar.

Floats

To float content we are using classes built into Twitter Bootstrap. We ask that you wrap the content you wish to float with 'span' tags and follow this format.


  <span class="pull-left">pull me left</span>
  <span class="pull-right">pull me right</span>

To float an image to the left or right with the appropriate margin use the following:


  <span class="pull-left image-margin-left">pull me left with margin</span>
  <span class="pull-right image-margin-right">pull me right with margin</span>

If you want to float content side by side, we have classes for widths to choose from.

  • span1 - span12

Example to follow


  <span class="pull-left span4"></span> <!-- float left, 3 columns)-->
  <span class="pull-right span6"></span> <!-- (float right, 2 columns) -->

Example:

Pull-Left

I'm using the pull-left class for both of these columns. The float is from Twitter Bootstrap.

Span6

I'm using the span6 class to use the enterprise styles that give two columns.

Notes:

Quotes & Call-Outs

To style quotes, follow this format:


  <blockquote>Information</blockquote>

Example:

This is information I would like to call attention to.

Accordion

To add an accordion, follow this format:

Note: Do NOT use WYSIWYG mode when implementing or editing this mark-up. The CMS will remove tags code that will break the accordion on the page.


<div class="accordion interior-accordion" id="accordion2">

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        <h3>Collapsible Group Item no. 1</h3><i class="icon-plus-sign-2"></i>
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        <p>Anim pariatur cliche...</p>
      </div>
    </div>
  </div>

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        <h3>Collapsible Group Item no. 2</h3><i class="icon-plus-sign-2"></i>
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <p>Anim pariatur cliche...</p>
      </div>
    </div>
  </div>

</div>

Example:

Collapsible Group Item no. 1

There are two places that hold the 'collapseOne' value. When you create a new 'accordion-group' you will need to replace that value with the next number in sequence.

Collapsible Group Item no. 2
  • The 'in' class is on the previous 'accordion group' and not on this one. That is why the first group starts out open'

Notes:

  • To add another accordion group copy the following section and be sure to change both occurances of collapseOne to the next consecutive number. In this case it would be #collapseThree.

<div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        <h3>Collapsible Group Item no. 2</h3><i class="icon-plus-sign-2"></i>
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <p>Anim pariatur cliche...</p>
      </div>
    </div>
  </div>
  • In the 'div' with the class 'accordion-body' there is an 'in' value that commands the accordion to start open. If you do not want this function remove it from the div.

To add a photo carousel, follow this format:



<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="active item">
      <img src="/toolkit/files/sample-1.jpg" alt="sample image one">
      <div class="carousel-caption">
        <h4>First Thumbnail label</h4>
        <p>You can have caption for each image.</p>
      </div>
    </div>

    <div class="item">
      <img src="/toolkit/files/sample-2.jpg" alt="sample image two">
      <div class="carousel-caption">
        <h4>Second Thumbnail label</h4>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div>
    </div>

    <div class="item">
      <img src="/toolkit/files/sample-3.jpg" alt="sample image three">
      <div class="carousel-caption">
        <h4>Third Thumbnail label</h4>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div>
    </div>
  </div>

  <a data-slide="prev" href="#myCarousel" class="carousel-control left"><i class="icon-angle-left"></i></a>
  <a data-slide="next" href="#myCarousel" class="carousel-control right"><i class="icon-angle-right"></i></a>
</div>

Example:

Notes:

  • Comment tags can be used around areas that need hidden such as the image title and description.
  • Live Example

CRM

Formatting content in the 'pre' and 'post' containers for the CRM module:

<div class="container">
    <p>My information here</p>
 </div>