Example

Assign a class of .nav-accordion to section element. This element can contain one or many accordion items (.nav-accordion-item). The accordion item element should contain a data attribute of "accordionType" (data-nav-accordion-type=""). Currently this component only supports one special accordion type, footer. By default the accordion will toggle at all breakpoints except when the accordion type is footer. The footer accordion type will only toggle below the medium breakpoint. When the screen size is above this size the toggle will not fire. Each accordion item should contain a .nav-accordion-heading tag and an unordered list (ul) with a class of .nav-accordion-content. Each .nav-accordion-content list can contain one or many list items (li).

<section class="nav-accordion">
  <div class="nav-accordion-item open" data-nav-accordion-type="">
    <div class="nav-accordion-heading"><a href="#">Item One <i class="fa fa-angle-down"></i></a></div>
    <ul class="nav-accordion-content">
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
    </ul>
  </div>
  <div class="nav-accordion-item open" data-nav-accordion-type="">
    <div class="nav-accordion-heading"><a href="#">Item Two <i class="fa fa-angle-down"></i></a></div>
    <ul class="nav-accordion-content">
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
    </ul>
  </div>
  <div class="nav-accordion-item open" data-nav-accordion-type="">
    <div class="nav-accordion-heading"><a href="#">Item Three <i class="fa fa-angle-down"></i></a></div>
    <ul class="nav-accordion-content">
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
    </ul>
  </div>
</section>

Auto tab between textboxes

Deprecated

As of v1.7.0 this component has been deprecated. It will be completely removed from Edge UI in v2.0.0.

Birthday example

