Feed

Usage Note(s)

  • This should be used to pull in syndicated data from Principal's blog.

Feed Example

Retirement Options

Traditonal 401k vs. Roth 401k - What is the difference and what is right for me?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.

Read more

Economic Trends

Act now, interest rates are on the rise again.

Small Business

What every small business owner should know.

The Principal Blog

View All 

<div class="row">
  <div class="col-lg-6 col-md-9">
    <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">Retirement Options</h2>
          <h3>Traditonal 401k vs. Roth 401k - What is the difference and what is right for me?</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</p>
            <p><a href="#">Read more</a></p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="media media-box">
      <img src="http://placehold.it/300x150" alt="" class="media-box-object">
      <div class="media-box-body">
        <h3 class="media-box-heading">Economic Trends</h3>
          <h4><a href="#">
            Act now, interest rates are on the rise again.
          </a></h4>
      </div>
    </div>
    <div class="media-box">
      <img src="http://placehold.it/300x150" alt="" class="media-box-object">
      <div class="media-box-body">
        <h3 class="media-box-heading">Small Business</h3>
          <h4><a href="#">
            What every small business owner should know.
          </a></h4>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-12">
    <div class="media media-box">
      <h4>The Principal Blog</h4>
      <div class="media-box-body">
        <ul class="media-list">
          <li class="media">
            <a class="media-left" href="#">
              <img src="http://placehold.it/50x50" alt="blog post image" class="media-box-object">
            </a>
            <div class="media-body">
                <h4 class="media-heading"><a href="#">Saving enough for retirement?</a></h4>
                <span>January 2nd, 2014</span>
            </div>
          </li>
          <li class="media">
            <a class="media-left" href="#">
              <img src="http://placehold.it/50x50" alt="blog post image" class="media-box-object">
            </a>
            <div class="media-body">
              <h4 class="media-heading"><a href="#">Insurance basics and how to save.</a></h4>
              <span>January 2nd, 2014</span>
            </div>
          </li>
          <li class="media">
            <a class="media-left" href="#">
              <img src="http://placehold.it/50x50" alt="blog post image" class="media-box-object">
            </a>
            <div class="media-body">
              <h4 class="media-heading"><a href="#">How to protect your employees.</a></h4>
              <span>January 2nd, 2014</span>
            </div>
          </li>
          <li class="media">
            <a class="media-left" href="#">
              <img src="http://placehold.it/50x50" alt="blog post image" class="media-box-object">
            </a>
            <div class="media-body">
              <h4 class="media-heading"><a href="#">Invest in the future... today!</a></h4>
              <span>January 2nd, 2014</span>
            </div>
          </li>
          <li class="media">
            <a class="media-left" href="#">
              <img src="http://placehold.it/50x50" alt="blog post image" class="media-box-object">
            </a>
            <div class="media-body">
              <h4 class="media-heading"><a href="#">Do you have college-bound children?</a></h4>
              <span>January 2nd, 2014</span>
            </div>
          </li>
        </ul>
        <p>
          <a class="media-right" href="#">View All</a>
        </p>
      </div>
    </div>
  </div>
</div>

Find an Advisor

Provides consistent UI for finding a nearby financial advisor.

Usage Note(s)

  • Please note that the background color for the examples below will fill only the container the pattern is placed in. If you would like the blue/white background to span the entire page, be sure to (1) add a .container class to the div with class of text-center and (2) place the entire pattern outside of all parent containers.

Blue variant

Find a financial advisor near you

You don't have to be an expert, but it helps to know one. No pressure, no sales pitch - just reliable financial support from a financial professional.

<div class="bg-light-blue util-padding-15">
  <div class="text-center">
    <h2>Find a financial advisor near you</h2>
    <p>You don't have to be an expert, but it helps to know one. No pressure, no sales pitch - just reliable financial support from a financial professional.</p>
  </div>
  <form role="form">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
        <div class="input-group text-center">
          <input type="text" class="form-control" placeholder="Zip Code">
          <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Go</button>
          </span>
        </div>
      </div>
    </div>
  </form>
</div>

White variant

Find a financial advisor near you

You don't have to be an expert, but it helps to know one. No pressure, no sales pitch - just reliable financial support from a financial professional.

<div class="bg-white util-padding-15">
  <div class="text-center">
    <h2>Find a financial advisor near you</h2>
    <p>You don't have to be an expert, but it helps to know one. No pressure, no sales pitch - just reliable financial support from a financial professional.</p>
  </div>
  <form role="form">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
        <div class="input-group text-center">
          <input type="text" class="form-control" placeholder="Zip Code">
          <span class="input-group-btn">
            <button class="btn btn-success" type="button">Go</button>
          </span>
        </div>
      </div>
    </div>
  </form>
