Alerts

Warning

Only designate a trust if it has already been established.

Info

Enrollment is now open. Enroll now

<h2>Warning</h2>
<div class="alert alert-warning">
    <p>Only designate a trust if it has already been established.</p>
</div>

<h2>Info</h2>
<div class="alert alert-info">
    <p>Enrollment is now open. <a href="#">Enroll now</a></p>
</div>

Checkbox Icon

Here is some text next to the checkbox.

<p><i class="em-checkbox-icon"></i> Here is some text next to the checkbox.</p>

Currency

^$12,345.67

<h1><span class="currency"><sup>$</sup>12,345.67</span></h1>
<h2><span class="currency"><sup>$</sup>12,345.67</span></h2>
<h3><span class="currency"><sup>$</sup>12,345.67</span></h3>
<p><span class="currency"><sup>$</sup>12,345.67</span></p>

Custom Plan Messages

For custom plan messages, we've built out a series of reusuable classes to create several different layouts. These classes are found in custom-messages.less.

Background Colors

.green-background

Text Colors

.white-text

Font Sizes

.font-xl

Font choices

.serif

Spacing

.padding-100 provides 1em of left/right padding
.padding-200 provides 2em of left/right padding

Custom client classes

.apple-k will add the (k) to the background of the div
.employed is a hook to show/hide for empolyed views

It’s time to think about your 2016 contributions.

Your friend, (k)

<h2>Custom Plan Messages</h2>

<p>For custom plan messages, we've built out a series of reusuable classes to create several different layouts. These classes are found in custom-messages.less.</p>

<h3>Background Colors</h3>
<i>.green-background</i>

<h3>Text Colors</h3>
<i>.white-text</i>

<h3>Font Sizes</h3>
<i>.font-xl</i>

<h3>Font choices</h3>
<i>.serif</i>

<h3>Spacing</h3>
<i>.padding-100</i> provides 1em of left/right padding<br />
<i>.padding-200</i> provides 2em of left/right padding

<h3>Custom client classes</h3>
<i>.apple-k</i> will add the (k) to the background of the div<br />
<i>.employed</i> is a hook to show/hide for empolyed views

<br /><br />

<section class="messaging-pod">
	<div class="apple-k green-background white-text font-xl serif padding-200 employed">
	    <p>It&rsquo;s time to think about your 2016 contributions.</p>

	    <p>
	        Your friend,
	        <span>(k)</span>
	    </p>
	</div>
</section>

Footnote

TOTAL CONTRIBUTIONS SINCE JANUARY 1, 2015:*

$

* You are solely responsible for the accuracy of the contribution information you provide and it may result in you overcontributing or undercontributing for the year.

<div class="form-group">
  <div class="row">
    <div class="col-sm-9">
      <label for="footnoteExampleField" class="label-inline">
        TOTAL CONTRIBUTIONS SINCE JANUARY 1, 2015:*
      </label>
    </div>

    <div class="col-sm-3">
      <span class="dollar-inline">$</span>
      <input type="text"
             class="form-control col-sm-3"
             name="footnoteExampleField"
             id="footnoteExampleField"
       />
    </div>
  </div>
</div>

<p class="footnote">
  * You are solely responsible for the accuracy of the contribution information
  you provide and it may result in you overcontributing or undercontributing
  for the year.
</p>

Headings

My Accounts

Print

Documents

100MB max file size.

<div class="flex-heading">
    <h2>My Accounts</h2>
    <span class="flex-heading__content">
        <a href="#" class="btn-print fa fa-print">Print</a>
    </span>
</div>

<div class="flex-heading">
    <h2>Documents</h2>
    <span class="flex-heading__content">
        100MB max file size.
        <button class="btn btn-link btn-no-style">
            View supported file types
        </button>
    </span>
</div>

Legacy Frame

<iframe src="http://www.empowerdemo.com/site/f_1_loanrequest_1_keypage.html" width="" height="" class="legacy-frame"></iframe>

Links

Here is a link. This is the default link style.

In rare instances, links shouldn't have underlines. Here is a link without underline.

This is an inactive link, using .inactive