Assign an attribute of data-autotab to the form or form group depending on what fields should have the auto tab functionality. Assign each field a maxlength attribute specifying the maximum amount of characters that should be allowed in the particular field (i.e. For a birthday the first two textboxes should have a maxlength of 2 while the last textbox should have a maxlength of 4. Once the maxlength is reached the focus will tab to the next field until the last field is reached.

Birthday:

<label>Birthday:</label>
  <form class="form-inline" role="form" data-autotab>
    <div class="form-group">
      <input type="text" class="form-control" maxlength="2" placeholder="mm">
      <span>/</span>
      <input type="text" class="form-control" maxlength="2" placeholder="dd">
      <span>/</span>
      <input type="text" class="form-control" maxlength="4" placeholder="yyyy">
    </div>
  </form>

Phone number example

Assign an attribute of data-autotab to the form or form group depending on what fields should have the auto tab functionality. Assign each field a maxlength attribute specifying the maximum amount of characters that should be allowed in the particular field (i.e. For a phone number the first two textboxes should have a maxlength of 3 while the last textbox should have a maxlength of 4. Once the maxlength is reached the focus will tab to the next field until the last field is reached.

Phone Number:

<label>Phone Number:</label>
  <form class="form-inline" role="form" data-autotab>
    <div class="form-group">
      <span>(</span>
      <input type="text" class="form-control" maxlength="3">
      <span>)</span>
      <input type="text" class="form-control" maxlength="3">
      <span>-</span>
      <input type="text" class="form-control" maxlength="4">
    </div>
  </form>

Principal extension of Bootstrap's delivered badges.

Example

Assign one of the following classes to choose the color. .badge-primary, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-white

Usage Note(s)

Colored badges should be carefully used in background to ensure proper contrast.
Please note that inline style were used to add contrast for display/example purposes only -- Do not include when implementing.

badge 1
badge badge-primary 1
badge badge-success 1
badge badge-warning 1
badge badge-danger 1
badge badge-info 1
badge badge-white 1

<ul>
    <li>badge <span class="badge">1</span></li>
    <li>badge badge-primary <span class="badge badge-primary">1</span></li>
    <li>badge badge-success <span class="badge badge-success">1</span></li>
    <li>badge badge-warning <span class="badge badge-warning">1</span></li>
    <li>badge badge-danger  <span class="badge badge-danger">1</span></li>
    <li>badge badge-info    <span class="badge badge-info">1</span></li>
    <li style="background-color: #DDDDDD;">badge badge-white <span class="badge badge-white">1</span></li>
</ul>

Responsive sizing for video players. Note - The Brightcove HTML5 player will be introduced as a replacement for the Chromeless player on or before v2.0.0.

Deprecated

As of v1.18.0 this component has been deprecated. It will be completely removed from Edge UI in v2.0.0.

Example

In BrightCove, using the quick video publish tool, choose "Chromeless Video Player" and then copy the JavaScript publishing code. Surround the code with two div elements. Assign a class of .player to the outermost div element.

Usage Note(s)

If the player is being used over an HTTPS connection the following parameter must be added to the object, <param name="secureConnections" value="true" />.

<div class="player">
  <div>
    <!-- Start of Brightcove Player -->

    <div style="display:none">

    </div>

    <!--
    By use of this code snippet, I agree to the Brightcove Publisher T and C
    found at https://accounts.brightcove.com/en/terms-and-conditions/.
    -->

    <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

    <object id="myExperience3823810096001" class="BrightcoveExperience">
      <param name="bgcolor" value="#FFFFFF" />
      <param name="width" value="480" />
      <param name="height" value="270" />
      <param name="playerID" value="1163683723001" />
      <param name="playerKey" value="AQ~~,AAABDqXvgjk~,bvy8PjQibf8ZL5u63bfWY4J-yJQq4Ohs" />
      <param name="isVid" value="true" />
      <param name="isUI" value="true" />
      <param name="dynamicStreaming" value="true" />
      <param name="wmode" value="transparent" />

      <param name="@videoPlayer" value="3823810096001" />
    </object>

    <!--
    This script tag will cause the Brightcove Players defined above it to be created as soon
    as the line is read by the browser. If you wish to have the player instantiated only after
    the rest of the HTML is processed and the page load is complete, remove the line.
    -->
    <script type="text/javascript">brightcove.createExperiences();</script>

    <!-- End of Brightcove Player -->
    </div>
</div>

Example

The only thing needed to implement Co-Browse is the following link. All other code is handled by Edge UI. The component itself will appear in the lower-right area of all Principal websites, once launched by the user.

Usage Note(s)

When implementing this, be sure the only `co-browse` id is this link.

Co-Browse

<a href="javascript:;" id="co-browse">Co-Browse</a>

Datepicker with functional calendar dropdown. Calendar allows the user to select a day, month, and year; this date is then automatically populated in the input field.

Example

The datepicker is built from the bootstrap datepicker plugin and provides many options for selecting a date to be used in an input field. Currently, a user can click on the calendar icon and select a date in the current month; by clicking on the selector arrows in the header of the calendar dropdown, the user may switch months.

Usage Note(s)

Please note that the user selects the Month/Year label in the header of the calendar dropdown, they will automatically switch between day view, month view, and year view.
This component does not function properly in mobile when placed within a container.
You can add any available extra functionality (such as setting disabled dates) to the datpicker component provided in the bootstrap-datepicker documentation here. To add any of these additional methods, these will need to go into your application-specific JavaScript.

<div class="input-group date">
  <input type="text" maxlength="14" placeholder="MM/DD/YYYY" data-input-mask-type="date" class="form-control eui-date-picker" data-provide="eui-date-picker" data-date-toggle-active="true"/>
  <span class="input-group-addon">
      <i class="fa fa-calendar"></i>
  </span>
</div>

Step indicator supports 2 to 8 steps.

Deprecated

As of v1.7.0 this component has been deprecated. It will be completely removed from Edge UI in v2.0.0.

Deprecated eight step indicator example

Assign a class of .step-indicator-step to the p element containing the written step information. Next, assign a class of .step-indicator to the subsequent ul element along with the corresponding class to the amount of steps in the indicator (in this case .eight-step-indicator). Finally, assign a class of .fill to child li elements of the .step-indicator class. The .fill class should only be applied to the same number of li elements as the current step of the form (i.e. should match X in "Step X of N" in the p element). The .fill class should be applied starting with the first li element.

Step 6 0f 8

<p class="step-indicator-step">Step 6 0f 8</p>
<ul class="step-indicator eight-step-indicator">
  <li class="fill"></li>
  <li class="fill"></li>
  <li class="fill"></li>
  <li class="fill"></li>
  <li class="fill"></li>
  <li class="fill"></li>
  <li></li>
  <li></li>
</ul>

Deprecated five step indicator example

Assign a class of .step-indicator-step to the p element containing the written step information. Next, assign a class of .step-indicator to the subsequent ul element along with the corresponding class to the amount of steps in the indicator (in this case .five-step-indicator). Finally, assign a class of .fill to child li elements of the .step-indicator class. The .fill class should only be applied to the same number of li elements as the current step of the form (i.e. should match X in "Step X of N" in the p element). The .fill class should be applied starting with the first li element.

Step 2 0f 5

<p class="step-indicator-step">Step 2 0f 5</p>
<ul class="step-indicator five-step-indicator">
  <li class="fill"></li>
  <li class="fill"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Corporate wide standard footer. Please see this in context to other components in the Super Footer pattern.

Assign a class of .footer to the primary footer element.

Usage Note(s)

This footer should be used on all digital properties. Domain specific legal text to be listed under the copyright; to be defined by legal and compliance for each domain. For example, Principal.com will always include "Securities offered through Princor Financial Services Corporation, member SIPC."

<footer class="footer">
    <section class="bg-gray-lighter text-center text-muted footer-row">
        <nav>
            <ul class="nav nav-inline">
                <li><a href="https://www.principal.com/terms-of-use">Terms of Use</a></li>
                <li><a href="https://www.principal.com/products-services-disclosures">Disclosures</a></li>
                <li><a href="https://www.principal.com/privacy-policies">Privacy</a></li>
                <li><a href="https://www.principal.com/security-policies">Security</a></li>
                <li><a href="https://www.principal.com/about-us/our-company/policies/report-fraud-or-unethical-conduct">Report Fraud</a></li>
                <li><a href="#placeholder">Site Map</a></li>
            </ul>
        </nav>
        <div>
            <small>&copy; 2014, Principal Financial Services, Inc.</small>
            <p>Securities offered through Princor Financial Services Corporation, member <a href="http://www.sipc.org">SIPC</a></p>
        </div>
    </section>
</footer>

Hero with text aligned on the right and left as well as one with a dark background

Usage Note(s)

Heros should only be used at the top of pages immediately following the header. They should not be used any other place on a page.
The intended display change at the xs and sm breakpoints for a hero image is to swap in a different version of the same image with a size of (750px x 450px). This change is done to accommodate the bottom text overlay.

Example with dark image

Assign a class of .hero-inverse to the container div. Insert the URL to the image for the hero ad within the img tag. Also within the img tag, assign a class of .hero-img to ensure the image will be styled correctly. Assign classes .hero-copy and .hero-copy-left to the div tag to ensure the text positions itself correctly on the ad. Assign a class of .hero-title to the h1 tag along with the text that will be shown. Finally, insert the link to the landing page in the anchor tag once the Call to Action link is clicked and assign a class of .hero-cta.

Usage Note(s)

Hero text can use an alternate color, white, when an image has a sufficiently dark background.
Avoid using images with visual noise or insufficient contrast to ensure maximum readability of text.

Header Text on the Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, autem eos veniam facilis minima!

Call to Action

<div class="hero hero-inverse">
  <img src="http://ux.pilot.principal.com/images/hero-dark.jpg" alt="hero-img" class="hero-img" />
  <div class="hero-copy hero-copy-left">
    <h1 class="hero-title">Header Text on the Left</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, autem eos veniam facilis minima!</p>
    <a href="#" class="hero-cta"><span class="hero-cta-text">Call to Action</span></a>
  </div>
</div>

Example with text on the left

Assign a class of .hero to the container div. Insert the URL to the image for the hero ad within the img tag. Also within the img tag, assign a class of .hero-img to ensure the image will be styled correctly. Assign classes .hero-copy and .hero-copy-left to the div tag to ensure the text positions itself correctly on the ad. Assign a class of .hero-title to the h1 tag along with the text that will be shown. Finally, insert the link to the landing page in the anchor tag once the Call to Action link is clicked and assign a class of .hero-cta.

Usage Note(s)

Use to display the text on the left

Header Text on the Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, autem eos veniam facilis minima!

Call to Action

<div class="hero">
  <img src="http://ux.pilot.principal.com/images/hero-right.jpg" alt="hero-img" class="hero-img" />
  <div class="hero-copy hero-copy-left">
    <h1 class="hero-title">Header Text on the Left</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, autem eos veniam facilis minima!</p>
    <a href="#" class="hero-cta"><span class="hero-cta-text">Call to Action</span></a>
  </div>
</div>

Example with text on the right

Assign a class of .hero to the container div. Insert the URL to the image for the hero ad within the img tag. Also within the img tag, assign a class of .hero-img to ensure the image will be styled correctly. Assign classes .hero-copy and .hero-copy-right to the div tag to ensure the text positions itself correctly on the ad. Assign a class of .hero-title to the h1 tag along with the text that will be shown. Finally, insert the link to the landing page in the anchor tag once the Call to Action link is clicked and assign a class of .hero-cta.

Usage Note(s)

Use to display the text on the right

Header Text Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis aliquid eveniet quod. Enim.

Call to Action

<div class="hero">
  <img src="http://ux.pilot.principal.com/images/hero-left.jpg" alt="hero-img" class="hero-img" />
  <div class="hero-copy hero-copy-right">
    <h1 class="hero-title">Header Text Right</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis aliquid eveniet quod. Enim.
    </p>
    <a href="#" class="hero-cta"><span class="hero-cta-text">Call to Action</span></a>
  </div>
</div>

Example

Assign a class of .nav-inline to ul element.

<div class="row">
    <div class="col-xs-12 text-center">
        <ul class="nav nav-inline">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
            <li><a href="#">Link 7</a></li>
        </ul>
    </div>
</div>

Example small

Assign a class of .nav-inline.nav-inline-sm to ul element.

<div class="row">
    <div class="col-xs-12 text-center">
        <ul class="nav nav-inline nav-inline-sm">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
</div>

Example with icons

Assign a class of .nav-inline to ul element.

800-986-3343
Contact Us
Find an Advisor

<div class="row">
    <div class="col-xs-12 text-center">
        <ul class="nav nav-inline">
          <li><a href="tel:800.986.3343"><i class="fa fa-phone"></i> 800-986-3343</a></li>
          <li><a href="#placeholder" target="_blank"><i class="fa fa-envelope"></i> Contact Us</a></li>
          <li><a href="#placeholder"><i class="fa fa-map-marker"></i> Find an Advisor</a></li>
        </ul>
    </div>
</div>

Easily add input masks to your form elements.

Input Mask examples

There are currently three built-in masks for Edge UI. Masking a Phone, Social Security Number, or Date is as easy as putting a class and data attribute on the input tag and adding a corresponding placeholder. You need to add a class in of .eui-input-mask and a .data-input-mask-type for the given field you are needing. For the date the class is eui-date. To get the mask to show up initially, you will need to add a corresponding placeholder which can be seen below.

Usage Note(s)

This is only available when using type="text" or type="tel" fields. type="tel" can often be preferable because it defaults to a number keyboard on mobile devices.

<div class="row">
  <div class="col-xs-12 col-md-5">
    <form role="form">
      <div class="form-group">
        <label for="phone">Phone Number:</label>
        <input id="phone" type="tel" class="form-control eui-input-mask" maxlength="14" placeholder="(999) 999-9999 " data-input-mask-type="phone"/>
      </div>
      <div class="form-group">
        <label for="ssn">SSN:</label>
        <input id="ssn" type="tel" class="form-control eui-input-mask" maxlength="11" placeholder="999-99-9999" data-input-mask-type="ssn"/>
      </div>
      <div class="form-group">
        <label for="date">Date:</label>
        <input id="date" type="tel" class="form-control eui-input-mask" maxlength="10" placeholder="MM/DD/YYYY" data-input-mask-type="date"/>
      </div>
    </form>
  </div>
</div>

Interaction Logger provides for easy logging of user experience

Usage Note(s)

Please visit the InteractionLogger Analytics Confluence page for up-to-date documentation and options.

How to Use Interaction Logger

Interaction Logger can be added to any element on a page.

It has 4 components with it:
Type	How it will be tracked
Category	The category to which the log is assigned
Name	The name for the log
Value	Optional, whether or not log value

First, add data-log= to the tracking element. The value of this property is the Type, which can have one or more types, separated by commas, as desired.

There are 8 Types in total:
onload	On page load
update	On updates
click	User clicks the tracking element
hover	User hovers over the tracking element
change	The tracking element is changed
scroll	Tracking element comes into view via scroll
shown	A tracked modal is shown
hidden	A tracked modal is hidden

Next is the Category. Add data-log-cat= followed by the category.
Then Name. Add data-log-name= followed by the name. All Names in a Category should be unique.
Finally, and this is optional, add data-log-value="true" if the Value is to be logged as well. The Value will be determined by the value of an input or the inner text of most other elements. You may also use data-log-value="nonzero" if you want the log to be conditional, and not allow zero or empty strings.

Usage Note(s)

This shows each of the different types available but usage will be specific to logging needs

Total Balance: $700,203.12
Have a question

<ul class="account-info">
  <li>Total Balance: <span data-log="onload, update" data-log-name="Total Balance" data-log-cat="Account Info" data-log-value="true">$700,203.12</span></li>
  <li>Have a question <i class="fa fa-question-circle help" data-log="click, hover" data-log-name="Total Balance Question" data-log-cat="Account Info Help" data-toggle="tooltip" title="All questions will be answered in due time."></i></li>
  <li><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#request-change-modal">Request Change</button></li>
</ul>

<div class="modal fade" id="request-change-modal" tabindex="-1" role="dialog" aria-labelledby="my-modal-label" aria-hidden="true" data-log="shown, hidden" data-log-name="Request Change Modal" data-log-cat="Modal Interaction">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="my-modal-label">Request Change</h4>
      </div>
      <div class="modal-body">
        <input class="form-control" data-log="change" data-log-name="Total Balance Change" data-log-cat="Account Info" data-log-value="true" value="$700,203.12" type="text" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" data-log="scroll" data-log-name="Scroll in modal" data-log-cat="Modal Interaction">Save changes</button>
      </div>
    </div>
  </div>
</div>

Initialize Interaction Logger

Interaction Logger must be initialized before it will be effective.

There are 4 properties of InteractionLogger:
path	Tracking page defaults to `window.location.pathname`
title	Defaults to `document.title`
logOnLoadTags	Set to true if you have `onload` logs
sessionContextData	This can be almost any extra information desired

If you set logOnLoadTags to true, then it still won't track them until logReady is triggered. This can be done with $(document).trigger("logReady");. When you have a significant change, you can call logUpdate to re-capture all the update logs. This can be done with $(document).trigger("logUpdate");

Usage Note(s)

There are certain values that, if specified, will be overwritten by the log itself. These include name, category, timestamp, & tagEvent among other more specific names. Common items to tack might be dynamic info like contact number or member ID.

<script>
  $(function(){
    var interactionLogger = new edgeui.InteractionLogger("", {
      path: "InteractionLoggerTestPage.html",
      title: "User Account Information",
      logOnLoadTags: true,
      sessionContextData: {
        // pageContext is a dynamic variable built with sign-in information
        contract: pageContext.contract,
        memberId: pageContext.memberId
      }
    });

    interactionLogger.init();
  });
</script>
<!-- Later in code, after all context is loaded on page -->
<script>
  // Everything is loaded, trigger "logReady"
  $(document).trigger("logReady");
  // Click '#save' and trigger "logUpdate"
  $("#save").click(function() {
    $(document).trigger("logUpdate");
  });
</script>

Deprecated

As of v1.1.0 this component has been deprecated. It will be completely removed from Edge UI in v2.0.0.

Left Navigator example

Use #left-nav for left hand site navigation with an optional single nested group of sub-items.

Usage Note(s)

This component is being grandfathered into EdgeUI, but will not be recommended nor supported going forward.

Disability Insurance

Overview

Approaches

Disability Insurance Awareness From Here to Security Market Niches

Business Loan Protection

Core Value

DI Retirement Security

Disability Buy-Out

Series 700 California

<div class="leftnav panel">
    <div class="leftnav-header">Disability Insurance</div>
    <div class="panel-body" data-collapse-type="manual">

        <!-- if node has no children and node is not active -->
        <a href="#" class="list-group-item leftnav-item">
            <div class="leftnav-heading">Overview</div>
        </a>

        <!-- if node has children and node is active, then add 'active' css class and expand to show children by adding 'in' css class -->
        <a href="#" class="list-group-item leftnav-item active">
            <div class="leftnav-expandbutton">
                <div class="pull-right icon-leftnav" data-toggle="collapse" data-parent="accordion" href="#left-nav-accordion-id-1">
                    <i class="fa fa-chevron-up icon-leftnav-spacing"></i>
                </div>
            </div>
            <div class="leftnav-heading">Approaches</div>
        </a>
        <div id="left-nav-accordion-id-1" class="panel-collapse collapse in">
            <div class="list-group-secondary">
                <a href="#" class="list-group-item list-group-item-secondary">Disability Insurance Awareness</a>
                <a href="#" class="list-group-item list-group-item-secondary">From Here to Security</a>
                <a href="#" class="list-group-item list-group-item-secondary">Market Niches</a>
            </div>
        </div>

        <!-- if node has no children and node is not active -->
        <a href="#" class="list-group-item leftnav-item">
            <div class="leftnav-heading">Business Loan Protection</div>
        </a>

        <a href="#" class="list-group-item leftnav-item">
            <div class="leftnav-heading">Core Value</div>
        </a>

        <a href="#" class="list-group-item leftnav-item">
            <div class="leftnav-heading">DI Retirement Security</div>
        </a>

        <!-- if node has children and node is not active -->
        <a href="#" class="list-group-item leftnav-item">
            <div class="leftnav-expandbutton">
                <div class="pull-right icon-leftnav collapsed" data-toggle="collapse" data-parent="accordion" href="#left-nav-accordion-id-2">
                    <i class="fa fa-chevron-up icon-leftnav-spacing"></i>
                </div>
            </div>
            <div class="leftnav-heading">Disability Buy-Out</div>

        </a>
        <div id="left-nav-accordion-id-2" class="panel-collapse collapse">
            <div class="list-group-secondary">
                <a href="#" class="list-group-item list-group-item-secondary">Series 700</a>
                <a href="#" class="list-group-item list-group-item-secondary">California</a>
            </div>
        </div>
    </div>
</div>

Some of the older browsers do not support CSS3 animations so an animated gif will appear in its place when viewed in those browsers

Example

Use i tags and include class "fa fa-spinner fa-spin" to add a spinner. Wrap that in a p tag with the class text-center to center the spinner.

Loading...

<p class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</p>

Corporate wide standard lower navigation.

Usage Note(s)

The lower navigation should be included on all pages. There are two options for lower navigation. One version for public sites (allows for multiple columns and links) and a version for the secured sites (simplified to only show contact related items). The lower navigation should always be followed by the footer component. Please see the Super Footer pattern for an example.

Authenticated example

Assign a class of .nav-lower and .nav-lower-authenticated to section element.

<section class="nav-lower nav-lower-authenticated">
  <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <nav>
              <ul class="nav nav-inline">
                <li><a href="tel:800.986.3343"><i class="fa fa-phone"></i> 800-986-3343</a></li>
                <li><a href="#placeholder" target="_blank"><i class="fa fa-envelope"></i> Contact Us</a></li>
              </ul>
          </nav>
        </div>
      </div>
  </div>
</section>

Unauthenticated Example

Assign a class of .nav-lower and .nav-lower-unauthenticated to section element. The lower navigation makes use for the "Accordion Navigation" component. As shown in the example below an nav-accordion-type of "mobileonly" must be applied (data-nav-accordion-type="mobileonly"). See the accordion navigation section for more details.

Usage Note(s)

The "Job Openings" link in the "We're Hiring!" column must display as "Job Openings", but can link directly to different jobs. For example on the advisors site this link could point directly to jobs for advisors.
IE 8 will not expand/collapse the footer links on mobile views. You can display the footer links by using conditional comments in your html markup to always leave these links expanded in IE 8. In the conditional IE 8 markup you will need to add the class "open" to the nav-accordion-item divs, and add the class "show" to the nav-accordion-content ul elements.

About Us

Company Overview
Corporate Social Responsibility
Investor Relations
News Room

We're Hiring!

Job Openings
Internships
Company Culture

Other Sites

For Advisors
Principal Funds
Principal Global Investors

Get Help

800-986-3343
Help Topics
Contact Us
Find an Advisor

<section class="social-list">
    <ul>
        <li><a href="#placeholder" target="_blank"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#placeholder" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#placeholder" target="_blank"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="#placeholder" target="_blank"><i class="fa fa-youtube-play"></i></a></li>
    </ul>
</section>
<section class="nav-lower nav-lower-unauthenticated">
    <div class="container">
        <div class="row">
            <section class="col-md-3 nav-accordion">
                <div class="nav-accordion-item" data-nav-accordion-type="mobileonly">
                    <div class="nav-accordion-heading"><a href="#placeholder">About Us <i class="fa fa-angle-down"></i></a></div>
                    <ul class="nav-accordion-content">
                        <li><a href="#placeholder">Company Overview</a></li>
                        <li><a href="#placeholder">Corporate Social Responsibility</a></li>
                        <li><a href="#placeholder">Investor Relations</a></li>
                        <li><a href="#placeholder">News Room</a></li>
                    </ul>
                </div>
            </section>

            <section class="col-md-3 nav-accordion">
                <div class="nav-accordion-item" data-nav-accordion-type="mobileonly">
                    <div class="nav-accordion-heading"><a href="#placeholder">We're Hiring! <i class="fa fa-angle-down"></i></a></div>
                    <ul class="nav-accordion-content">
                        <li><a href="#placeholder">Job Openings</a></li>
                        <li><a href="#placeholder">Internships</a></li>
                        <li><a href="#placeholder">Company Culture</a></li>
                    </ul>
                </div>
            </section>

            <section class="col-md-3 nav-accordion">
                <div class="nav-accordion-item" data-nav-accordion-type="mobileonly">
                    <div class="nav-accordion-heading"><a href="#placeholder">Other Sites <i class="fa fa-angle-down"></i></a></div>
                    <ul class="nav-accordion-content">
                        <li><a href="#placeholder">For Advisors</a></li>
                        <li><a href="#placeholder">Principal Funds</a></li>
                        <li><a href="#placeholder">Principal Global Investors</a></li>
                    </ul>
                </div>
            </section>

            <section class="col-md-3 nav-accordion">
                <div class="nav-accordion-item" data-nav-accordion-type="mobileonly">
                    <div class="nav-accordion-heading"><a href="#placeholder">Get Help <i class="fa fa-angle-down"></i></a></div>
                    <ul class="nav-accordion-content help-nav">
                        <li><i class="fa fa-phone"></i><a href="tel:800.986.3343">800-986-3343</a></li>
                        <li><i class="fa fa-question-circle"></i><a href="#placeholder">Help Topics</a></li>
                        <li><i class="fa fa-envelope"></i><a href="#placeholder" target="_blank">Contact Us</a></li>
                        <li><i class="fa fa-map-marker"></i><a href="#placeholder">Find an Advisor</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
</section>

Example in a list

Assign a class of .media.media-box.

Media heading
Media heading
Media heading
Media heading

<div class="row">
    <div class="col-md-3">
        <div class="media media-box">
            <div class="media-box-body">
                <ul class="media-list">
                    <li class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="http://placehold.it/50x50" alt="..." />
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                        </div>
                    </li>
                    <li class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="http://placehold.it/50x50" alt="..." />
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                        </div>
                    </li>
                    <li class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="http://placehold.it/50x50" alt="..." />
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                        </div>
                    </li>
                    <li class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="http://placehold.it/50x50" alt="..." />
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                        </div>
                    </li>
                </ul>
                <a class="pull-right" href="#">View More</a>
            </div>
        </div>
    </div>
</div>

Example with heading

Assign a class of .media.media-box. Within the media-box add an image with a class of .media-box-object. Immediately following the image add a div with a class of .media-box-body. Inside the body add a heading 2 (h2) with a class of .media-box-heading.

A cool story

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="media media-box">
            <img src="http://placehold.it/300x150" alt="" class="media-box-object" />
            <div class="media-box-body">
                <h2 class="media-box-heading">A cool story</h2>
            </div>
        </div>
        <div class="media-box">
            <img src="http://placehold.it/300x150" alt="" class="media-box-object /">
            <div class="media-box-body">
                <h2 class="media-box-heading">A cool story</h2>
            </div>
        </div>
    </div>
</div>

Example with heading and text

Assign a class of .media.media-box. Within the media-box add an image with a class of .media-box-object. Immediately following the image add a div with a class of .media-box-body. Inside the body add a heading 2 (h2) with a class of .media-box-heading and a paragraph (p).

A cool story

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ad quae minus quibusdam illo nostrum aut recusandae optio unde neque laudantium ex nemo libero cum aliquam rerum asperiores dolore blanditiis.

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="media media-box">
            <img src="http://placehold.it/500x250" alt="" class="media-box-object" />
            <div class="media-box-body">
                <h2 class="media-box-heading">A cool story</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ad quae minus quibusdam illo nostrum aut recusandae optio unde neque laudantium ex nemo libero cum aliquam rerum asperiores dolore blanditiis.</p>
            </div>
        </div>
    </div>
</div>

Alert modal that expires at a given date and stores a cookie when already viewed.

Assign a class of .modal-alert to the traditional bootstrap modal. Three additional attributes are needed for type two of the modal alert to work. 1. Add data-modal-alert-key="some-id-here", so the page can be tracked/cookies can be set. 2. Add data-modal-alert-type="one", which tells Edge UI which variant of the modal alert you want. NOTE, this is the default option. If no type is set then Edge UI will utilize this variant. 3. Add modal-alert-expiration="some-valid-date" (with the format MM/DD/YYYY) to set the message expiration date. The modal alert also comes with two main modes of dismissal. 1. If the backdrop is clicked or a button with the class modal-alert-remindme is clicked the modal will close and it will appear the next time the user visits the site. 2. If a button with the class modal-alert-action is clicked or if the modal is closed using the x in the top right corner, a cookie will be set and the modal will not appear again.

Usage Note(s)

This modal should be used when the message expiration date is relative instead of absolute. For example, if the expiration date is 12/31/2015 no matter whether the user views the message today or next week then this variant will work the best.

<div class="modal modal-alert in" data-modal-alert="" data-modal-alert-type="one" data-modal-alert-key="this-rsc-page" data-modal-alert-expiration="12/01/2015">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" aria-hidden="true">&times;</a>
                <h4 class="modal-title">Look what's new</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>This is a popup box. It is a little different. It has no mask behind it. It is also positioned relative to a specified element.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="modal-alert-remindme">Remind me later</a>
                <a href="#" class="modal-alert-action btn btn-primary btn-lg confirm-changes">Learn more</a>
            </div>
        </div>
    </div>
</div>

Assign a class of .modal-alert to the traditional bootstrap modal. Three additional attributes are needed for type two of the modal alert to work. 1. Add data-modal-alert-key="some-id-here", so the page can be tracked/cookies can be set. 2. Add data-modal-alert-type="two", which tells Edge UI which variant of the modal alert you want. 3. Add modal-alert-expiration="some-valid-date" (with the format MM/DD/YYYY) to set the message expiration date. The modal alert also comes with two main modes of dismissal. 1. If the backdrop is clicked or a button with the class modal-alert-remindme is clicked the modal will close and it will appear the next time the user visits the site. 2. If a button with the class modal-alert-action is clicked or if the modal is closed using the x in the top right corner, a cookie will be set and the modal will not appear again.

Usage Note(s)

This modal should be used when the message expiration date is relative instead of absolute. For example, if the message should always expire one day after viewing .

<div class="modal modal-alert in" data-modal-alert="" data-modal-alert-type="two" data-modal-alert-key="edgeui-example-two" data-modal-alert-expiration="08/31/2015">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" aria-hidden="true">&times;</a>
                <h4 class="modal-title">Look what's new</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>This is a popup box. It is a little different. It has no mask behind it. It is also positioned relative to a specified element.</p>
                        </div>
                        <div class="col-xs-6"> <img src="@@majorVersion/logo-principal-blue.svg" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="modal-alert-remindme">Remind me later</a>
                <a href="#" class="modal-alert-action btn btn-primary btn-lg confirm-changes">Learn more</a>
            </div>
        </div>
    </div>
</div>

Example

Assign a class of .nav-tabs-wrapper to section element to get the bottom border. If there is a secondary tier of navigation, add .dropdown to the list item. The piece of navigation that is active on the current page should have a class of .active and the parent list item should have a class of .active to keep it highlighted and .open to default it to open. Nav Tabs requires a bit of JavaScript to function properly, so include data-nav-tabs on the ul element to initialize the script.

<section class="nav-tabs-wrapper">
  <div class="container">
    <ul class="nav nav-tabs nav-tabs-alt" data-nav-tabs>
      <li class="dropdown active open">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1</a>
        <div class="dropdown-menu dropdown-menu-bar">
            <div class="container">
              <ul class="nav nav-pills">
                <li class="active"><a href="#">Sub Link 1</a></li>
                <li><a href="#">Sub Link 2</a></li>
            </ul>
            </div>
          </div>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 2</a>
        <div class="dropdown-menu dropdown-menu-bar">
            <div class="container">
              <ul class="nav nav-pills">
                <li><a href="#">Sub Link 3</a></li>
                <li><a href="#">Sub Link 4</a></li>
            </ul>
            </div>
          </div>
      </li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>
</section>

There are four types of numeric incrementers to choose from. An incrementer with no bounds specified. The incrementer runs from -infinity to +infinity. An incrementer with a lower and upper bound specified. The incrementer is only allowed to run within the range that has been specified. Example, 0 to 10 if the lower bound is 0 and the upper bound is 10. An incrementer with no lower bound, but an upper bound is specified. The incrementer runs from -infinity to the upper bound. Example, -infinity to 10 if the upper bound is 10. An incrementer with a lower bound specified, but no upper bound. The incrementer runs from the lower bound to +infinity. Example, 0 to +infinity if the lower bound is 0.

Example with bounds

Assign a class of .number-incrementer to the div along with the desired data-number-incrementer-lowerBound and data-number-incrementer-upperBound. Assign the classes .decrement and .increment to the corresponding buttons. Assign a .number-incrementer-input class to the input box.

Usage Note(s)

This incrementer should be used if a range has been specified. In this case a range of -5 to 5 has been specified.

<div class="number-incrementer" data-number-incrementer-lowerBound="-5" data-number-incrementer-upperBound="5">
  <button type="button" class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
  <input type="text" id="numeric-incrementer-1" class="number-incrementer-input" value="1" readonly />
  <button type="button" class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>

Example with lower bound

Assign a class of .number-incrementer to the div along with the desired data-number-incrementer-lowerBound and data-number-incrementer-upperBound. Assign the classes .decrement and .increment to the corresponding buttons. Assign a .number-incrementer-input class to the input box.

Usage Note(s)

This incrementer should be used if a lower bound has been specified. In this case a lower bound of -5 has been specified.

<div class="number-incrementer" data-number-incrementer-lowerBound="-5" data-number-incrementer-upperBound="noUpperBound">
  <button type="button" class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
  <input type="text" id="numeric-incrementer-4" class="number-incrementer-input" value="1" readonly />
  <button type="button" class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>

Example with no bounds

Assign a class of .number-incrementer to the div. Assign the classes .decrement and .increment to the corresponding buttons. Assign a .number-incrementer-input class to the input box.

Usage Note(s)

This incrementer should be used if no specific range is required.

<div class="number-incrementer" data-number-incrementer-lowerBound="noLowerBound" data-number-incrementer-upperBound="noUpperBound">
  <button type="button" class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
  <input type="text" id="numeric-incrementer-2" class="number-incrementer-input" value="1" readonly />
  <button type="button" class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>

Example with upper bound

Assign a class of .number-incrementer to the div along with the desired data-number-incrementer-lowerBound and data-number-incrementer-upperBound. Assign the classes .decrement and .increment to the corresponding buttons. Assign a .number-incrementer-input class to the input box.

Usage Note(s)

This incrementer should be used if an upper bound has been specified. In this case an upper bound of 5 has been specified.

<div class="number-incrementer" data-number-incrementer-lowerBound="noLowerBound" data-number-incrementer-upperBound="5">
  <button type="button" class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
  <input type="text" id="numeric-incrementer-3" class="number-incrementer-input" value="1" readonly />
  <button type="button" class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>

Principal modification to bootstrap table. Adds a border on a table when there is overflow

Example

This component adds the bootstrap class of .table-bordered to a table if the table has an overflow. This component works well for tables that with large amounts of data shown or if the data will be shown on a smaller screen. Assign the bootstrap class .table in a table and set data-responsive-table="true" to apply this component.

First Name	Last Name	Phone Number	Street Address	City	State	Zip Code
Greg	Stevens	555-456-7890	123 4th Street	Des Moines	Iowa	50309
Janice	Johnson	555-555-5555	777 Oak Ave.	Burlington	Iowa	50049
Ron	Stevens	098-765-4321	1724 Random Data Blvd.	Raleigh	North Carolina	11123

<div class="table-responsive">
  <table data-responsive-table="true" class="table">
    <thead>
      <tr>
        <td><strong>First Name</strong></td>
        <td><strong>Last Name</strong></td>
        <td><strong>Phone Number</strong></td>
        <td><strong>Street Address</strong></td>
        <td><strong>City</strong></td>
        <td><strong>State</strong></td>
        <td><strong>Zip Code</strong></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Greg</td>
        <td>Stevens</td>
        <td>555-456-7890</td>
        <td>123 4th Street</td>
        <td>Des Moines</td>
        <td>Iowa</td>
        <td>50309</td>
      </tr>
      <tr>
        <td>Janice</td>
        <td>Johnson</td>
        <td>555-555-5555</td>
        <td>777 Oak Ave.</td>
        <td>Burlington</td>
        <td>Iowa</td>
        <td>50049</td>
      </tr>
      <tr>
        <td>Ron</td>
        <td>Stevens</td>
        <td>098-765-4321</td>
        <td>1724 Random Data Blvd.</td>
        <td>Raleigh</td>
        <td>North Carolina</td>
        <td>11123</td>
      </tr>
    </tbody>
  </table>
</div>

Select2 is a way of searching through drop-down menus

Usage Note(s)

Please visit http://ivaynberg.github.io/select2/ for full documentation and options.

Select2 Basic

Add data-select-two to any select element. This will allow the options to be searchable.

Usage Note(s)

Try typing a then p. After that, try typing c then o to see Select2 in action.

<select data-select-two>
  <option value="1">apples</option>
  <option value="2">apricots</option>
  <option value="3">broccoli</option>
  <option value="4">candy</option>
  <option value="5">cantaloupe</option>
  <option value="6">capicola</option>
</select>

Select2 even works inside of EdgeUi modals.

Usage Note(s)

If you want a placeholder on a single-select, you must provide an empty <option></option> as your first option.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#normal">Fire Modal</button>

<div class="modal fade" id="normal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select data-select-two data-select-two-options='{
            "placeholder":"Select a food",
            "width":"300px"}'>
          <option></option>
          <option value="1">apples</option>
          <option value="2">apricots</option>
          <option value="3">broccoli</option>
          <option value="4">candy</option>
          <option value="5">cantaloupe</option>
          <option value="6">capicola</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-secondary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Select2 Options

To add options to your Select2 list, add data-select-two-options followed by the desired options in JSON form. For a complete list of options, please look at http://ivaynberg.github.io/select2/#documentation

Usage Note(s)

Just like any other select element, Select2 works with multiple="multiple" as well.

<select data-select-two data-select-two-options='{
  "placeholder":"Select up to 3 foods",
  "width":"250px",
  "allowClear":false,
  "maximumSelectionSize": 3}'
  multiple="multiple">
  <option value="1">apples</option>
  <option value="2">apricots</option>
  <option value="3">broccoli</option>
  <option value="4">candy</option>
  <option value="5">cantaloupe</option>
  <option value="6">capicola</option>