</div>

Form Button Placement

The following button patterns are recommended for use with forms.

Usage Note(s)

  • Forms should never exceed two columns

Single column, complex options, multiple steps

For one column forms with one primary action and navigation the following setup should be used.

  • Forward moving actions on right (can include Submit and Cancel)
  • Backward moving actions on the left

<div class="row">
  <div class="col-xs-12 col-md-5">
    <form role="form">
      <div class="form-group">
        <label for="firstname">First Name</label>
        <input type="text" class="form-control" id="firstname" />
      </div>
      <div class="form-group">
        <label for="lastname">Last Name</label>
        <input type="text" class="form-control" id="lastname">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">Email Address</label>
        <input type="email" class="form-control" id="exampleInputEmail1">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Opt-in to email marketing
        </label>
      </div>
      <div class="row">
        <div class="col-xs-4">
          <button type="submit" class="btn btn-link"><i class="fa fa-angle-left"></i> Go Back</button>
        </div>
        <div class="col-xs-8 text-right">
          <button type="submit" class="btn btn-default">Save</button>
          <button type="submit" class="btn btn-success">Next <i class="fa fa-angle-right"></i></button>
        </div>
      </div>
    </form>
  </div>
</div>

Single column, one action

For one column forms with one primary action the following setup should be used.

  • Left align primary action.
  • “Simple form” defined as < 7 inputs,  one column layout, and only one primary action.
  • Works well with responsive and provides more proximity to inputs.
  • Login example is only exception.

<div class="row">
  <div class="col-xs-12 col-md-5">
    <form role="form">
      <div class="form-group">
        <label for="firstname">First Name</label>
        <input type="text" class="form-control" id="firstname" />
      </div>
      <div class="form-group">
        <label for="lastname">Last Name</label>
        <input type="text" class="form-control" id="lastname">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">Email Address</label>
        <input type="email" class="form-control" id="exampleInputEmail1">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Opt-in to email marketing
        </label>
      </div>
      <button type="submit" class="btn btn-success">Get in touch</button>
    </form>
  </div>
</div>

Two column, one action

For two column forms with one primary action the following setup should be used.

  • Right align primary action.

<div class="row">
  <div class="col-xs-12">
    <form role="form">
      <div class="row">
        <div class="col-xs-12 col-md-5">
          <div class="form-group">
            <label for="firstname">First Name</label>
            <input type="text" class="form-control" id="firstname" />
          </div>
          <div class="form-group">
            <label for="lastname">Last Name</label>
            <input type="text" class="form-control" id="lastname">
          </div>
          <div class="form-group">
            <label for="address">Address</label>
            <input type="text" class="form-control" id="address">
          </div>
          <div class="form-group">
            <label for="city">City</label>
            <input type="text" class="form-control" id="city">
          </div>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <label for="state">State</label>
              <select class="form-control">
                  <option>Alabama</option>
                  <option>Alaska</option>
                  <option>Arizona</option>
              </select>
            </div>
            <div class="col-xs-12 col-md-6">
              <label for="zip">Zip</label>
              <input type="text" class="form-control" id="zip">
            </div>
          </div>
          <div class="form-group">
          </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-offset-2">
          <div class="form-group">
            <label for="firstname">Favorite sports team?</label>
            <input type="text" class="form-control" id="firstname" />
          </div>
          <div class="form-group">
            <label for="firstname">Which town were you born in?</label>
            <input type="text" class="form-control" id="firstname" />
          </div>
          <div class="form-group">
            <label for="lastname">Mother's maiden name?</label>
            <input type="text" class="form-control" id="lastname">
          </div>
          <div class="form-group">
            <label for="lastname">Father's middle name?</label>
            <input type="text" class="form-control" id="lastname">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Email Address</label>
            <input type="email" class="form-control" id="exampleInputEmail1">
          </div>
          <button type="submit" class="btn btn-success pull-right">Get in touch</button>
        </div>
      </div>
    </form>
  </div>
</div>

Two columns, complex options, multiple steps

For two column forms with multiple action the following setup should be used.

  • Right align primary action
  • Forward moving actions on right (can include Submit and Cancel)
  • Backward moving actions on the left