This is an info link with em-info-icon displayed in front.

<p><a href="#" title="Here is a link title">Here is a link.</a> This is the default link style.</p>
<p>In rare instances, links shouldn't have underlines. <a href="#" title="Here is a link title" class="no-underline">Here is a link without underline.</a></p>
<p><a href="#" class="inactive" title="This is an inactive link using .inactive">This is an inactive link, using .inactive</a></p>
<p><a href="#" class="info-link"><span class="info-link-text">This is an info link</span></a> with em-info-icon displayed in front.</p>

List

List-Group List

list-group Item
list-group Item
list-group Item
list-group Item

Red Arrow List

Red Arrow List Item
Red Arrow List Item
Red Arrow List Item
Red Arrow List Item

<div>List-Group List</div>
<ul class="list-group">
  <li>list-group Item</li>
  <li>list-group Item</li>
  <li>list-group Item</li>
  <li>list-group Item</li>
</ul>

<div>Red Arrow List</div>
<ul class="red-arrow">
  <li>Red Arrow List Item</li>
  <li>Red Arrow List Item</li>
  <li>Red Arrow List Item</li>
  <li>Red Arrow List Item</li>
</ul>

Loader

<div style="position: relative">

  <div class="loaderBackground just-element">
    <div class="loader"></div>
  </div>

  <div class="modal fade">
  	<div class="col-md-6 col-md-offset-3">
  		<div class="shadowify">
  			<div class="inner-container with-offset with-padding">
  				<p>The Internal Revenue Service announced that for tax year 2015, the elective deferral (contribution) limit for employees who participate in a 401(k), 403(b), most 457 plans, and the federal government's Thrift Savings Plan is increased.</p>
  			</div>
  		</div>
  	</div>
  </div>
</div>

Logo

<a href="#" title="Title" data-pjax><img src="/ui/customization-ui/assets/images/EMPOWER_rgb_logo.svg" alt="Title" height="60"></a>

Margins

Has a little top margin

Has more top margin

Has a lot of top margin

Has a ton of top margin

Has a little right margin

Has more right margin

Has a lot of right margin

Has a ton of right margin

Has a little bottom margin

Has more bottom margin

Has a lot of bottom margin

Has a ton of bottom margin

Has a little left margin

Has more left margin

Has a lot of left margin

Has a ton of left margin

<div class="margin-top-100">Has a little top margin</div>
<div class="margin-top-200">Has more top margin</div>
<div class="margin-top-300">Has a lot of top margin</div>
<div class="margin-top-400">Has a ton of top margin</div>

<div class="margin-right-100">Has a little right margin</div>
<div class="margin-right-200">Has more right margin</div>
<div class="margin-right-300">Has a lot of right margin</div>
<div class="margin-right-400">Has a ton of right margin</div>

<div class="margin-bottom-100">Has a little bottom margin</div>
<div class="margin-bottom-200">Has more bottom margin</div>
<div class="margin-bottom-300">Has a lot of bottom margin</div>
<div class="margin-bottom-400">Has a ton of bottom margin</div>

<div class="margin-left-100">Has a little left margin</div>
<div class="margin-left-200">Has more left margin</div>
<div class="margin-left-300">Has a lot of left margin</div>
<div class="margin-left-400">Has a ton of left margin</div>

Nav Main

<nav class="main-nav navbar-default">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#prelogin-main-nav">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="collapse navbar-collapse" id="prelogin-main-nav">
    <ul class="nav navbar-nav">
      <li class=""><a href="#">Retirement Planning</a></li>
      <li class=""><a href="#">About Your Plan</a></li>
      <li class=""><a href="#">Resource Center</a></li>
    </ul>
  </div>
</nav>

Nav Utility

