Skip to main content
Average ER Wait Time
Checking ER Wait Time
The feed could not be reached
Retry?
Web Q
--
mins
Web Q 2
--
mins

UI Components




Accordions

DESCRIPTION
<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
 <div class="panel panel-default">
  <div class="panel-heading" role="tab" id="heading1">
   <h3 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true" aria-controls="collapse1" class="collapsed">
     <span>TITLE</span> <i class="icon-plus-sign-2"></i>
    </a>
   </h3>
  </div>
 <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
   <div class="panel-body">
     DESCRIPTION
   </div>
  </div>
 </div>
</div>

Accordions can be created using the Accordion Generator.




Alerts

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
  • To use a link within an alert, place <class="alert-link"> on the <a> tag
  • Follow the contextual color guidelines in HTML formatting standards when selecting an alert color



Asides & Cards

Asides and cards are meant to be used mainly on interior and service pages. In addition to the usage guidelines specified for each option below, please also adhere to the following:

  • Do not use more than one primary CTA per page.
  • One primary and multiple secondary CTAs maybe used on a page.
  • When using these in the sidebar, wrap the content in an <aside> tag for accessibility.
  • When using icons, add the following class to the <i> tag for accessibility: aria-hidden="true"
  • Primary CTA titles should be tagged with an <h3>, may be used with or without an icon, and may use a styling header class.
  • Secondary CTA titles should be tagged with an <h4>, may be used with or without an icon, and may use a styling header class.
  • Card titles should conform to the following standard: <h3 class="text-center"><i class="icon icon-sl-stethoscope icon-size-2x"></i> Treatments</h3> and may be used with or without an icon.

Phone Call CTA

<aside role="complementary" class="card well">
 <h3 class="h2 text-center">Want to attend a seminar?</h3>
 <p class="text-center">call us at</p>
 <p class="h3 text-center"><a href="tel:(813) 653-1065">(813) 653-1065</a></p>
</aside>

The Phone Call CTA aside should be used as the primary CTA on a page. It may be placed in the right sidebar of service pages or under the left side navigation on interior pages. Typically, for services, it should be the first item in the sidebar after related pages and physicians (if applicable). It should be used to emphasize a phone number to call.

  • CTA Type: Primary
  • Placement: Services Sidebar or Under Interior Page Nav
  • Use With: Phone Numbers

Icon CTA

<aside role="complementary" class="card well text-center">
 <i class="icon-laptop-2 icon-size-4x"></i>
 <h3 class="h2">Ready to apply?</h3>
 <p>submit your application through ERAS</p>
 <a class="btn btn-primary btn-block" href="https://www.aamc.org/students/medstudents/eras/">Apply Today <i class="icon-right-open"></i></a>
</aside>
<aside role="complementary" class="card well text-center">
 <h3 class="h2"><i class="icon-sl-syringe"></i> Need a Flu Shot?</h3>
 <p>The primary care physicians at our facilities offer the vaccine.</p>
 <p><a class="btn btn-outline-primary btn-block" href="/physicians/">Find a Doctor to Get Yours Today</a></p>
</aside>
<aside role="complementary" class="card well text-center">
 <i class="icon icon-comment icon-size-3x"></i>
 <h3>Text ER to <a href="sms:32222">32222</a> for Avg ER Wait Time</h3>
 <hr>
 <p class="small">Message and data rates may apply. Visit <a href="http://hcaeastflorida.com/campaigns/text-help/">hcaeastflorida.com/campaigns/text-help</a> for more info.</p>
</aside>

The Icon CTA aside should be used as the primary CTA on a page. It may be placed in the right sidebar of service pages or under the left side navigation on interior pages. Typically, for services, it should be the first item in the sidebar after related pages and physicians (if applicable). It may be used to emphasize an email address to contact, a website to visit, or other actions requiring a more robust design treatment.

  • CTA Type: Primary
  • Placement: Services Sidebar or Under Interior Page Nav
  • Use With: Email Addresses, Internal/External Websites Pages, Registration, etc.

Health Risk Assessment (HRA) CTA

