Our Code Repository has now been updated with the latest BS3 standards.

Our Code Repository contains snippets to be used enterprise-wide for things like sidebar content, buttons and accordions.

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 to be involved.

Design

Icons

Buttons

MHO Patient Portal Feature

STEMI Time Feature

RealAge Test Feature

Quotes & Call-Outs

Aside Cards

Accordion

Carousel

Functionality

Floats

Enable Side Navigation

Enable Physician Listing

Change Appstack Order

Setup Alerts




Icons | Library

To add icons to the page, follow the format below. Replace 'x' in the example with the icon class name.

- icon-info-circled

- icon-calendar

- icon-facebook-squared

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

Most of the time, we opt to use the <i> element. We also provide two classes: .icon identifies the element as an icon element and the second identifies which icon to use ( .icon-html5 ). The icon classes can be added to any element though we do recommend an inline element such as <i> or <span>.

Example Icon Usage: Fighter Jet

Negative Ghost Rider, the pattern is full.

  Negative Ghost Rider, <span class="icon icon-fighter-jet"><span> the pattern is full.

Icon Sizes

Classes can also be added to change the icon's size. This gives users more options when adding icons to their content especially if the surrounding text is larger than the icon or users want to display the icon more prominently. The options are 2x through 5x. With the base font size at 14px, these classes will multiply the icon's size.

Icon 2x: 28px

Let's help you start an activity plan today.

  Let's help you start an activity plan today. <span class="icon icon-bicycle icon-size-2x"><span>

Icon 3x: 42px

I'm traveling by:

  I'm traveling by: <span class="icon icon-taxi icon-size-3x"><span>

Icon 4x: 56px

I'm traveling by:

  I'm traveling by: <span class="icon icon-bus icon-size-4x"><span>

Icon 5x: 70px

I can travel by... I can travel, travel by...

  SPACESHIP!!! <span class="icon icon-space-shuttle icon-size-5x"><span>

Icon Sizes: Default - 5x



Buttons

Regular Buttons

To add regular buttons to the page, follow these formats:

Button

Small Button

Block Button

  <a class="btn btn-primary" href="#">Button</a>
<a class="btn btn-primary btn-small" href="#">Small Button</a>
<a class="btn btn-primary btn-block" href="#">Block Button</a>

Icon Buttons

To add icon buttons to the page, follow this format:

Get Directions

  <a class="btn btn-primary" href="/locations/"><i class="icon-arrow-right"></i> Get Directions</a>

Button Library

Learn More
Read More
View More
Classes & Events
Download
Find a Doctor
Maps & Directions
Register
Request an Appointment
Search for Jobs
View or Pay Bill Online

  <a class="btn btn-primary" href="#">Learn More <i class="icon-arrow-right"></i></a>
<a class="btn btn-primary" href="#">Read More <i class="icon-arrow-right"></i></a>
<a class="btn btn-primary" href="#">View More <i class="icon-arrow-right"></i></a>
<a class="btn btn-primary" href="#"><i class="icon-calendar"></i> Classes & Events</a>
<a class="btn btn-primary" href="#"><i class="icon-download"></i> Download</a>
<a class="btn btn-primary" href="#"><i class="icon-user-md"></i> Find a Doctor</a>
<a class="btn btn-primary" href="#"><i class="icon-location"></i> Maps & Directions</a>
<a class="btn btn-primary" href="#"><i class="icon-laptop"></i> Register</a>
<a class="btn btn-primary" href="#"><i class="icon-bookmark"></i> Request an Appointment</a>
<a class="btn btn-primary" href="#"><i class="icon-suitcase"></i> Search for Jobs</a>
<a class="btn btn-primary" href="#"><i class="icon-money"></i> View or Pay Bill Online</a>
Learn more about buttons


MyHealthOne Patient Portal Feature | Example

To highlight the MHO Patient Portal within the Services Explorer sidebar, use the following code:

  <h2><i class="icon icon-mh1"></i> MyHealth<em>One</em></h2>