<nav class="main-nav utility-nav navbar-default pull-right">
  <button type="button" class="navbar-toggle" data-toggle-content="#utility-nav">
    <i class="fa fa-user"></i>
  </button>
  <div class="main-nav-menu navbar-default" id="utility-nav">
    <a class="navbar-toggle utility-nav-toggle" data-toggle-content="#utility-nav"><i class="fa fa-times"></i></a>
    <ul class="nav navbar-nav">
      <li class="utility-nav-item dropdown">
        <a class="utility-nav-item-link" data-toggle="dropdown" aria-haspopup="true" id="suggestionsDropdown" title="Think about this">
            <span class="label-count label-red">2</span>
            <span class="label-text">Think about this</span>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="suggestionsDropdown">
          <li role="presentation">
            <a href="./guidance.html" role="menuitem">Your investments may not be well diversified.</a>
            <a href="#" role="menuitem">Add a beneficiary.</a>
          </li>
          <li role="presentation" class="inverse">
            <a href="./jp-managed.html" role="menuitem">More best next steps</a>
          </li>
        </ul>
      </li>
      <li id="utility-nav-user" class="utility-nav-item dropdown">
        <a class="utility-nav-item-link" data-toggle="dropdown" aria-haspopup="true" id="profileDropdown" title="Sean Lewis">
          <span class="label-count label-red">1</span>
          <span class="label-text">Sean Lewis</span>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="profileDropdown">
          <li role="presentation">
            <span role="menuitem">Secure Messages: <span class="label-count label-red">1</span></span>
          </li>
          <li role="presentation">
            <span role="menuitem">Transactions: <span class="label-count label-default">0 Pending</span></span>
          </li>
          <li role="presentation">
            <span role="menuitem">Age: <span>35</span></span>
          </li>
          <li role="presentation">
            <span role="menuitem">Salary: <span>$80,000.00</span></span>
          </li>
          <li role="presentation" class="inverse">
            <a href="./user_profile.html" role="menuitem">Edit Full Profile</a>
          </li>
          <li role="presentation">
            <a class="menu-item-link" href="./registration/">Log Out</a>
          </li>
        </ul>
      </li>
      <li class="utility-nav-item">
        <a class="utility-nav-item-link">
          <span class="label-text">Logout</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Page Title

This is a page title

This is a page title with a border

<div class="page-title"><h1>This is a page title</h1></div>
<div class="page-title with-border"><h1>This is a page title with a border</h1></div>

Paragraph

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>

Sorting

<div class="dtable">

      <div class="thead" aria-hidden="true">
        <div class="cell"></div>
        <div class="cell">
          <span class="column-label">Column heading 1</span>
          <span class="caret-sort-up caret-active"></span>
          <span class="caret-sort-down"></span>
        </div>
        <div class="cell">
          <span class="column-label">Column heading 2</span>
          <span class="caret-sort-up"></span>
          <span class="caret-sort-down"></span>
        </div>
        <div class="cell">
          <span class="column-label">Column heading 3</span>
          <span class="caret-sort-up"></span>
          <span class="caret-sort-down"></span>
        </div>
        <div class="cell">
          <span class="column-label">Column heading 4</span>
          <span class="caret-sort-up"></span>
          <span class="caret-sort-down"></span>
        </div>
      </div>

</div>

Table Cart

Contribution	Type
55.33%	Base Pay Traditional 401(k)	Add Auto Increase
19.67%	Base Pay Roth 401(k)	Add Auto Increase
6%	Catch-up Traditional 401(k)
69%	Catch-up Roth 401(k)
10%	Employee After tax