<aside role="complementary" class="card well text-center">
 <h4 class="h3 text-center"><i class="icon icon-heart"></i> Heart Risk Assessment</h4>
 <p>Assess your cardiovascular risk using this online tool.</p>
 <p><a class="btn btn-outline-primary btn-block" href="http://cvdrisk.nhlbi.nih.gov/" target="_blank" rel="noopener noreferrer">Assess Your Heart Risk <i class="icon-angle-right"></i></a></p>
</aside>

The HRA CTA aside should be used as a secondary CTA in the right sidebar of service pages. Typically, it should be a subsequent item in the sidebar and not the first item. It may be used to emphasize an HRA link.

  • CTA Type: Secondary
  • Placement: Services Sidebar
  • Use With: HRA Link

List/Links CTA

<aside role="complementary" class="card well">
 <h4 class="h3 text-center"><i class="icon icon-doc"></i> Helpful Articles</h4>
 <ul>
  <li><a href="/hl/?/2010813654/Symptoms-of-Depression">Symptoms of Depression and Anxiety</a></li>
  <li><a href="/hl/?/2010813458/Conditions-InDepth--Bipolar-Disorder">What is Bipolar Disorder?</a></li>
  <li><a href="/hl/?/2010815914/Mental-Health-Services--An-Overview">An Overview of Mental Health Services</a></li>
 </ul>
</aside>

The List/Links CTA aside should be used as a secondary CTA in the right sidebar of service pages. Typically, it should be a subsequent item in the sidebar and not the first item. It may be used to provide additional resource or health article links, and, in rare cases, secondary navigation.

  • CTA Type: Secondary
  • Placement: Services Sidebar
  • Use With: Resource Links, Health Article Links, Secondary Navigation

Other CTA Options

<aside role="complementary" class="card well">
 <h4 class="h3 text-center"><i class="icon icon-info-circled"></i> Resources</h4>
 <p>If you or someone you know is pregnant—or interested in becoming pregnant—our <a href="/hl/?/100855/Pregnancy-and-Birthing-Center-of-Excellence"> online Pregnancy &amp; Birthing Center of Excellence</a> provides lots of information and resources.</p>
 <a class="btn btn-outline-primary btn-block" href="/hl/?/100855/Pregnancy-and-Birthing-Center-of-Excellence"> Visit the Center <i class="icon-angle-right"></i></a>
</aside>
<aside role="complementary" class="card well">
 <a href="http://www.utahsafehaven.org/Home.html" target="_blank" rel="noopener noreferrer"><img class="centered" src="http://www.mountainstar.com/util/utah-safe-haven.png"></a>
 <p>Do you have thoughts about abandoning your newborn? Make the right decision for both of you: give up custody at a safe haven like ours -- anonymously. <a href="http://www.utahsafehaven.org/Home.html" target="_blank" rel="noopener noreferrer">Utah Newborn Safe Haven</a> is here to help.</p>
 <a class="btn btn-outline-primary btn-block" href="http://www.utahsafehaven.org/Home.html"> Visit Utah Safe Haven <i class="icon-angle-right"></i></a>
</aside>

For all other aside cases, use the Other CTA option. It may be placed in the right sidebar of service pages or under the left side navigation on interior pages. Typically, it should be a subsequent item in the sidebar and not the first item. It may be used for an abundance of items; however, please adhere to the general structure with an icon, title, description, and button link.

  • CTA Type: Secondary
  • Placement: Services Sidebar or Under Interior Page Nav
  • Use With: Various Items (adhere to the general structure with an icon, title, description, and button link)

Quick Links CTA

<aside role="complementary" class="card well">
 <h4 class="h3 text-center">Quick Links</h4>
 <p><a class="btn btn-danger btn-block" href="#"><i class="icon icon-user-md"></i> Find a Doctor</a></p>
 <p><a class="btn btn-info btn-block" href="http://web-q-hospital.prod.ehc.com/calendar/index.dot?ehc_ce_search_keyword=weight%20loss&ehc_ce_search_facility_coid=30917&ehc_ce_search_region=Hillsborough%20Market&ehc_ce_search_facility=30917"><i class="icon icon-calendar"></i> Classes & Events</a></p>
 <p><a class="btn btn-warning btn-block" href="#"><i class="icon icon-location"></i> Maps & Directions</a></p>
 <p><a class="btn btn-success btn-block" href="#"><i class="icon icon-bookmark"></i> Make an Appointment</a></p>
 <p><a class="btn btn-primary btn-block" href="tel:(555) 555-5555"><i class="icon-sl-phone-s"></i> (555) 555-5555</a></p>
