Principal Components
Principal built and maintained components.
Lower Navigation
Corporate wide standard lower navigation.
Usage Note
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.
Unauthenticated Example
Assign a class of .nav-lower 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
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.
<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">
<div class="row">
<div class="col-md-3 nav-accordion-item" data-nav-accordion-type="mobileonly">
<div class="nav-accordion-heading"><a href="#placeholder">Get to Know Us</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>
<li><a href="#placeholder">Becoming a Supplier</a></li>
</ul>
</div>
<div class="col-md-3 nav-accordion-item" data-nav-accordion-type="mobileonly">
<div class="nav-accordion-heading"><a href="#placeholder">We're Hiring!</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>
<div class="col-md-3 nav-accordion-item" data-nav-accordion-type="mobileonly">
<div class="nav-accordion-heading"><a href="#placeholder">Other Sites</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>
<div class="col-md-3 nav-accordion-item" data-nav-accordion-type="mobileonly">
<div class="nav-accordion-heading"><a href="#placeholder">Get Help</a></div>
<ul class="nav-accordion-content help-nav">
<li><i class="fa fa-phone"></i><a href="tel:800.986.3343">1.800.986.3343</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>
</div>
</section>
Authenticated example
Assign a class of .nav-lower to section 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>
<section class="nav-lower">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-inline">
<li><a href="tel:800.986.3343"><i class="fa fa-phone"></i> 1.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>
</section>
Modal Alert
Alert modal that expires at a given date and stores a cookie when already viewed.
Modal Alert Example
Assign a class of .modal-alert to the a traditional bootstrap modal. When adding the classes set the key data-modal-alert-key="some-id-here" so the page can be tracked/cookies can be set. Also, set the message expiration date modal-alert-expiration="12/12/2025" to define the duration of the alert. This modal appears on the page load and creates a backdrop. If the backdrop is clicked or the "remind me later" button is clicked the modal will close and it will appear the next time the user visits the site. If the "Learn More" button is clicked or if the modal is closed, a cookie will be set and the message will not appear again.
Usage Note
This modal should be used for time-sensitive alerts.
<div class="modal modal-alert in" data-modal-alert="" 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">×</a>
<h4 class="modal-title">Look what's new</h4>
</div>
<div class="modal-body">
<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 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>
Footer
Corporate wide standard footer.
Footer Example
Assign a class of .footer to the primary footer element.
Usage Note
This footer should be used on all digital properties.
<footer class="footer">
<section class="bg-gray-lighter text-center text-muted footer-row">
<nav>
<ul class="nav nav-inline">
<li><a href="#placeholder">Terms of Use</a></li>
<li><a href="#placeholder">Disclosures</a></li>
<li><a href="#placeholder">Privacy</a></li>
<li><a href="#placeholder">Security</a></li>
<li><a href="#placeholder">Report Fraud</a></li>
<li><a href="#placeholder">Site Map</a></li>
<li><a href="/https.secure05/corp/webreply/contactUs">Contact Us</a></li>
</ul>
</nav>
<div>
<small>© 2014, Principal Financial Services, Inc.</small>
<p style="color:red">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." Additionally, this text must be the same size, color and weight as body text for regulatory reasons</p>
</div>
</section>
</footer>
Accordion navigation
Accordion navigation 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-chevron-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-chevron-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-chevron-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
Auto tab between textboxes
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.
<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>
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.
<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>
Left Navigator
Left Navigator example
Use #left-nav for left hand site navigation with an optional single nested group of sub-items.
<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="#78b2b3dc-4b8f-468f-bf98-46ffa2775fea">
<i class="fa fa-chevron-up icon-leftnav-spacing"></i>
</div>
</div>
<div class="leftnav-heading">Approaches</div>
</a>
<div id="78b2b3dc-4b8f-468f-bf98-46ffa2775fea" 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="#34c10846-5ae0-4eda-a2fb-e17840cac9af">
<i class="fa fa-chevron-up icon-leftnav-spacing"></i>
</div>
</div>
<div class="leftnav-heading">Disability Buy-Out</div>
</a>
<div id="34c10846-5ae0-4eda-a2fb-e17840cac9af" 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>
Inline Navigation
Inline navigation (small) example
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>
Inline navigation (icons) 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="tel:800.986.3343"><i class="fa fa-phone"></i> 1.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>
Inline navigation 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>
Interaction Logger
Interaction Logger provides for easy logging of user experience
Usage Note
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 7 Types in total: | ||
| onload | On page load | |
|---|---|---|
| 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.
Example of logging elements
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" 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 class="btn btn-primary" data-toggle="modal" data-target="#requestChangeModal">Request Change</button></li>
</ul>
<div class="modal fade" id="requestChangeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h4 class="modal-title" id="myModalLabel">Request Change</h4>
</div>
<div class="modal-body">
<input 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");.
SessionContextData
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");
</script>
Social List
Please note that social icons will display as squares on Internet Explorer 8 browsers.
With small icons example
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>
With medium icons example
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>
With icons example
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>
Without icons example
No li elements necessary.
<section class="social-list">
</section>
Responsive Table
Principal modification to bootstrap table. Adds a border on a table when there is overflow
Responsive table 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><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Phone Number</b></td>
<td><b>Street Address</b></td>
<td><b>City</b></td>
<td><b>State</b></td>
<td><b>Zip Code</b></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>
Testimonial
Add a picture and a quote to make your very own testimonial!
Usage Note
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.
Testimonial 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. Inside of a p element you can make certain parts of the text highlighted orange by surrounding the desired text with span tags with a .testimonial-highlight class assigned to it. 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" src="http://ux.pilot.principal.com/images/sample-testimonial-image.jpg"></img>
</div>
<div class="col-xs-7">
<div class="quote">
<p>"<span class="testimonial-highlight">I've trusted the Principal</span> 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>
Media box
Media box 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>
Media boxes 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>
Media box 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
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>
Numeric Incrementer
Principal numeric incrementer
Usage Note
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.
Numeric incrementer with specified 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
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 class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
<input type="text" id="numericIncrementer" class="number-incrementer-input" value="1" readonly>
<button class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>
Numeric incrementer with specified 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
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 class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
<input type="text" id="numericIncrementer" class="number-incrementer-input" value="1" readonly>
<button class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>
Numeric incrementer with no specified 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
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 class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
<input type="text" id="numericIncrementer" class="number-incrementer-input" value="1" readonly>
<button class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>
Numeric incrementer with specified 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
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 class="decrement"><span aria-hidden="true">-</span><span class="sr-only">Decrease incrementer by 1</span></button>
<input type="text" id="numericIncrementer" class="number-incrementer-input" value="1" readonly>
<button class="increment"><span aria-hidden="true">+</span><span class="sr-only">Increase incrementer by 1</span></button>
</div>
Select2
Select2 is a way of searching through drop-down menus
Usage Note
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.
Example Note
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 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
Multi-select option
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>
Select2 Modal
Select2 even works inside of EdgeUi modals.
Placeholder Note
If you want a placeholder on a single-select, you must provide an empty <option></option> as your first option.
<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">×</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>
Hero
Hero ads with text aligned on the right and left
Hero 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
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" 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>
Hero 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
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" 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>
Step Indicator
Step indicator supports 2 to 8 steps.
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>
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>
Badges
Principal extension of Bootstrap's delivered badges.
Badges color 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
Colored badges should be carefully used in background to ensure proper contrast. Please note that inline style was 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>