<table ng-show="ctrl.emptySCErrors.length === 0 &amp;&amp; !ctrl.missingPayrollCalendar" class="contributions-cart" style="">
      <thead>
        <tr>
          <th class="col-sm-2 ng-binding">
            Contribution
          </th>
          <th class="col-sm-3 ng-binding">
            Type
          </th>
          <th class="col-sm-7" colspan="2">
          </th>
        </tr>
      </thead>
      <!-- ngRepeat: deferral in ctrl.model.allData.deferrals --><tbody ng-repeat="deferral in ctrl.model.allData.deferrals" ng-show="deferral.showDeferral" class="ng-scope">

        <!-- ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) --><tr ng-repeat="item in filtered = (deferral.deferralsList | filter :{current:'true'}) " class="ng-scope">

          <td>
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' --><span ng-if="deferral.showDeferral &amp;&amp; deferral.selectedAllocationType=='%'" class="ng-binding ng-scope">55.33%</span><!-- end ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' -->
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType!='%' -->
          </td>

          <td class="ng-binding">
              Base Pay Traditional 401(k)
          </td>

          <!-- ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) --><td ng-if="(deferral.maximizer === null || (deferral.maximizer !== null &amp;&amp; (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH')))" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && item.modifiedAmount!==0 && !item.disableAI --><a href="" ng-if="(deferral.showDeferral &amp;&amp; deferral.editDeferral) &amp;&amp; item.autoIncreaseEligible &amp;&amp; (item.autoIncrease===null || (item.autoIncrease !== null &amp;&amp; item.autoIncrease.increaseBy === '')) &amp;&amp; item.modifiedAmount!==0 &amp;&amp; !item.disableAI" ng-click="ctrl.setCurrentValues(deferral.code,item.code);openModal()" class="ng-binding ng-scope">
                Add Auto Increase
            </a><!-- end ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && item.modifiedAmount!==0 && !item.disableAI -->
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && (item.modifiedAmount===0 || item.disableAI) -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='%' -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='$' -->
            <!-- ngIf: (item.autoIncrease !== null && item.autoIncrease.increaseBy !== '' && deferral.showDeferral) -->
          </td><!-- end ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) -->
         <!-- ngIf: deferral.maximizer !== null && deferral.maximizer.maximizerType !== null && deferral.maximizer.maximizerType!=='MATCH' -->
         <!-- ngIf: $first --><td rowspan="2" ng-if="$first" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && (deferral.deferralsList | filter :{current:'true'}).length > 0 --><button ng-if="(deferral.showDeferral &amp;&amp; deferral.editDeferral) &amp;&amp; (deferral.deferralsList | filter :{current:'true'}).length &gt; 0" ng-disabled="deferral.disableDeferralType" type="button" name="buttonEdit" id="buttonEdit_STANDARD" class="btn btn-default pull-right ng-binding ng-scope" ng-click="ctrl.onAddEditClick('STANDARD')">
              Edit
            </button><!-- end ngIf: (deferral.showDeferral && deferral.editDeferral) && (deferral.deferralsList | filter :{current:'true'}).length > 0 -->
          </td><!-- end ngIf: $first -->

        </tr><!-- end ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) --><tr ng-repeat="item in filtered = (deferral.deferralsList | filter :{current:'true'}) " class="ng-scope">

          <td>
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' --><span ng-if="deferral.showDeferral &amp;&amp; deferral.selectedAllocationType=='%'" class="ng-binding ng-scope">19.67%</span><!-- end ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' -->
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType!='%' -->
          </td>

          <td class="ng-binding">
              Base Pay Roth 401(k)
          </td>

          <!-- ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) --><td ng-if="(deferral.maximizer === null || (deferral.maximizer !== null &amp;&amp; (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH')))" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && item.modifiedAmount!==0 && !item.disableAI --><a href="" ng-if="(deferral.showDeferral &amp;&amp; deferral.editDeferral) &amp;&amp; item.autoIncreaseEligible &amp;&amp; (item.autoIncrease===null || (item.autoIncrease !== null &amp;&amp; item.autoIncrease.increaseBy === '')) &amp;&amp; item.modifiedAmount!==0 &amp;&amp; !item.disableAI" ng-click="ctrl.setCurrentValues(deferral.code,item.code);openModal()" class="ng-binding ng-scope">
                Add Auto Increase
            </a><!-- end ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && item.modifiedAmount!==0 && !item.disableAI -->
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && (item.modifiedAmount===0 || item.disableAI) -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='%' -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='$' -->
            <!-- ngIf: (item.autoIncrease !== null && item.autoIncrease.increaseBy !== '' && deferral.showDeferral) -->
          </td><!-- end ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) -->
         <!-- ngIf: deferral.maximizer !== null && deferral.maximizer.maximizerType !== null && deferral.maximizer.maximizerType!=='MATCH' -->
         <!-- ngIf: $first -->

        </tr><!-- end ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) -->

      </tbody><!-- end ngRepeat: deferral in ctrl.model.allData.deferrals --><tbody ng-repeat="deferral in ctrl.model.allData.deferrals" ng-show="deferral.showDeferral" class="ng-scope">

        <!-- ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) --><tr ng-repeat="item in filtered = (deferral.deferralsList | filter :{current:'true'}) " class="ng-scope">

          <td>
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' --><span ng-if="deferral.showDeferral &amp;&amp; deferral.selectedAllocationType=='%'" class="ng-binding ng-scope">6%</span><!-- end ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' -->
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType!='%' -->
          </td>

          <td class="ng-binding">
              Catch-up Traditional 401(k)
          </td>

          <!-- ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) --><td ng-if="(deferral.maximizer === null || (deferral.maximizer !== null &amp;&amp; (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH')))" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && item.modifiedAmount!==0 && !item.disableAI -->
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && (item.modifiedAmount===0 || item.disableAI) -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='%' -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='$' -->
            <!-- ngIf: (item.autoIncrease !== null && item.autoIncrease.increaseBy !== '' && deferral.showDeferral) -->
          </td><!-- end ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) -->
         <!-- ngIf: deferral.maximizer !== null && deferral.maximizer.maximizerType !== null && deferral.maximizer.maximizerType!=='MATCH' -->
         <!-- ngIf: $first --><td rowspan="2" ng-if="$first" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && (deferral.deferralsList | filter :{current:'true'}).length > 0 --><button ng-if="(deferral.showDeferral &amp;&amp; deferral.editDeferral) &amp;&amp; (deferral.deferralsList | filter :{current:'true'}).length &gt; 0" ng-disabled="deferral.disableDeferralType" type="button" name="buttonEdit" id="buttonEdit_CATCHUP" class="btn btn-default pull-right ng-binding ng-scope" ng-click="ctrl.onAddEditClick('CATCHUP')">
              Edit
            </button><!-- end ngIf: (deferral.showDeferral && deferral.editDeferral) && (deferral.deferralsList | filter :{current:'true'}).length > 0 -->
          </td><!-- end ngIf: $first -->

        </tr><!-- end ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) --><tr ng-repeat="item in filtered = (deferral.deferralsList | filter :{current:'true'}) " class="ng-scope">

          <td>
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' --><span ng-if="deferral.showDeferral &amp;&amp; deferral.selectedAllocationType=='%'" class="ng-binding ng-scope">69%</span><!-- end ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' -->
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType!='%' -->
          </td>

          <td class="ng-binding">
              Catch-up Roth 401(k)
          </td>

          <!-- ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) --><td ng-if="(deferral.maximizer === null || (deferral.maximizer !== null &amp;&amp; (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH')))" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && item.modifiedAmount!==0 && !item.disableAI -->
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && (item.modifiedAmount===0 || item.disableAI) -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='%' -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='$' -->
            <!-- ngIf: (item.autoIncrease !== null && item.autoIncrease.increaseBy !== '' && deferral.showDeferral) -->
          </td><!-- end ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) -->
         <!-- ngIf: deferral.maximizer !== null && deferral.maximizer.maximizerType !== null && deferral.maximizer.maximizerType!=='MATCH' -->
         <!-- ngIf: $first -->

        </tr><!-- end ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) -->

      </tbody><!-- end ngRepeat: deferral in ctrl.model.allData.deferrals --><tbody ng-repeat="deferral in ctrl.model.allData.deferrals" ng-show="deferral.showDeferral" class="ng-scope">

        <!-- ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) --><tr ng-repeat="item in filtered = (deferral.deferralsList | filter :{current:'true'}) " class="ng-scope">

          <td>
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' --><span ng-if="deferral.showDeferral &amp;&amp; deferral.selectedAllocationType=='%'" class="ng-binding ng-scope">10%</span><!-- end ngIf: deferral.showDeferral && deferral.selectedAllocationType=='%' -->
              <!-- ngIf: deferral.showDeferral && deferral.selectedAllocationType!='%' -->
          </td>

          <td class="ng-binding">
              Employee After tax
          </td>

          <!-- ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) --><td ng-if="(deferral.maximizer === null || (deferral.maximizer !== null &amp;&amp; (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH')))" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && item.modifiedAmount!==0 && !item.disableAI -->
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && item.autoIncreaseEligible && (item.autoIncrease===null || (item.autoIncrease !== null && item.autoIncrease.increaseBy === '')) && (item.modifiedAmount===0 || item.disableAI) -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='%' -->
            <!-- ngIf: item.modifiedAmount===0 && deferral.selectedAllocationType=='$' -->
            <!-- ngIf: (item.autoIncrease !== null && item.autoIncrease.increaseBy !== '' && deferral.showDeferral) -->
          </td><!-- end ngIf: (deferral.maximizer === null || (deferral.maximizer !== null && (deferral.maximizer.maximizerType === null || deferral.maximizer.maximizerType==='MATCH'))) -->
         <!-- ngIf: deferral.maximizer !== null && deferral.maximizer.maximizerType !== null && deferral.maximizer.maximizerType!=='MATCH' -->
         <!-- ngIf: $first --><td rowspan="1" ng-if="$first" class="ng-scope">
            <!-- ngIf: (deferral.showDeferral && deferral.editDeferral) && (deferral.deferralsList | filter :{current:'true'}).length > 0 --><button ng-if="(deferral.showDeferral &amp;&amp; deferral.editDeferral) &amp;&amp; (deferral.deferralsList | filter :{current:'true'}).length &gt; 0" ng-disabled="deferral.disableDeferralType" type="button" name="buttonEdit" id="buttonEdit_AFTERTAX" class="btn btn-default pull-right ng-binding ng-scope" ng-click="ctrl.onAddEditClick('AFTERTAX')">
              Edit
            </button><!-- end ngIf: (deferral.showDeferral && deferral.editDeferral) && (deferral.deferralsList | filter :{current:'true'}).length > 0 -->
          </td><!-- end ngIf: $first -->

        </tr><!-- end ngRepeat: item in filtered = (deferral.deferralsList | filter :{current:'true'}) -->

      </tbody><!-- end ngRepeat: deferral in ctrl.model.allData.deferrals -->
    </table>