</select>

Please note that social icons will display as squares on Internet Explorer 8 browsers. Please do not use this component outside of the Super Footer pattern.

Assign a class of .social-list to section element. Assign a class of fa along with the social media specific class (i.e. fa-facebook) to each corresponding li element.

<section class="social-list">
  <ul>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-youtube-play"></i></a></li>
  </ul>
</section>

Assign the classes .social-list and social-list-md to the section element. Assign a class of fa along with the social media specific class (i.e. fa-facebook) to each corresponding li element.

<section class="social-list social-list-md">
  <ul>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-youtube-play"></i></a></li>
  </ul>
</section>

Assign the classes .social-list and social-list-sm to the section element. Assign a class of fa along with the social media specific class (i.e. fa-facebook) to each corresponding li element.

<section class="social-list social-list-sm">
  <ul>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#placeholder" target="_blank"><i class="fa fa-youtube-play"></i></a></li>
  </ul>
</section>

No li elements necessary.

<section class="social-list">

</section>

Display Utilities Example

Display helper classes allow fixed display properties to be added to any element on the page without writing custom styles.

Display Utilities

Class Name	Description
.util-inline	Resets an element as an inline element
.util-inlineBlock	Resets an element as an inline block element
.util-table	Resets the element to behave as a table element
.util-tableCell	Resets the element to behave as a table cell element