<hr>
<p>Log into the MyHealth<em>One</em> Patient Portal to access your health information.</p>
<p><a class="btn btn-outline-primary btn-block" href="/patient-portal/"> MyHealth<em>One</em></a></p>

Example:

MyHealthOne


Log into the MyHealthOne Patient Portal to access your health information.

MyHealthOne




STEMI Time Feature | Example

To add a feature area for the STEMI Time in the Adaptive Tabs section on the homepage, follow these steps:

  • From the homepage, select Edit Widget in the fw-App-Stack4 container.
  • When the widget opens, scroll down and select to show the Custom Tab.
  • A new tab will populate at the top of the widget titled Custom Tab, click into this area.
  • Next, add "STEMI Time" to the title field and then place the following code in the body area:
    • Make sure to substitute your division's path into the first macro parameter (i.e. - wfl_rss_feed.json, efl_rss_feed.json, nfl_rss_feed.json, sad_rss_feed.json)
    • Also add your division's STEMI Time name into the second macro parameter (i.e. - Largo Medical Ctr 14th St Campus, Brandon, etc.)
  #macro(HcaWebServicesPrintStemiTime $er_feed_url $er_feed_item_title)

  #set($er_json = $json.fetch($er_feed_url))

  #foreach($er_item in $er_json.rss.channel.item)
    #if($er_item.title == $er_feed_item_title)
      #if($UtilMethods.isSet($er_item.stemi))
        $!{er_item.stemi.split(' ').get(0)}
      #else
        N/A
      #end
    #end
  #end

#end

<span class="pull-left col-sm-3">
  <h2>STEMI Time</h2>
  <h2><i style="font-size: 4em;" class="icon-clock"></i></h2>
  <h2>
    #HcaWebServicesPrintStemiTime("https://hcafeeds.medcity.net/rss/er/wfl_rss_feed.json", "Largo Medical Ctr 14th St Campus") minutes
  </h2>
</span>
<span class="pull-left col-sm-9">
  <h2>What is a STEMI?</h2>
  <p>A <strong>STEMI (ST-Elevation Myocardial Infarction)</strong> is a deadly type of heart attack, which is identified on an EKG. Early treatment to the blocked coronary artery minimizes the extent of the heart muscle damage and preserves the pumping function of the heart, thereby, increasing survival and reducing or eliminating complications.</p>
  <a class="btn btn-primary" href="/service/stemi">Learn More <i class="icon-arrow-right"></i></a>
</span>

Example

STEMI Time

N/A minutes

What is a STEMI?

A STEMI (ST-Elevation Myocardial Infarction) is a deadly type of heart attack, which is identified on an EKG. Early treatment to the blocked coronary artery minimizes the extent of the heart muscle damage and preserves the pumping function of the heart, thereby, increasing survival and reducing or eliminating complications.

Learn More



RealAge Test Feature | Example

To add a feature area for the RealAge Test in the Adaptive Tabs section on the homepage, follow these steps:

  • From the homepage, select Edit Widget in the fw-App-Stack4 container.
  • When the widget opens, scroll down and select to show the Custom Tab.
  • A new tab will populate at the top of the widget titled Custom Tab, click into this area.
  • Next, add "RealAge Test" to the title field and then place the following code in the body area:
  <span class="pull-left col-sm-3 text-center">
  <h2>Take the test to find out!</h2>
  <h2><i style="font-size: 4em;" class="icon-edit"></i></h2>
  <h2><a class="btn btn-primary" href="https://www.sharecare.com/realage-test/widget?assessmentId=1108721" target="_blank">Take the Test <i class="icon-arrow-right"></i></a></h2>
</span>

<span class="pull-left col-sm-9">
    <h2>What’s YOUR RealAge?</h2>

    <p>How old does your body think it is? The RealAge Test gauges how fast you’re aging, based on your lifestyle and medical history. The RealAge Test assesses your eating, exercise, and sleep habits, along with family health history, behaviors, and existing conditions. <a href="https://www.sharecare.com/static/realage-test" target="_blank">Learn More »</a></p>