Table Responsive

Row Heading

Table Cell

Row Heading

Table Cell

Row Heading

Table Cell

<div class="dtable">

      <div class="thead" aria-hidden="true">
        <div class="cell"></div>
        <div class="cell">Column heading 1</div>
        <div class="cell">Column heading 2</div>
        <div class="cell">Column heading 3</div>
        <div class="cell">Column heading 4</div>
      </div>

      <div class="trow">
        <div class="cell cell-head"><h4>Row Heading</h4></div>
        <div class="cell" aria-label="Column heading 1"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 2"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 3"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 4"><span>Table Cell</span></div>
      </div>

      <div class="trow">
        <div class="cell cell-head"><h4>Row Heading</h4></div>
        <div class="cell" aria-label="Column heading 1"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 2"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 3"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 4"><span>Table Cell</span></div>
      </div>

      <div class="trow">
        <div class="cell cell-head"><h4>Row Heading</h4></div>
        <div class="cell" aria-label="Column heading 1"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 2"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 3"><span>Table Cell</span></div>
        <div class="cell" aria-label="Column heading 4"><span>Table Cell</span></div>
      </div>

</div>

Table

Table Heading 1	Table Heading 2	Table Heading 3
Table Footer 1	Table Footer 2	Table Footer 3
Table Cell 1	Table Cell 2	Table Cell 3
Table Cell 1	Table Cell 2	Table Cell 3
Table Cell 1	Table Cell 2	Table Cell 3
Table Cell 1	Table Cell 2	Table Cell 3

<table class="table">
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
	</tr>
	</tbody>
</table>

Text Input

Text input

<label for="text-input">Text input</label>
<input type="text" id="text-input" />

Textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

Components

Warning

Info

$12,345.67

$12,345.67

$12,345.67

Custom Plan Messages

Background Colors

Text Colors

Font Sizes

Font choices

Spacing

Custom client classes

My Accounts

Documents

This is a page title

This is a page title with a border

Row Heading

Row Heading

Row Heading

^$12,345.67

^$12,345.67

^$12,345.67