<table class="table">
<h3>Display Utilities</h3>
  <thead>
    <tr>
      <th>Class Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>.util-inline</td>
      <td>Resets an element as an inline element</td>
    </tr>
    <tr>
      <td>.util-inlineBlock</td>
      <td>Resets an element as an inline block element</td>
    </tr>
    <tr>
      <td>.util-table</td>
      <td>Resets the element to behave as a table element</td>
    </tr>
    <tr>
      <td>.util-tableCell</td>
      <td>Resets the element to behave as a table cell element</td>
    </tr>

  </tbody>
</table>

Margin Utilities Example

Margin helper classes allow fixed pixel margins to be added to any element on the page without writing custom styles.

Margin Utilities

Class Name	Description
.util-margin-0	Resets all margins to 0px
.util-margin-left-0	Resets the left margin to 0px
.util-margin-right-0	Resets the right margin to 0px
.util-margin-top-0	Resets the top margin to 0px
.util-margin-bottom-0	Resets the bottom margin to 0px
.util-margin-horz-0	Resets the left and right margins to 0px
.util-margin-vert-0	Resets the top and bottom margins to 0px

.util-margin-5	Resets all margins to 5px
.util-margin-left-5	Resets the left margin to 5px
.util-margin-right-5	Resets the right margin to 5px
.util-margin-top-5	Resets the top margin to 5px
.util-margin-bottom-5	Resets the bottom margin to 5px
.util-margin-horz-5	Resets the left and right margins to 5px
.util-margin-vert-5	Resets the top and bottom margins to 5px