</aside>

The Quick Links CTA aside should be used as a secondary CTA in the right sidebar of service pages. Typically, it should be a subsequent item in the sidebar and not the first item. It should be used for intuitive tasks that require little explanation and should replace CTAs using lengthy descriptions and headers that are unnecessary.

  • CTA Type: Secondary
  • Placement: Services Sidebar
  • Use With: Intuitive Task Links
<div class="card well">
 <h3 class="text-center"><i class="icon icon-sl-stethoscope icon-size-2x"></i> Treatments</h3>
 <hr />
 <div class="row">
  <div class="columns-2-sm">
   <ul>
    <li><a href="http://northwestmed.com/service/atrial-fibrillation">Atrial Fibrillation</a></li>
    <li><a href="http://northwestmed.com/service/cardiac-catheterization">Cardiac Catheterization</a></li>
    <li><a href="http://northwestmed.com/service/cardiac-services">Cardiac Services</a></li>
    <li><a href="http://northwestmed.com/service/electrophysiology">Electrophysiology</a></li>
    <li><a href="http://northwestmed.com/service/heart-attack-warning-signs">Heart Attack Warning Signs</a></li>
    <li><a href="http://northwestmed.com/service/vascular-services">Vascular Services</a></li>
   </ul>
  </div>
 </div>
</div>

The Related Content card should be used to house links to sub-pages in the body copy of a main service line page. Typically, it should be placed near the bottom of the page content.

  • Placement: Services Body Copy
  • Use With: Service Line Sub-Pages

Recognition Card

Recognition



<div class="card well">
 <h3 class="text-center"><i class="icon icon-sl-award-2"></i> Recognition</h3>
 <hr />
 <div class="row">
  <div class="col-sm-3 col-sm-offset-2">
   <img class="img-responsive" src="http://northwestmed.com/util/images/Healthgrades-100-Best-Cardiac-Care-2017.png" alt="">
   <br class="visible-xs">
  </div>
  <div class="col-sm-3 col-sm-offset-2">
   <img class="img-responsive" src="http://northwestmed.com/util/images/Healthgrades-100-Best-Coronary-Intervention-2017.png" alt="">
  </div>
 </div>
</div>

The Recognition card should be used to showcase award and accolade logos/seals in the body copy of a service page. Typically, it should be placed at the bottom of the page content.

  • Placement: Services Body Copy
  • Use With: Award/Accolade Logos/Seals



Badges

Here's some text with a badge NEW

<p>Here's some text with a badge <span class="badge">NEW</span></p>

<button class="btn btn-primary" type="button">Here's a button with a badge <span class="badge">NEW</span></button>



Buttons

Regular Buttons

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

Icon Buttons

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

Button Library

Learn More About [INSERT THING]
Email
(555) 555-5555
Classes & Events
Download
Find a Doctor
Maps & Directions
Register
<a class="btn btn-primary" href="#">Learn More About [INSERT THING] <i class="icon-arrow-right"></i></a>
<a class="btn btn-primary" href="mailto:"><i class="icon-laptop"></i> Email</a>
<a class="btn btn-primary" href="tel:555-555-5555"><i class="icon-phone"></i> (555) 555-5555</a>
<a class="btn btn-primary" href="#"><i class="icon-calendar"></i> Classes &amp; 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 &amp; Directions</a>
<a class="btn btn-primary" href="#"><i class="icon-laptop"></i> Register</a>

More to come, including...

  • ERWT Feed
  • Icons
  • Jumbotron
  • Labels
  • Panels
  • Progress bars/Donut Chart
  • Tiles
  • Wells