<div class="row">
  <div class="col-xs-12">
    <form role="form">
      <div class="row">
        <div class="col-xs-12 col-md-5">
          <div class="form-group">
            <label for="firstname">First Name</label>
            <input type="text" class="form-control" id="firstname">
          </div>
          <div class="form-group">
            <label for="lastname">Last Name</label>
            <input type="text" class="form-control" id="lastname">
          </div>
          <div class="form-group">
            <label for="address">Address</label>
            <input type="text" class="form-control" id="address">
          </div>
          <div class="form-group">
            <label for="city">City</label>
            <input type="text" class="form-control" id="city">
          </div>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <label for="state">State</label>
              <select class="form-control">
                <option>Alabama</option>
                <option>Alaska</option>
                <option>Arizona</option>
              </select>
            </div>
            <div class="col-xs-12 col-md-6">
              <label for="zip">Zip</label>
              <input type="text" class="form-control" id="zip">
            </div>
          </div>
          <div class="form-group">
          </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-offset-2">
          <div class="form-group">
            <label for="firstname">Favorite sports team?</label>
            <input type="text" class="form-control" id="firstname">
          </div>
          <div class="form-group">
            <label for="firstname">Which town were you born in?</label>
            <input type="text" class="form-control" id="firstname">
          </div>
          <div class="form-group">
            <label for="lastname">Mother's maiden name?</label>
            <input type="text" class="form-control" id="lastname">
          </div>
          <div class="form-group">
            <label for="lastname">Father's middle name?</label>
            <input type="text" class="form-control" id="lastname">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Email Address</label>
            <input type="email" class="form-control" id="exampleInputEmail1">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4">
          <button type="submit" class="btn btn-link"><i class="fa fa-angle-left"></i> Go Back</button>
        </div>
        <div class="col-xs-8 text-right">
          <button type="submit" class="btn btn-default">Save</button>
          <button type="submit" class="btn btn-success">Next <i class="fa fa-angle-right"></i></button>
        </div>
      </div>
    </form>
  </div>
</div>

Form Validation

The following validation patterns are recommended for use with forms. Please see detailed specs on the classes here.

Multiple error example

Usage Note(s)

  • When putting a page-level warning or error alert at the top of a form in conjunction with field-level warning or error messages, use this default message, There are X problems on the form below that need to be addressed. Note - insert the number of problems that they have on the page if it can be calculated automatically, otherwise leave that out.
Please enter a first name
Please enter a last name 
<div class="row">
  <div class="col-xs-12">
    <div class="alert alert-danger alert-icon" role="alert"> There are 2 problems on the form below that need to be addressed.</div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-5">
    <form role="form">
      <div class="form-group has-error">
        <label for="firstname-validation-example-1" class="control-label">First Name</label>
        <input type="text" class="form-control" id="firstname-validation-example-1" />
        <span class="has-error-message help-block"> Please enter a first name</span>
      </div>
      <div class="form-group has-error">
        <label for="lastname-validation-example-1" class="control-label">Last Name</label>
        <input type="text" class="form-control" id="lastname-validation-example-1">
        <span class="has-error-message help-block"> Please enter a last name</span>
      </div>
      <div class="form-group">
        <label for="email-validation-example-1" class="control-label">Email Address</label>
        <input type="email" class="form-control" id="email-validation-example-1">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Opt-in to email marketing
        </label>
      </div>
      <button type="submit" class="btn btn-success">Get in touch</button>
    </form>
  </div>
</div>

One error example

Usage Note(s)

  • When putting a page-level warning or error alert at the top of a form in conjunction with field-level warning or error messages, use this default message, There is a problem on the form below that needs to be addressed.
Please enter a first name 
<div class="row">
  <div class="col-xs-12">
    <div class="alert alert-danger alert-icon" role="alert"> There is a problem on the form below that needs to be addressed.</div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-5">
    <form role="form">
      <div class="form-group has-error">
        <label for="firstname-validation-example-1" class="control-label">First Name</label>
        <input type="text" class="form-control" id="firstname-validation-example-1" />
        <span class="has-error-message help-block"> Please enter a first name</span>
      </div>
      <div class="form-group">
        <label for="lastname-validation-example-1" class="control-label">Last Name</label>
        <input type="text" class="form-control" id="lastname-validation-example-1">
      </div>
      <div class="form-group">
        <label for="email-validation-example-1" class="control-label">Email Address</label>
        <input type="email" class="form-control" id="email-validation-example-1">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Opt-in to email marketing
        </label>
      </div>
      <button type="submit" class="btn btn-success">Get in touch</button>
    </form>
  </div>
</div>

Super Footer

Usage Note(s)

  • 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."

Usage Note(s)

  • Site Map URL will vary based on the site.
<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>
<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</small>
      <p>Securities offered through Princor Financial Services Corporation, member <a href="http://www.sipc.org">SIPC</a></p>
    </div>
  </section>
</footer>

Usage Note(s)

  • Site Map URL will vary based on the site.
About Us
We're Hiring!
Other Sites
Get Help 
<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>
<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</small>
      <p>Securities offered through Princor Financial Services Corporation, member <a href="http://www.sipc.org">SIPC</a></p>
    </div>
  </section>
</footer>