.util-margin-10	Resets all margins to 10px
.util-margin-left-10	Resets the left margin to 10px
.util-margin-right-10	Resets the right margin to 10px
.util-margin-top-10	Resets the top margin to 10px
.util-margin-bottom-10	Resets the bottom margin to 10px
.util-margin-horz-10	Resets the left and right margins to 10px
.util-margin-vert-10	Resets the top and bottom margins to 10px

.util-margin-15	Resets all margins to 15px
.util-margin-left-15	Resets the left margin to 15px
.util-margin-right-15	Resets the right margin to 15px
.util-margin-top-15	Resets the top margin to 15px
.util-margin-bottom-15	Resets the bottom margin to 15px
.util-margin-horz-15	Resets the left and right margins to 15px
.util-margin-vert-15	Resets the top and bottom margins to 15px

<table class="table">
<h3>Margin Utilities</h3>
  <thead>
    <tr>
      <th>Class Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>.util-margin-0</td>
      <td>Resets all margins to 0px</td>
    </tr>
    <tr>
      <td>.util-margin-left-0</td>
      <td>Resets the left margin to 0px</td>
    </tr>
     <tr>
      <td>.util-margin-right-0</td>
      <td>Resets the right margin to 0px</td>
    </tr>
    <tr>
      <td>.util-margin-top-0</td>
      <td>Resets the top margin to 0px</td>
    </tr>
    <tr>
      <td>.util-margin-bottom-0</td>
      <td>Resets the bottom margin to 0px</td>
    </tr>
    <tr>
      <td>.util-margin-horz-0</td>
      <td>Resets the left and right margins to 0px</td>
    </tr>
    <tr>
      <td>.util-margin-vert-0</td>
      <td>Resets the top and bottom margins to 0px</td>
    </tr>
    <tr><td></td><td></td></tr>

    <tr>
      <td>.util-margin-5</td>
      <td>Resets all margins to 5px</td>
    </tr>
    <tr>
      <td>.util-margin-left-5</td>
      <td>Resets the left margin to 5px</td>
    </tr>
     <tr>
      <td>.util-margin-right-5</td>
      <td>Resets the right margin to 5px</td>
    </tr>
    <tr>
      <td>.util-margin-top-5</td>
      <td>Resets the top margin to 5px</td>
    </tr>
    <tr>
      <td>.util-margin-bottom-5</td>
      <td>Resets the bottom margin to 5px</td>
    </tr>
    <tr>
      <td>.util-margin-horz-5</td>
      <td>Resets the left and right margins to 5px</td>
    </tr>
    <tr>
      <td>.util-margin-vert-5</td>
      <td>Resets the top and bottom margins to 5px</td>
    </tr>
    <tr><td></td><td></td></tr>

    <tr>
      <td>.util-margin-10</td>
      <td>Resets all margins to 10px</td>
    </tr>
    <tr>
      <td>.util-margin-left-10</td>
      <td>Resets the left margin to 10px</td>
    </tr>
     <tr>
      <td>.util-margin-right-10</td>
      <td>Resets the right margin to 10px</td>
    </tr>
    <tr>
      <td>.util-margin-top-10</td>
      <td>Resets the top margin to 10px</td>
    </tr>
    <tr>
      <td>.util-margin-bottom-10</td>
      <td>Resets the bottom margin to 10px</td>
    </tr>
    <tr>
      <td>.util-margin-horz-10</td>
      <td>Resets the left and right margins to 10px</td>
    </tr>
    <tr>
      <td>.util-margin-vert-10</td>
      <td>Resets the top and bottom margins to 10px</td>
    </tr>
    <tr><td></td><td></td></tr>

    <tr>
      <td>.util-margin-15</td>
      <td>Resets all margins to 15px</td>
    </tr>
    <tr>
      <td>.util-margin-left-15</td>
      <td>Resets the left margin to 15px</td>
    </tr>
     <tr>
      <td>.util-margin-right-15</td>
      <td>Resets the right margin to 15px</td>
    </tr>
    <tr>
      <td>.util-margin-top-15</td>
      <td>Resets the top margin to 15px</td>
    </tr>
    <tr>
      <td>.util-margin-bottom-15</td>
      <td>Resets the bottom margin to 15px</td>
    </tr>
    <tr>
      <td>.util-margin-horz-15</td>
      <td>Resets the left and right margins to 15px</td>
    </tr>
    <tr>
      <td>.util-margin-vert-15</td>
      <td>Resets the top and bottom margins to 15px</td>
    </tr>
    <tr><td></td><td></td></tr>

  </tbody>