</span>

Example

Take the test to find out!

Take the Test

What’s YOUR RealAge?

How old does your body think it is? The RealAge Test gauges how fast you’re aging, based on your lifestyle and medical history. The RealAge Test assesses your eating, exercise, and sleep habits, along with family health history, behaviors, and existing conditions. Learn More »




Quotes & Call-Outs

To style quotes or call-outs, follow this format:

Hello world!
  <blockquote>Hello world!</blockquote>



Aside Cards

Aside cards are to be used in sidebar areas and not main content areas. When using them, do not remove the <hr> tags or change any of other mark-up unless adding list items or paragraphs.

To add aside cards to sidebar areas, follow the format below. Add "filled" to the div class if you want a solid background. View aside card examples in the left sidebar of this page.

  <div class="card card-aside">
  <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>



Accordion

Accordions can be created using the Accordion Generator.



Carousel

To add a photo carousel, follow the format below. Comment tags can be used around areas that need to be hidden, such as the image header and caption. There isn't a set size for carousel images as it will vary by image content; however, the images should all be the same size within the carousel to avoid display issues.

  <div id="carousel1" class="carousel slide hut-snippet" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
    <img src="/util/images/image.jpg" data-holder-rendered="true">
    <div class="carousel-caption">
      <h4>Place Header Here or Remove From Code</h4>
      <p>Place caption here or remove from code.</p>
    </div>
    </div>
    <div class="item">
      <img src="/util/images/image.jpg" data-holder-rendered="true">
    <div class="carousel-caption">
      <h4>Place Header Here or Remove From Code</h4>
      <p>Place caption here or remove from code.</p>
    </div>
    </div>
    <div class="item">
      <img src="/util/images/image.jpg" data-holder-rendered="true">
    <div class="carousel-caption">
      <h4>Place Header Here or Remove From Code</h4>
      <p>Place caption here or remove from code.</p>
    </div>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><i class="icon-angle-left"></i></a>
  <a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><i class="icon-angle-right"></i></a>
</div>

Example




Floats

To float content in columns, use the following formats:

Two Column

Column 1

I'm using the pull-left and the col-sm-6 classes for these two columns.

Column 2

I'm using the pull-left and the col-sm-6 classes for these two columns.


  <div class="row">
  <span class="pull-left col-sm-6">
    <h4>Column 1</h4>
    <p>I'm using the pull-left and the col-sm-6 classes for these two columns.</p>
  </span>
  <span class="pull-left col-sm-6">
    <h4>Column 2</h4>
    <p>I'm using the pull-left and the col-sm-6 classes for these two columns.</p>
  </span>
</div>

Three Column

Column 1

I'm using the pull-left and the col-sm-4 classes for these three columns.

Column 2

I'm using the pull-left and the col-sm-4 classes for these three columns.

Column 3

I'm using the pull-left and the col-sm-4 classes for these three columns.


  <div class="row">
  <span class="pull-left col-sm-4">
    <h4>Column 1</h4>
    <p>I'm using the pull-left and the col-sm-4 classes for these three columns.</p>
  </span>
  <span class="pull-left col-sm-4">
    <h4>Column 2</h4>
    <p>I'm using the pull-left and the col-sm-4 classes for these three columns.</p>
  </span>
  <span class="pull-left col-sm-4">
    <h4>Column 3</h4>
    <p>I'm using the pull-left and the col-sm-4 classes for these three columns.</p>
  </span>
</div>

Images

To float images within content, use the following formats:

Single Image

To float an individual image, use pull-left (or pull-right) and image-margin-left (or image-margin-right) on the image classes:

The two most common sources of coffee beans are the highly regarded Coffea arabica, and the "robusta" form of the hardier Coffea canephora. The latter is resistant to the coffee leaf rust (Hemileia vastatrix), but has a more bitter taste. Coffee plants are cultivated in more than 70 countries, primarily in equatorial Latin America, Southeast Asia, and Africa. Once ripe, coffee "berries" are picked, processed and dried to yield the seeds inside. The seeds are then roasted to varying degrees, depending on the desired flavor, before being ground and brewed to create coffee.

  <img class="pull-left image-margin-left" src="/util/images/" alt="" width="" height="" />

Image w/Caption

To float an individual image with a caption, wrap the image and text in a div with the pull-left (or pull-right) and col-sm-6* classes:

Coffee is a brewed beverage prepared from the roasted or baked seeds of several species of an evergreen shrub of the genus Coffea.

The two most common sources of coffee beans are the highly regarded Coffea arabica, and the "robusta" form of the hardier Coffea canephora. The latter is resistant to the coffee leaf rust (Hemileia vastatrix), but has a more bitter taste. Coffee plants are cultivated in more than 70 countries, primarily in equatorial Latin America, Southeast Asia, and Africa. Once ripe, coffee "berries" are picked, processed and dried to yield the seeds inside. The seeds are then roasted to varying degrees, depending on the desired flavor, before being ground and brewed to create coffee.

  <div class="pull-left col-sm-6">
  <img class="" src="/util/images/" alt="" width="" height="" />
  <p>This is my caption that appears under this image.</p>
</div>

*You may need adjust the col-sm number used in the class according to the size of the image. Class widths ranging from col-sm-1 to col-sm-12 can be used. For example, a smaller image could use col-sm-4 and a larger image could use col-sm-8.

Learn more about the grid system and floats


Enable Side Navigation

To display side navigation, add the following code to the /local/config.vtl file on your host:

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

Notes:

  • This code may already exist in the /local/config.vtl file and you need only edit it.
  • 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.



Enable Physician Listing

Physician pulls in the Services Explorer default to the gallery format without any additional code. To use the listing format instead of the gallery format in the Services Explorer, add the following code to the /local/config.vtl file on your host:

  #* PHYSICIAN LISTING FORMAT ON SERVICES *#

#set($app_services_physicians_aside_style = 2)

Physician Listing

photo of physicians in services explorer

Physician Gallery

photo of physicians in services explorer

Notes:

  • This code may already exist in the /local/config.vtl file and you need only edit it.



Change Homepage Appstack Order

To change the order of the appstacks on the homepage, edit the following code in the /local/config.vtl file on your host.

  ##  HOMEPAGE APP STACKS
#set ($app_stack_pre = "page-navigator")
#set ($app_stack_one = "about-us-2")
#set ($app_stack_two = "app-scroller")
##set ($app_stack_three = "er-wait-time")
##set ($app_stack_four = "page-navigator")
#set ($app_stack_post = "social-media-links")



Setup Alert Message

To set an alert message to appear in the notification area of a website, select the status, enter the message, and enter the link using the following code in the /local/config.vtl file on your host:

Alert Status Options

  #set($local_custom_warning_message_status = "danger")
#set($local_custom_warning_message_status = "warning")
#set($local_custom_warning_message_status = "info")
#set($local_custom_warning_message_status = "all-clear")

Alert Message

  #set($local_custom_warning_message = "I'm not saying aliens…but…aliens")

Alert Link

  #set($local_custom_warning_link = "http://linkto.getaway/plan")

Example

  #set($local_custom_warning_message_status = "warning")
#set($local_custom_warning_message = "Due to yesterday's hurricane, we are unable to accept new patients. The ER is open and triaging based on high level of need.")
#set($local_custom_warning_link = "http://floridafirstresponse.com/hurricane/emergency")

Danger

photo of alert box

Warning

photo of alert box

Info

photo of alert box

All Clear

photo of alert box

Notes:

  • It is best practice to add your content beneath the dummy alert message content already in the /local/config.vtl. This leaves the dummy content as an example for those wanting to use this feature in the future.
  • Only enable one set of status, message, and link values. Be sure to put two hash marks to the left of the set to disable any other lines of code.