</table>

Padding Utilities Example

Padding helper classes allow fixed pixel padding to be added to any element on the page without writing custom styles.

Padding Utilities

Class Name	Description
.util-padding-0	Resets all padding to 0px
.util-padding-left-0	Resets the left padding to 0px
.util-padding-right-0	Resets the right padding to 0px
.util-padding-top-0	Resets the top padding to 0px
.util-padding-bottom-0	Resets the bottom padding to 0px
.util-padding-horz-0	Resets the left and right padding to 0px
.util-padding-vert-0	Resets the top and bottom padding to 0px

.util-padding-5	Resets all padding to 5px
.util-padding-left-5	Resets the left padding to 5px
.util-padding-right-5	Resets the right padding to 5px
.util-padding-top-5	Resets the top padding to 5px
.util-padding-bottom-5	Resets the bottom padding to 5px
.util-padding-horz-5	Resets the left and right padding to 5px
.util-padding-vert-5	Resets the top and bottom padding to 5px

.util-padding-10	Resets all padding to 10px
.util-padding-left-10	Resets the left padding to 10px
.util-padding-right-10	Resets the right padding to 10px
.util-padding-top-10	Resets the top padding to 10px
.util-padding-bottom-10	Resets the bottom padding to 10px
.util-padding-horz-10	Resets the left and right padding to 10px
.util-padding-vert-10	Resets the top and bottom padding to 10px

.util-padding-15	Resets all padding to 15px
.util-padding-left-15	Resets the left padding to 15px
.util-padding-right-15	Resets the right padding to 15px
.util-padding-top-15	Resets the top padding to 15px
.util-padding-bottom-15	Resets the bottom padding to 15px
.util-padding-horz-15	Resets the left and right padding to 15px
.util-padding-vert-15	Resets the top and bottom padding to 15px

<table class="table">
<h3>Padding Utilities</h3>
  <thead>
    <tr>
      <th>Class Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>.util-padding-0</td>
      <td>Resets all padding to 0px</td>
    </tr>
    <tr>
      <td>.util-padding-left-0</td>
      <td>Resets the left padding to 0px</td>
    </tr>
     <tr>
      <td>.util-padding-right-0</td>
      <td>Resets the right padding to 0px</td>
    </tr>
    <tr>
      <td>.util-padding-top-0</td>
      <td>Resets the top padding to 0px</td>
    </tr>
    <tr>
      <td>.util-padding-bottom-0</td>
      <td>Resets the bottom padding to 0px</td>
    </tr>
    <tr>
      <td>.util-padding-horz-0</td>
      <td>Resets the left and right padding to 0px</td>
    </tr>
    <tr>
      <td>.util-padding-vert-0</td>
      <td>Resets the top and bottom padding to 0px</td>
    </tr>
    <tr><td></td><td></td></tr>

    <tr>
      <td>.util-padding-5</td>
      <td>Resets all padding to 5px</td>
    </tr>
    <tr>
      <td>.util-padding-left-5</td>
      <td>Resets the left padding to 5px</td>
    </tr>
     <tr>
      <td>.util-padding-right-5</td>
      <td>Resets the right padding to 5px</td>
    </tr>
    <tr>
      <td>.util-padding-top-5</td>
      <td>Resets the top padding to 5px</td>
    </tr>
    <tr>
      <td>.util-padding-bottom-5</td>
      <td>Resets the bottom padding to 5px</td>
    </tr>
    <tr>
      <td>.util-padding-horz-5</td>
      <td>Resets the left and right padding to 5px</td>
    </tr>
    <tr>
      <td>.util-padding-vert-5</td>
      <td>Resets the top and bottom padding to 5px</td>
    </tr>
    <tr><td></td><td></td></tr>

    <tr>
      <td>.util-padding-10</td>
      <td>Resets all padding to 10px</td>
    </tr>
    <tr>
      <td>.util-padding-left-10</td>
      <td>Resets the left padding to 10px</td>
    </tr>
     <tr>
      <td>.util-padding-right-10</td>
      <td>Resets the right padding to 10px</td>
    </tr>
    <tr>
      <td>.util-padding-top-10</td>
      <td>Resets the top padding to 10px</td>
    </tr>
    <tr>
      <td>.util-padding-bottom-10</td>
      <td>Resets the bottom padding to 10px</td>
    </tr>
    <tr>
      <td>.util-padding-horz-10</td>
      <td>Resets the left and right padding to 10px</td>
    </tr>
    <tr>
      <td>.util-padding-vert-10</td>
      <td>Resets the top and bottom padding to 10px</td>
    </tr>
    <tr><td></td><td></td></tr>

    <tr>
      <td>.util-padding-15</td>
      <td>Resets all padding to 15px</td>
    </tr>
    <tr>
      <td>.util-padding-left-15</td>
      <td>Resets the left padding to 15px</td>
    </tr>
     <tr>
      <td>.util-padding-right-15</td>
      <td>Resets the right padding to 15px</td>
    </tr>
    <tr>
      <td>.util-padding-top-15</td>
      <td>Resets the top padding to 15px</td>
    </tr>
    <tr>
      <td>.util-padding-bottom-15</td>
      <td>Resets the bottom padding to 15px</td>
    </tr>
    <tr>
      <td>.util-padding-horz-15</td>
      <td>Resets the left and right padding to 15px</td>
    </tr>
    <tr>
      <td>.util-padding-vert-15</td>
      <td>Resets the top and bottom padding to 15px</td>
    </tr>
  </tbody>
</table>

Position Utilities Example

Position helper classes allow fixed positions to be added to any element on the page without writing custom styles.

Position Utilities

Class Name	Description
.util-pos-rel	Resets an element relative to its normal position

<table class="table">
<h3>Position Utilities</h3>
  <thead>
    <tr>
      <th>Class Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>.util-pos-rel</td>
      <td>Resets an element relative to its normal position</td>
    </tr>

  </tbody>
</table>

Step indicator supports 2 to 8 steps.

Step indicator example

Assign a class of .indicator to the ol element containing the written step information. Next, assign a class of .eui-indicator-step to the subsequent li element along with the corresponding class to the amount of steps in the indicator (in this case .eui-indicator-step-active).

Requirement(s)

Please note that although the new step indicator component is fully functional on all browsers, it loses some functionality in IE8 below a 480px screen resolution.
The new step indicator component is meant to be a full-screen component. It may not work as expected if not contained in a full twelve columns.

Usage Note(s)

Where possible, divide long forms or processes into multiple smaller forms that constitute a series of logical steps. This helps make long forms and processes easier to understand and decreases a users' cognitive load. The following guidelines apply for usage of the Step Indicator.
A Step Indicator is very useful for desktop users, although this component/module will render well for mobile users too. This component is appropriate for use with processes that range from 3 to 7 steps. Processes with more than 7 steps need to be assessed from an information architecture perspective. Use the active indicator at each step the user is on, to let them know what step they are actively using, and how many steps are left (provides context). This can be used for linear processes (where users must go through the process in a specific order), and non-linear processes (where users can move forward and back to any step in the process)
Linear process - Implement the step indicator in such a way as to prevent users from jumping ahead of their current step. Allow users to move back and forth on all completed steps up to the point of their current step (unless conditional logic applies – in this case implement logic on the earlier page that alerts the user to the implications of changing previously entered/conditional data)
Non-linear process - Implement the step indicator in a way that allows users to move to any step within the process at any time.

<ol class="indicator">
  <li class="eui-step-indicator">
    <a href="#">Expecto Patronum</a>
  </li>
  <li class="eui-step-indicator">
    <a href="#">Impedimenta</a>
  </li>
  <li class="eui-step-indicator eui-step-indicator-active">
    <a href="#" aria-disabled="true">Cruciatus</a>
  </li>
  <li class="eui-step-indicator eui-step-indicator-disabled">
    <a href="#"  aria-disabled="true">Expelliarmus</a>
  </li>
  <li class="eui-step-indicator eui-step-indicator-disabled">
    <a href="#" aria-disabled="true">Avada Kedavra</a>
  </li>
</ol>

The table to card component is intended for relatively small tables. There is technically no maximum number of colums supported; however, it is recommended that this component not be used on large tables. Please consult with your UX partner for alternative options for large tabular data.

Multiple row example

Assign a class of .card-multi to the main wrapping column element. This element must contain a table. The table should have a thead and a tbody element. The final markup requirement for this component is adding a data-heading attribute to the 2nd through n td elements. The value of each of these data elements should match the associated th value.

My Account Summary

Defined Contribution Retirement Plan	Account Balance	Vested Balance	Loan Balance
ABC Company Select Plan	$85,412.66	$71,161.63	$0
ABC Company Select Plan 2	$86,753.09	$67,413.84	$0

<h2>My Account Summary</h2>
<div class="row">
  <div class="col-xs-12 card-multi">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th class="card-top">Defined Contribution Retirement Plan</th>
          <th>Account Balance</th>
          <th>Vested Balance</th>
          <th>Loan Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a href="#">ABC Company Select Plan</a>
          </td>
          <td data-heading="Account Balance">
            <span>
              $85,412.66
            </span>
          </td>
          <td data-heading="Vested Balance">
            <span>
              $71,161.63
            </span>
          </td>
          <td data-heading="Loan Balance">
            <span>
              $0
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">ABC Company Select Plan 2</a>
          </td>
          <td data-heading="Account Balance">
            <span>
              $86,753.09
            </span>
          </td>
          <td data-heading="Vested Balance">
            <span>
              $67,413.84
            </span>
          </td>
          <td data-heading="Loan Balance">
            <span>
              $0
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Single row example

Assign a class of .card-single to the main wrapping column element. This element must contain a table. The table should have a thead and a tbody element. The final markup requirement for this component is adding a data-heading attribute to the 2nd through n td elements. The value of each of these data elements should match the associated th value.

My Account Summary

Defined Contribution Retirement Plan	Account Balance	Vested Balance	Loan Balance
ABC Company Select Plan	$85,412.66	$71,161.63	$0

<h2>My Account Summary</h2>
<div class="row">
  <div class="col-xs-12 card-single">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th class="card-top">Defined Contribution Retirement Plan</th>
          <th>Account Balance</th>
          <th>Vested Balance</th>
          <th>Loan Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a href="#">ABC Company Select Plan</a>
          </td>
          <td data-heading="Account Balance">
            <span>
              $85,412.66
            </span>
          </td>
          <td data-heading="Vested Balance">
            <span>
              $71,161.63
            </span>
          </td>
          <td data-heading="Loan Balance">
            <span>
              $0
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Add a picture and a quote to make your very own testimonial!

Usage Note(s)

This element is intended to utilize the full width of the page, the picture and quote should line up flush when used correctly. Be weary when using a long quote -- Too long of a quote will add an awkward white space between the picture and the component immediately beneath it. There is an option to create a class of, for example, .testimonial-img to the img element and add a negative margin-top style. This will give an effect of an overflow to the content above the testimonial. This class is meant to be added to the img element. DO NOT remove the .img-responsive class.

Example

Assign a class of .img-responsive to the img element. Make sure to set your picture URL in the img tags. Now assign a .quote class to the next div element where you want the customer quote. In order to get the name and location of the person being quoted add the class .quoted to the p element surrounding that text.

"I've trusted the Principal with my retirement because of the simplicity and transparency in their experience."

Sarah Lakos, Des Moines, IA

<div class="testimonial">
  <div class="row">
    <div class="col-xs-5">
      <img class="img-responsive" alt="testimonial" src="http://ux.pilot.principal.com/images/sample-testimonial-image.jpg" />
    </div>
    <div class="col-xs-7">
      <div class="quote">
        <p>"I've trusted the Principal with my retirement because of the simplicity and transparency in their experience."</p>
        <p class="quoted">Sarah Lakos, <span>Des Moines, IA</span></p>
      </div>
    </div>
  </div>
</div>

Example

Rollover

Simplify things by rolling over past retirement accounts into one single account.

Learn more

Rollover

Simplify things by rolling over past retirement accounts into one single account.

Learn more

Rollover

Simplify things by rolling over past retirement accounts into one single account.

Learn more

<div class="row row-md-flex">
  <div class="col-xs-12 col-md-4 tout">
    <div class="tout-icon">
      <img src="http://ux.pilot.principal.com/images/icon.png" alt="tout-icon" class="img-responsive" />
    </div>
    <div class="tout-content">
      <div class="tout-header">
        <h2>Rollover</h2>
      </div>
      <div class="tout-body">
        <p>Simplify things by rolling over past retirement accounts into one single account.</p>
        <a class="tout-cta" href="#"><span class="tout-cta-text">Learn more</span></a>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 tout">
    <div class="tout-icon">
      <img src="http://ux.pilot.principal.com/images/icon.png" alt="tout-icon" class="img-responsive" />
    </div>
    <div class="tout-content">
      <div class="tout-header">
        <h2>Rollover</h2>
      </div>
      <div class="tout-body">
        <p>Simplify things by rolling over past retirement accounts into one single account.</p>
        <a class="tout-cta" href="#"><span class="tout-cta-text">Learn more</span></a>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 tout">
    <div class="tout-icon">
      <img src="http://ux.pilot.principal.com/images/icon.png" alt="tout-icon" class="img-responsive" />
    </div>
    <div class="tout-content">
      <div class="tout-header">
        <h2>Rollover</h2>
      </div>
      <div class="tout-body">
        <p>Simplify things by rolling over past retirement accounts into one single account.</p>
        <a class="tout-cta" href="#"><span class="tout-cta-text">Learn more</span></a>
      </div>
    </div>
  </div>
</div>

These components allow you to apply different classes to text and change their appearance.

Example

Assign a .text-light, .text-book, or .text-medium class to a p element to change its boldness. These helper classes apply font-families of Gotham SSm 3r, Gotham SSm 4r, and Gotham SSm 5r to the text, respectively, and appear progressively bolder.

I am normal text.

I'm text assigned with the text-light class!

I'm text assigned with the text-book class!

I'm text assigned with the text-medium class!

<p>I am normal text.</p>
<p class="text-light">I'm text assigned with the text-light class!</p>
<p class="text-book">I'm text assigned with the text-book class!</p>
<p class="text-medium">I'm text assigned with the text-medium class!</p>

Responsive, HTML5 video player

Example

This video player will scale to fit the device screen size using responsive design techniques. The video embed uses Brightcove's HTML5 player, which will allow it to work on modern devices and browsers. The preferred method for embed codes is to use iFrames.

Usage Note(s)

In BrightCove, using the quick video publish tool, choose "HTML5 Player" and then copy the iFrame publishing code. Contain the code inside a div element. Assign a class of .html5-player to the outermost div element.

<div class="html5-player">
  <!-- Start of Brightcove Player -->
  <iframe src="//players.brightcove.net/1162425107001/589295f1-5cc5-4850-95fd-3498d7685c31_default/index.html?videoId=4091210259001" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>
  <!-- End of Brightcove Player -->
</div>

Principal Components

Accordion navigation

Example

Auto Tab

Deprecated

Birthday example

Phone number example

Badges

Example

Usage Note(s)

Chromeless Player

Deprecated

Example

Usage Note(s)

Co-Browse

Example

Usage Note(s)

Datepicker

Example

Usage Note(s)

Deprecated Step Indicator

Deprecated

Deprecated eight step indicator example

Deprecated five step indicator example

Footer

Example

Usage Note(s)

Hero

Usage Note(s)

Example with dark image

Usage Note(s)

Header Text on the Left

Example with text on the left

Usage Note(s)

Header Text on the Left

Example with text on the right

Usage Note(s)

Header Text Right

Inline Navigation

Example

Example small

Example with icons

Input Mask

Input Mask examples

Usage Note(s)

Interaction Logger

Usage Note(s)

How to Use Interaction Logger

Usage Note(s)

Initialize Interaction Logger

Usage Note(s)

Left Navigator

Deprecated

Left Navigator example

Usage Note(s)

Loading Spinner

Example

Lower Navigation

Usage Note(s)

Authenticated example

Unauthenticated Example

Usage Note(s)

Media box

Example in a list

Media heading

Media heading

Media heading

Media heading

Example with heading

A cool story

A cool story

Example with heading and text

A cool story

Modal Alert

Type one

Usage Note(s)

Type two

Usage Note(s)

Navigation Tabs

Example