Styleguide

This website was built with Foundation 5. For more information on how to use it, check out the the Foundation Docs »

The Grid

Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done.
Solution: The awesome grid!

The Grid

The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a container, row and column.

Nesting Support

In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.

How to Use

Using this framework is easy. Here's how your code will look when you use a series of <div> tags to create vertical columns.

Grid Example

24
4
64
full3
full6
full3
62
68
full2
3
9
full4
full8
65
67
full6
full6
Code
                  

<div class="row">
  <div class="small-2 medium-4 columns"></div>
  <div class="small-4 medium-4 columns"></div>
  <div class="small-6 medium-4 columns"></div>
</div>
<div class="row">
  <div class="medium-3 columns"></div>
  <div class="medium-6 columns"></div>
  <div class="medium-3 columns"></div>
</div>
<div class="row">
  <div class="small-6 medium-2 columns"></div>
  <div class="small-6 medium-8 columns"></div>
  <div class="small-12 medium-2 columns"></div>
</div>
<div class="row">
  <div class="small-3 columns"></div>
  <div class="small-9 columns"></div>
</div>
<div class="row">
  <div class="medium-4 columns"></div>
  <div class="medium-8 columns"></div>
</div>
<div class="row">
  <div class="small-6 medium-5 columns"></div>
  <div class="small-6 medium-7 columns"></div>
</div>
<div class="row">
  <div class="medium-6 columns"></div>
  <div class="medium-6 columns"></div>
</div>
                  
                

Nesting Rows

In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.

Example

8
8 Nested
8 Nested Again
4
4
4
Code
                  
<div class="row">
 <div class="small-8 columns">
   <div class="row">
     <div class="small-8 columns">
       <div class="row">
         <div class="small-8 columns"></div>
         <div class="small-4 columns"></div>
       </div>
     </div>
     <div class="small-4 columns"></div>
   </div>
 </div>
 <div class="small-4 columns"></div>
</div>
                  
                 

Small Grid

As you've probably noticed in the examples above, you have access to a small and medium grid. If you know that your grid structure will be the same for small devices as it will be on medium devices, just use the small grid. You can override your small grid classes by adding medium grid classes to it.

Example

2
10, last
3
9, last
Code
                  
<div class="row">
  <div class="small-2 columns"></div>
  <div class="small-10 columns"></div>
</div>
<div class="row">
  <div class="small-3 columns"></div>
  <div class="small-9 columns"></div>
</div>
                  
                

Medium Grid

As you've probably noticed in the examples above, you have access to a small and medium grid. If you know that your grid structure will be the same for small devices as it will be on medium devices, just use the small grid. You can override your small grid classes by adding medium grid classes to it.

2
10, last
3
9, last
Code
                  
<div class="row">
 <div class="medium-2 columns"></div>
 <div class="medium-10 columns"></div>
</div>
<div class="row">
 <div class="medium-3 columns"></div>
 <div class="medium-9 columns"></div>
</div>
                  
                

Maintaining Your CSS

Stylesheet maintenance can become overwhelming on medium applications. Here are a few tips and tricks to keeping your sanity in a CSS heavy world.

Split Your CSS Logically

There are some conventional practices for well-maintained CSS—we've kept our code neatly labels in app.scss.

The app.scss file contains all the elements outlined in this style guide—everything on the site built to be easily reusable. Elements in the globals CSS file will roll across the site and establish the visual style of BizNow.

A Few Rules for Clean CSS

Good Commenting A stylesheet with clear comments that delineate each main section of code makes it a lot easier to find by scanning the page or using cmd/ctrl+F to search.

Don't repeat yourself Child element declarations should not repeat styles unless they override what is already there.

Group elements Keep parent/child elements near each other in the CSS. This not only helps you identify areas which can be pruned or cleaned up but also makes it easier on other users of the stylesheet.

Colors

Below you can find the different color palettes we used on the site for the background, text, and accent colors.

  • Orange#FF9000
  • Blue#21ADFF
  • Blueish Gray#939fa9
  • Alert Yellow#FCF8E3
  • Dark Blue#48525b
  • Off White#f8f9fa

Typography

Our primary typeface is Proxima Nova, an approachable sans-serif with confidence and energy that is reflected throughout the site.

Where To Get It

These are the typefaces being used for the Karmic desktop and mobile apps.

  • Primary Typeface: Proxima Nova
  • Secondary Typeface: Helvetica Neue

When to Use

Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h4 and should be styled in a clear hierarchy (i.e., mediumst to smallest).

When to Use Paragraphs

Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.

Editing the CSS

CSS for headings and paragraph styles can be found in app.scss.

h1. Heading 1 for Page Headings

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo

h2. Heading 2 for Section Headings

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo

h3. Heading 3 for Subsection Headings

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo

h4. Heading 4 for Units

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

h5. Heading 5 for Subunits

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo

h4. Heading 6 for Subheads

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo

This is the style for a quote. Use it to call out text you want to emphasize in a paragraph, or in a quote or testimonial. Person Name, Title

Luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

h5. Heading 5

h4. Heading 6


Buttons

Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the Web, we follow similar conventions.

How To Use

This solution is perfect when the button needs to submit a form of some kind.

Note: Make sure to keep type="submit" on the button tag. That's what tells Internet Explorer to submit the form.

Using The Anchor Tag

When you need the button to take you somewhere (e.g. a sign up button), this is the perfect solution.

Editing the CSS

CSS for buttons can be found in app.scss

Call-to-Action Buttons

Code
              
<a href="" class="medium primary button">Upload</a>
<a href="" class="medium primary button">Submit</a>
<a href="" class="small primary button">Next</a>
              
            

Secondary Buttons

Code
              
<a href="" class="medium secondary button">Upload</a>
<a href="" class="medium secondary button">Submit</a>
<a href="" class="small secondary button">Next</a>
              
            

Disabled Buttons

Code
              
<a href="" class="medium radius primary disabled button">Upload</a>
<a href="" class="medium radius secondary disabled button">Next</a>
              
            

Tabs

Code
              
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#withinNinty">Within 90 Days</a></li>
  <li class="tab-title"><a href="#overNinty">Over 90 Days</a></li>
</ul>
              
            

Button Groups

Code
              
<ul class="button-group">
  <li><a href="groups.php" class="button active">Groups</a></li>
  <li><a href="people-detail.php" class="button">People</a></li>
  <li><a href="#" class="button">FlashCash Requests</a></li>
</ul>
              
            

Forms

Use forms to allow users to interact with the site and provide information to the company.

Elements of a Form

A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order):

  • Form
  • Label
  • Input
  • Select
  • Textarea
  • Button

How to use

Make forms great and easy to use with the following rules:

  • Wrap checkboxes and radio buttons within labels for mediumr hit areas, and be sure to set the for, name, and id attributes for all applicable elements.
  • Series of checkboxes and radio buttons below within a <ul class="(inline) actions">.
  • Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).

Learn all about forms

Check out the Foundation Docs to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs.

Form Layouts

Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:

  • You can size inputs using column sizes, like .medium-6, .small-6.
  • You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.

Form Example

Code
              
<form>
  <label for="emailAddress">Email Address</label>
  <input type="email" id="emailAddress" name="email-address" placeholder="address@emailprovider.com">
  <label for="password">Password</label>
  <input type="password" id="password" class="password">
  <label for="incorporationType">
    Incorporation Type
    <span data-tooltip class="help-tooltip has-tip" title="We need to know your company's incorporation type so we can help you validate your business in the next step.">
    <i class="icon icon-info-circle"></i>
    </span>
  </label>
  <select name="incorporation-type" id="incorporationType" class='incorporation-type'>
    <option>Sole Propritership</option>
    <option>Limited Liability Company</option>
    <option>Corporation</option>
    <option>Partnership</option>
  </select>
  <div class="row">
    <div class="large-12 medium-12 columns">
      <ul class="inline-list">
        <li><a href="onboard.php" class="button secondary medium">« Back</a></li>
        <li><a href="#" class="button primary medium">Next: Document Validation »</a></li>
        <li><a href="#" class="button secondary medium">Save</a></li>
      </ul>
    </div>
  </div>
</form>
              
            

Error States

We've included error states for labels, inputs and messaging that you can have your app generate programatically. You can attach a class of .error either to the individual elements (label, input, small) or to a column/div.

Example

Please enter the Account Owner's Name
Code
              
<form>
  <label for="accountOwnerName" class="error">Account Owner's Name</label>
  <input type="text" id="accountOwnerName" name="account-owner-name" class="account-owner-name error">
  <small class="error">Please enter the Account Owner's Name</small>
</form>
              
            

Program Metrics

This table can be used to capture information in a two by two tabular format.

Program Metrics Example

Program Metrics

4 New Cards Activated this Period 2 Transactions Rejected per Limits
4 Cards Suspended 2 Cards Canceled
4 Budget Load this Period 2 Recurring Transactions this Period
Code
                
<div class="row">
  <section class="program-metrics medium-6 columns">
    <h3 class="section-heading">Program Metrics</h3>
    <table class="program-metrics collapse">
      <tr>
        <td>
          <span class="number">4</span>
          <span class="custom-label small">New Cards Activated this Period</span>
        </td>
        <td>
          <span class="number">2</span>
          <span class="custom-label small">Transactions Rejected per Limits</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="number">4</span>
          <span class="custom-label small">Cards Suspended</span>
        </td>
        <td>
          <span class="number">2</span>
          <span class="custom-label small">Cards Canceled</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="number">4</span>
          <span class="custom-label small">Budget Load this Period</span>
        </td>
        <td>
          <span class="number">2</span>
          <span class="custom-label small">Recurring Transactions this Period</span>
        </td>
      </tr>
    </table>
  </section>
</div>
                
              

Tabbed Filters

Use tabbed filters to filter information in a view or page. It can be used instead of a dropdown if the options for filtering are limited to 3 or 4.

Tabbed Filters Example

Code
              
<ul class="tabs segmented-control" data-tab>
  <li class="tab-title active"><a href="#transactionsThisMonth">This Month</a></li>
  <li class="tab-title"><a href="#transactionsLastMonth">Last Month</a></li>
  <li class="tab-title"><a href="#transactionsLastThreeMonths">Last 3 Months</a></li>
</ul>
              
            


Segmented Control

Use the segmented control component to filter data for chart.

Segmented Control Example

Code
              
<div class="time-selector-panel">
  <ul class="tabs date-selector center" data-tab>
    <li class="tab-title"><a href="#spendingOverTimeByDay">Day</a></li>
    <li class="tab-title active"><a href="#spendingOverTimeByMonth">Month</a></li>
    <li class="tab-title"><a href="#spendingOverTimeByYear">Year</a></li>
  </ul>
</div>
              
            

Date Picker

Use the date picker component to help people select dates.

Date Picker Example

 
Code
              
<form class="custom-date-selector">
  <div class="row collapse">
    <div class="large-1 medium-1 columns">
      <label for="dateFrom" class="prefix">From</label>
    </div>
    <div class="large-2 medium-2 columns">
      <input type="text" class="postfix datepicker" id="dateFrom" name="dateFrom" placeholder="Select Date">
    </div>
    <div class="large-1 medium-1 large-offset-1 medium-offset-1 columns">
      <label for="dateTo" class="prefix">To</label>
    </div>
    <div class="large-2 medium-2 columns">
      <input type="text" class="postfix datepicker" id="dateTo" name="dateTo" placeholder="Select Date">
    </div>
    <div class="large-5 medium-5 columns"> </div>
  </div>
</form>
              
            


Table Sort

Use the table sorting header if you want to add functionality to sort a table. Don't use a dropdown with sort options.

Table Sorting Example

Date Transaction Description Amount Tags Purchase Order Number
Code
              
<table class="transaction-table">
  <thead>
    <tr>
      <th>Date <i class="icon icon-unsorted"></i></th>
      <th>Transaction Description <i class="icon icon-unsorted"></i></th>
      <th>Amount <i class="icon icon-unsorted"></i></th>
      <th>Tags <i class="icon icon-unsorted"></i></th>
      <th>Purchase Order Number <i class="icon icon-unsorted"></i></th>
    </tr>
  </thead>
</table>
              
            

Progress Meter

Use the progress meter if you need to get people complete a multi-step process or form.

Progress Meter Example

  • Step 1 Account Owner Info
  • Step 2 Company Information
  • Step 3 Document Verification
Code
              
<ul class="onboarding-steps">
  <li data-tooltip class="help-tooltip has-tip" title="We'll need to collect the accountholder's information to verify their identity and financial authority for the company.">
    <i class="icon icon-building-o"></i>
    <span class="step-number">Step 1</span>
    <span class="step-name">Account Owner Info</span>
  </li>
  <li data-tooltip class="help-tooltip has-tip active" title="We'll need to collect information on your company to verify that your business exists.">
    <i class="icon icon-users"></i>
    <span class="step-number">Step 2</span>
    <span class="step-name">Company Information</span>
  </li>
  <li data-tooltip class="help-tooltip has-tip" title="Based on the information you've provided in Step 1 and 2, we'll verify the Accountholder's identity and verify that your business exists.">
    <i class="icon icon-file-o"></i>
    <span class="step-number">Step 3</span>
    <span class="step-name">Document Verification</span>
  </li>
</ul>
              
            

Desktop Top Nav

The desktop nav with breadcrumbs gives people context as to which page they're on. It's also used to link to the profile and to alert users to FlashCash notifications.

Desktop Top Nav Example

Code
              
<nav class="topbar">
  <ul class="left">
    <li><h1><a href="#">ZURB, Inc.</a></h1></li>
    <li><a href="#">People</a></li>
    <li><a href="#">Eric Morris</a></li>
  </ul>
  <!-- Right Nav Section -->
  <ul class="right">
    <li class="flashcash-request-block">
      <a href="#" class="flashcash-header-icon">
        <span class="notification-number">2</span>
        <img src="images/fc-icon.svg" class="top-bar-icon" alt="2 FlashCash Requests">
      </a>
    </li>
    <li>
      <a href="#"><img class="user-profile-nav" src="https://s3.amazonaws.com/uifaces/faces/twitter/rohixx/128.jpg" alt="Alok Jethanandani">Alok Jethanandani</a>
    </li>
  </ul>
</nav>
              
            

Desktop Vertical Nav

The vertical navigation links to all the key functional areas of the application.

Desktop Top Nav Example

Code
            
<nav class="vertical-nav">
  <span class="triangle dashboard-triangle"></span>
  <ul class="links">
    <li class="active first-child">
      <a href="dashboard.php">
        <i class="icon icon-dashboard"></i>
        <span>Dashboard</span>
      </a>
    </li>
    <li>
      <a href="groups.php">
        <i class="icon icon-users"></i>
        <span>People</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="icon icon-file2"></i>
        <span>Transactions</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="icon icon-library"></i>
        <span>Funding Account</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="icon icon-history2"></i>
        <span>Account History</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="icon icon-cogs"></i>
        <span>Settings</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="icon icon-question-circle"></i>
        <span>Help</span>
      </a>
    </li>
  </ul>
</nav>
            
          

Alerts

Use the alerts component to trigger any alerts or warning for top-level functional areas

Desktop Top Nav Example

Your next disbursment of $XX,XXX will happen on March 3, 2014.
Code
              
<div data-alert class="alert-box">
  <i class="icon icon-clock"></i> Your next disbursment of $XX,XXX will happen on March 3, 2014.
  <a href="#" class="close"><i class="icon icon-times-circle-o"></i></a>
</div>
              
            

Spending Highlights

Use the spending highlights component to capture information about spending trends

Desktop Top Nav Example

Spending Highlights

Most Purchases At

213

Transactions at Staples Report for Most Purchases At

Most Expensive Item

$1,924

Air Canada Report for Expensive Items

Highest Spending Category

$23,400

Supplies Report for Highest Spending Category
Code
              
<h3 class="section-heading">Spending Highlights</h3>
<table class="spending-highlights-panel">
  <tr>
    <td>
      <h3>Most Purchases At</h3>
      <h2>213</h2>
      <span class="custom-label large">Transactions at Staples</span>
      <a href="#" class="link medium">Report for Most Purchases At</a>
    </td>
  </tr>

  <tr>
    <td>
      <h3>Most Expensive Item</h3>
      <h2>$1,924</h2>
      <span class="custom-label large">Air Canada</span>
      <a href="#" class="link medium">Report for Expensive Items</a>
    </td>
  </tr>

  <tr>
    <td>
      <h3>Highest Spending Category</h3>
      <h2>$23,400</h2>
      <span class="custom-label large">Supplies</span>
      <a href="#" class="link medium">Report for Highest Spending Category</a>
    </td>
  </tr>
</table>
              
            

Alerts for Groups and People Table

Use the alerts for groups and people table to alerts or notify people to abnormal spending

Desktop Top Nav Example

Alerts

For Groups

16 Jun

Marketing

Spent $14,928.23

Average $7,100.67

Air Travel
11 Jun

Sales

Spent $9,928.23

Average $6,100.67

Entertainment
6 Jun

Engineering

Spent $1,928.23

Average $5,100.67

Technology

13 More Alerts

For Employees

For Cards Activated:

2

FlashCash Requests
Budget Spent Increase Budget

2

FlashCash Requests
Budget Spent

2

FlashCash Requests
Budget Spent
Code
              
<div class="group-employee-alerts-panel">
  <!--alerts -->
  <section class="alerts-row">
    <h4 class="section-heading">For Groups</h4>
    <table class="alerts-list">
      <tbody>
        <tr>
          <td class="alert-date">
            <span class="date-day">16</span>
            <span class="date-month">Jun</span>
          </td>
          <td class="alert-group">
            <h3><a href="group.php">Marketing</a></h3>
          </td>
          <td class="alert-spent">
            <p>
              <span class="amount-label">Spent</span>
              <span class="amount spending-alert">
                $14,928.23
              </span>
            </p>
          </td>
          <td class="alert-spent">
            <p>
              <span class="amount-label">Average</span>
              <span class="amount">$7,100.67</span>
            </p>
          </td>
          <td class="alert-category">
            <a href="#">
              <i class="icon icon-plane"></i>
              <span>Air Travel</span>
            </a>
          </td>
          <td class="alert-cta">
            <a href="#">
              <i class="icon icon-times-circle-o"></i>
            </a>
          </td>
        </tr>

        <tr>
          <td class="alert-date">
            <span class="date-day">11</span>
            <span class="date-month">Jun</span>
          </td>
          <td class="alert-group">
            <h3><a href="group.php">Sales</a></h3>
          </td>
          <td class="alert-spent">
            <p>
              <span class="amount-label">Spent</span>
              <span class="amount spending-warning">
                $9,928.23
              </span>
            </p>
          </td>
          <td class="alert-spent">
            <p>
              <span class="amount-label">Average</span>
              <span class="amount">$6,100.67</span>
            </p>
          </td>
          <td class="alert-category">
            <a href="#">
              <i class="icon icon-beer"></i>
              <span>Entertainment</span>
            </a>
          </td>
          <td class="alert-cta">
            <a href="#">
              <i class="icon icon-times-circle-o"></i>
            </a>
          </td>
        </tr>

        <tr>
          <td class="alert-date">
            <span class="date-day">6</span>
            <span class="date-month">Jun</span>
          </td>
          <td class="alert-group">
            <h3><a href="group.php">Engineering</a></h3>
          </td>
          <td class="alert-spent">
            <p>
              <span class="amount-label">Spent</span>
              <span class="amount spending-good">
                $1,928.23
              </span>
            </p>
          </td>
          <td class="alert-spent">
            <p>
              <span class="amount-label">Average</span>
              <span class="amount">$5,100.67</span>
            </p>
          </td>
          <td class="alert-category">
            <a href="#">
              <i class="icon icon-desktop"></i>
              <span>Technology</span>
            </a>
          </td>
          <td class="alert-cta">
            <a href="#">
              <i class="icon icon-times-circle-o"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>

    <p class="text-center">
      <a href="#">13 More Alerts <i class="small-icon">▼</i></a>
    </p>
  </section>
  <!--end alerts-->

  <!--start spending notifications -->
  <section class="spending-notifications">
    <h4 class="section-heading">For Employees</h4>
    <div class="spending-notifications-tabs">
      <h5>For Cards Activated:</h5>
      <ul class="tabs" data-tab="">
        <li class="tab-title active"><a href="#withinNinty">Within 90 Days</a></li>
        <li class="tab-title"><a href="#overNinty">Over 90 Days</a></li>
      </ul>
    </div>
    <div class="tabs-content">

      <div class="content active" id="withinNinty">

        <table class="user-notification">
          <tbody>
            <tr>
              <td class="user-image">
                <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
              </td>
              <td class="user-profile">
                <h4><a href="#">Eric Morris</a></h4>
                <span class="person-title">Development</span>
              </td>
              <td class="user-fc-requests">
                <h4>2</h4>
                <span class="">FlashCash Requests</span>
              </td>
              <td class="user-budget">
                <img src="images/budget-spent.png" alt="Budget Spent">
              </td>
              <td class="user-cta">
                <a href="#" class="small primary button">Increase Budget</a>
                <a href="#" class="small secondary button"><i class="icon icon-envelope"></i></a>
              </td>
              <td class="user-flag">
                <a href="people-detail.php#suspiciousTransactions" data-tooltip="" class="help-tooltip has-tip" data-selector="tooltip-hwyj0m624" title="">
                  <i class="icon icon-warning"></i>
                </a>
              </td>
            </tr>
            <tr>
              <td class="user-image">
                <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
              </td>
              <td class="user-profile">
                <h4><a href="#">Eric Morris</a></h4>
                <span class="person-title">Development</span>
              </td>
              <td class="user-fc-requests">
                <h4>2</h4>
                <span class="">FlashCash Requests</span>
              </td>
              <td class="user-budget">
                <img src="images/budget-spent.png" alt="Budget Spent">
              </td>
              <td class="user-cta">
                <a href="#" class="small secondary button"><i class="icon icon-envelope"></i></a>
              </td>
              <td class="user-flag"></td>
            </tr>

            <tr>
              <td class="user-image">
                <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
              </td>
              <td class="user-profile">
                <h4><a href="#">Eric Morris</a></h4>
                <span class="person-title">Development</span>
              </td>
              <td class="user-fc-requests">
                <h4>2</h4>
                <span class="">FlashCash Requests</span>
              </td>
              <td class="user-budget">
                <img src="images/budget-spent.png" alt="Budget Spent">
              </td>
              <td class="user-cta">
                <a href="#" class="small secondary button"><i class="icon icon-envelope"></i></a>
              </td>
              <td class="user-flag"></td>
            </tr>
          </tbody>
        </table>

      </div>

      <div class="content" id="overNinty">
      </div>
    </div>
  </section>
  <!--end spending notifications -->
</div>
              
            

Transaction Table Expanded and Collapsed Views

The transaction table present a log of transactions in collapsed and expanded views.

Transaction Table Example

Date Transaction Description Amount Tags Purchase Order Number  
  16 Jun

Comcast California

(541) 756-4092

$72.50

  16 Jun

Comcast California

(541) 756-4092

$72.50

  16 Jun

Comcast California

(541) 756-4092

$49.05

Enhanced Data

  • 1 Latex Interior Paint, White $22.50
  • 1 Latex Interior Paint, Blue $22.50
  • Subtotal $45.00
  • Taxes $4.05
  • Total $49.05

Miscellaneous Details

  • Transaction ID 7372281
  • Merchant Marcellas
  • Time 09:49 am, PST
  • Location San Francisco, CA 94107 (map)
  • MCC 5702, Hardware Equipment and Supplies

Receipt

lowes-receipt.jpg

×
Code
            
<table class="transaction-table">
  <thead>
    <tr>
      <th class="transaction-toggle">
        <a href="#" class="toggle-expand">
          <i class="icon icon-chevron-right"></i>
        </a>
      </th>
      <th class="transaction-date">Date</th>
      <th class="transaction-merchant">Transaction Description</th>
      <th class="transaction-amount sorted-th sorted-ascending">Amount</th>
      <th class="transaction-category sorted-th sorted-descending">Tags</th>
      <th class="transaction-action">Purchase Order Number</th>
      <th class="transaction-extra-info"> </th>
    </tr>
  </thead>
  <tbody>
    <?php for($a=1;$a<=3;$a++) { ?>
      <tr class="collapsed-view">
        <td class="transaction-toggle"> </td>
        <td class="transaction-date">
          <?php if($a==4) { ?>
            <a id="suspiciousTransactions"></a>
          <?php } ?>
          <span class="date-day">16</span>
          <span class="date-month">Jun</span>
        </td>
        <td class="transaction-merchant">
          <h3>Comcast California</h3>
          <p class="merchant-contact">(541) 756-4092</p>
        </td>
        <td class="transaction-amount">
          <?php if($a>0 && $a<=2) { ?>
            <h3>$72.50</h3>
          <?php } ?>
          <?php if($a==3) { ?>
            <h3>$49.05</h3>
          <?php } ?>
        </td>
        <td class="transaction-category">
          <select name="transaction-tag">
            <option>Telecom</option>
          </select>
        </td>
        <td class="transaction-action">
          <input type="text" id="addPONumberInputField<?php echo $a; ?>" placeholder="Add P.O number and hit enter">
        </td>
        <td class="transaction-extra-info">
          <?php if($a==3) { ?>
            <a href="" class="has-tip tip-left" title="Contains enhanced data" data-tooltip="left"><i class="icon icon-info-circle"></i></a>
            <a href="" class="has-tip tip-left" title="Contains receipt image" data-tooltip="left"><i class="icon icon-pictures"></i></a>
          <?php } ?>
        </td>
      </tr>
    <?php } ?>
  </tbody>
</table>
<div class="expanded-view row">
  <div class="medium-12 columns">
    <div class="row">
      <div class="medium-1 columns transaction-actions">
        <ul class="actions">
          <li>
            <a href="#" class="secondary has-tip" data-tooltip title="Flag Transactions">
              <i class="icon icon-flag3"></i>
            </a>
          </li>
          <li>
            <a href="#" class="secondary has-tip" data-tooltip title="Mark As Recurring Transaction">
              <i class="icon icon-refresh"></i>
            </a>
          </li>
          <li>
            <a href="#" class="secondary has-tip" data-tooltip title="Remove Transactions">
              <i class="icon icon-subtract"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="medium-4 columns transaction-line-item-breakdown left">
        <h4 class="section-heading">Enhanced Data</h4>
        <ul class="transaction-line-item-breakdown-list">
          <li>
            <span class="custom-label">1 Latex Interior Paint, White</span>
            <span class="transaction-amount-breakdown">$22.50</span>
          </li>
          <li>
            <span class="custom-label">1 Latex Interior Paint, Blue</span>
            <span class="transaction-amount-breakdown">$22.50</span>
          </li>
          <li>
            <span class="custom-label">Subtotal</span>
            <span class="transaction-amount-breakdown">$45.00</span>
          </li>
          <li>
            <span class="custom-label">Taxes</span>
            <span class="transaction-amount-breakdown">$4.05</span>
          </li>
          <li>
            <span class="custom-label">Total</span>
            <span class="transaction-amount-breakdown">$49.05</span>
          </li>
        </ul>
      </div>
      <div class="medium-4 columns transaction-misc-details">
        <h4 class="section-heading">Miscellaneous Details</h4>
        <ul class="transaction-line-item-breakdown-list">
          <li>
            <span class="custom-label">Transaction ID</span>
            <span class="transaction-amount-breakdown">7372281</span>
          </li>
          <li>
            <span class="custom-label">Merchant</span>
            <span class="transaction-amount-breakdown">Marcellas</span>
          </li>
          <li>
            <span class="custom-label">Time</span>
            <span class="transaction-amount-breakdown">09:49 am, PST</span>
          </li>
          <li>
            <span class="custom-label">Location</span>
            <span class="transaction-amount-breakdown">San Francisco, CA 94107 <a href="#">(map)</a></span>
          </li>
          <li>
            <span class="custom-label">MCC</span>
            <span class="transaction-amount-breakdown">5702, Hardware Equipment and Supplies</span>
          </li>
          <li>
            <form>
              <label>Contact Info</label>
              <input type="text" placeholder="Add a phone number">
            </form>
          </li>
        </ul>
      </div>
      <div class="medium-3 columns">
        <h4 class="section-heading">Receipt</h4>
        <a class="th receipt-th" href="" data-reveal-id="largeReceiptModal">
          <img src="images/receipt-placeholder.jpg">
        </a>
      </div>
    </div>
    <label for="businessPurpose">Business Purpose</label>
    <textarea id="businessPurpose" placeholder="Add note for business purpose"></textarea>
  </div>
</div>
<div id="largeReceiptModal" class="reveal-modal small" data-reveal>
  <h2>lowes-receipt.jpg</h2>
  <img class="img" src="images/receipt-placeholder.jpg">
  <a class="close-reveal-modal">×</a>
</div>
            
          

Split Admin and People Management Function

The split admin and people management function can be used to set permission for the purpose of delegating financial responsibility to people in an organization

Split Admin and People Management Example

2 Group Admins

7 Group Members

 
 
 
 
 
 
 
 
 
 
 
Code
              
<div class="row">
  <div class="admin-function medium-12 columns">
    <div class="row">
      <section class="medium-6 columns">
        <div class="action-header">
          <div class="left">
            <h3>2 Group Admins</h3>
          </div>
          <div class="right">
            <a href="#" class="button secondary small">+ Add Admin</a>
          </div>
        </div>
        <section class="admin-member-panel">
          <table class="admins-members-table">
            <tbody>
              <tr>
                <td class="user-image">
                  <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
                </td>
                <td class="user-profile">
                  <h4><a href="#">Eric Morris</a></h4>
                  <span class="person-title">Development</span>
                </td>
                <td class="permissions">
                  <form class="custom">
                    <label for="editMembersB">
                      <input type="checkbox" name="edit-members" id="editMembersB">
                      Edit Members
                    </label>

                    <label for="approveExpenseB">
                      <input type="checkbox" name="approve-expense" id="approveExpenseB">
                      Approve Expense
                    </label>
                  </form>
                </td>
                <td class="user-cta">
                  <a href="#" class="secondary">
                    <i class="icon icon-close"></i>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </section>

      <section class="medium-6 columns">
        <div class="action-header">
          <div class="left">
            <h3>7 Group Members</h3>
          </div>
          <div class="right">
            <a href="#" class="button secondary small">+ Add Member</a>
          </div>
        </div>
        <section class="admin-member-panel">
          <table class="admins-members-table members">
            <tbody>
              <tr>
                <td class="user-image">
                  <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
                </td>
                <td class="user-profile">
                  <h4><a href="#">Eric Morris</a></h4>
                  <span class="person-title">Development</span>
                </td>

                <td class="permissions"> </td>

                <td class="user-cta">
                  <a href="#" class="secondary">
                    <i class="icon icon-close"></i>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </section>
    </div>
  </div>
</div>
              
            

Document Upload Modal

The document upload modal is used in the document verification step of the company setup process.

Document Upload Modal Example

Code
              
<div id="docUploadModal" class="reveal-modal dropzone-modal medium" data-reveal>
  <h2>Upload Documents</h2>
  <form action="/file-upload" class="dropzone">
    <input name="file" type="file" multiple>
  </form>
  <form>
    <h4>Identify the uploaded documents</h4>
    <div class="row">
      <div class="medium-6 columns">
        <p>articles_of_incorporation.pdf</p>
      </div>
      <div class="medium-6 columns">
        <select>
          <option>Articles of Incorporation</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="medium-4 columns medium-centered">
        <button class="medium expand">Save</button>
      </div>
    </div>
  </form>
  <a class="close-reveal-modal">×</a>
</div>
              
            


People List Table

Use this component to list the most important information about people and to provide a link to a details view.

People List Table Example

  • 3

    New Alerts
  • 43

    Transactions
  • Budget Spent
  • January February Peak Spending Days
    > 10% of budget
    > 15% of budget
  • 3

    New Alerts
  • 43

    Transactions
  • Budget Spent
  • January February Peak Spending Days
    > 10% of budget
    > 15% of budget
  • 3

    New Alerts
  • 43

    Transactions
  • Budget Spent
  • January February Peak Spending Days
    > 10% of budget
    > 15% of budget
Code
        
<ul class="user-notification people-list">

  <li class="user-image">
    <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
  </li>
  <li class="user-profile">
    <h2><a href="people-detail.php">Eric Morris</a></h2>
    <span class="person-title">Development</span>
  </li>
  <li class="user-alerts">
    <h4>3</h4>
    <span class="">New Alerts</span>
  </li>
  <li class="user-transactions">
    <h4>43</h4>
    <span class="">Transactions</span>
  </li>
  <li class="user-budget">
    <img src="images/budget-spent.png" alt="Budget Spent">
  </li>
  <li class="user-peak-spending">
    <span class="month-one">January</span>
    <span class="month-two">February</span>
    <img src="images/peak-spending-days.png" alt="Peak Spending Days">
    <div class="greater-than ten left">
      <span class="legend-color"></span>
      <span class="legend-label"> > 10% of budget</span>
    </div>
    <div class="greater-than fifteen right">
      <span class="legend-color"></span>
      <span class="legend-label"> > 15% of budget</span>
    </div>
  </li>
</ul>
            
          

FlashCash Request Rows

Use this component to list FlashCash Requests with quick actions to approve, modify or decline.

FlashCash Request Row Example

Avaliable budget this month
Spent

$400

Budget

$2000

Message

Hey Bryan,
I need $400 to buy two iPhone's for the two designers we've added to the team!
Cheers, Kathy

Code
            
<div class="flash-cash-request row">
  <div class="medium-12 columns">
    <div class="flash-cash-request-panel">
      <div class="row flash-cash-request-details">
        <div class="flash-cash-user-profile medium-3 columns">
          <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
          <h2>Eric Morris</h2>
          <span class="person-title">Development</span>
        </div>
        <div class="flash-cash-budget-info medium-4 columns">
          <div class="budget-breakdown row">
            <div class="medium-12 columns">
              <img src="images/mobile-budget.png" alt="Avaliable budget this month">
            </div>
            <div class="row">
              <div class="medium-6 columns">
                <div class="budget-stats">
                  <span class="stat-label spent-this-month">Spent</span>
                  <h3 class="stat-number spent-this-month">$400</h3>
                </div>
              </div>
              <div class="medium-6 columns">
                <div class="budget-stats">
                  <span class="stat-label budget-this-month">Budget</span>
                  <h3 class="stat-number budget-this-month">$2000</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flash-cash-amount medium-3 columns">
          <label for="flashcashAmount">Amount Requested</label>
          <input type="text" value="$400" id="flashcashAmount" name="flashcash-amount">
          <form class="custom-date-selector">
            <div class="row collapse">
              <div class="medium-4 columns">
                <label for="dateFrom" class="prefix">From</label>
              </div>
              <div class="custom-date-from medium-8 columns">
                <input type="text" class="postfix datepicker" id="dateFrom" name="dateFrom" value="2014-06-01">
              </div>
              <div class="medium-4 columns">
                <label for="dateTo" class="prefix">To</label>
              </div>
              <div class="custom-date-to medium-8 columns">
                <input type="text" class="postfix datepicker" id="dateTo" name="dateTo" value="2014-06-30">
              </div>
            </div>
          </form>
        </div>
        <div class="flash-cash-actions medium-2 columns">
          <a href="#" class="button primary small">Approve</a>
          <a href="#" class="button secondary small">Decline</a>
        </div>

      </div>

      <div class="row flash-cash-request-message">
        <div class="flash-cash-request-message-title medium-2 columns">
          <h3>Message</h3>
        </div>

        <div class="flash-cash-request-message-body medium-10 columns">
          <p class="lead">Hey Bryan,<br>I need $400 to buy two iPhone's for the two designers we've added to the team!<br>Cheers, Kathy</p>
        </div>
      </div>


    </div>
  </div>
</div>
            
          

Instruction Block

Use this component if you need to instruct someone on how to use a functional area of the application.

Instruction Block Example

FlashCash lets you send time-bound funds to people instantaneously.

FlashCash lets you send time-bound funds to people instantaneously.

Code
              
<div class="instruction-block">
  <img src="images/fc-icon.svg" class="flashcash-icon" alt="FlashCash lets you send time-bound funds to people instantaneously.">
  <p>FlashCash lets you send time-bound funds to people instantaneously.</p>
  <a href="#" class="close"><i class="icon icon-times-circle-o"></i></a>
</div>
            
          

Workflow for Scheduling Funds Transfers

Use this component if you need to guide the user through a micro-flow to complete a task.

Workflow for Scheduling Funds Transfer Example

Select Source


Selected Account

Bank
Chase
Account Number
***********1234

When

Amount

Fund Groups

+ Add Group
Code
            
<div class="workflow-schedule-funds-transfer row">
  <div class="medium-12 columns">
    <div class="workflow-schedule-funds-transfer-panel">
      <div class="select-source-step medium-3 columns">
        <h3><i class="icon icon-library"></i> Select Source</h3>
        <select id="selectFundingSource" name="select-funding-source-select" class="select-funding-source-select" placeholder="Select Source">
          <option>Checking</option>
          <option SELECTED>Debit Card</option>
          <option>Credit Card</option>
        </select>
        <hr>
        <h4>Selected Account</h4>
        <h5>Bank</h5>
        <span>Chase</span>
        <h5>Account Number</h5>
        <span>***********1234</span>
      </div>
      <div class="periodicity-step medium-3 columns">
        <h3><i class="icon icon-clock-o"></i> When</h3>
        <label for="transferPeriodically" class="transfer-periodically-label">
         <input type="radio" id="transferPeriodically" class="transfer-periodically-radio" name="transfer-periodically-threshold-radio">
          Periodically
        </label>
        <label for="transferThreshold" class="transfer-threshold-label">
          <input type="radio" id="transferThreshold" class="transfer-threshold-radio" name="transfer-periodically-threshold-radio">
          Threshold
        </label>
        <label for="transferPeriodicity" class="transfer-periodicity-label">
          Every:
        </label>
        <select id="transferPeriodicity" name="transfer-periodicity-select" class="transfer-periodicity-select">
          <option SELECTED>Month</option>
          <option>Bi-Weekly</option>
          <option>Weekly</option>
          <option>Daily</option>
        </select>
        <div class="row">
          <div class="medium-12 columns">
            <label for="periodicitySelectorOption1" class="transfer-periodicity-option-1-label">
              <input type="radio" class="periodicity-selector" id="periodicitySelectorOption1" name="periodicitySelector">
              <select id="transferOptionOne" name="transfer-periodicity-option-1-select" class="transfer-periodicity-option-1-select">
                <option SELECTED>1st</option>
                <option>2nd</option>
                <option>3rd</option>
                <option>4th</option>
              </select>
              Day of Month
            </label>
          </div>
        </div>
        <div class="row">
          <div class="medium-12 columns">
            <input type="radio" class="periodicity-selector" id="periodicitySelectorOption2" name="periodicitySelector">
            <select id="transferOptionTwoStep1" name="transfer-periodicity-option-2-step-1-select" class="transfer-periodicity-option-2-step1-select">
              <option SELECTED>1st</option>
              <option>2nd</option>
              <option>3rd</option>
              <option>4th</option>
            </select>
            <select id="transferOptionTwoStep2" name="transfer-periodicity-option-2-step2-select" class="transfer-periodicity-option-2-step2-select">
              <option SELECTED>Mon</option>
              <option>Tue</option>
              <option>Wed</option>
              <option>Thur</option>
              <option>Fri</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div class="medium-12 columns">
            <label for="periodicitySelectorOption3" class="periodicity-selector-option-3-label">
              <input type="radio" class="periodicity-selector" id="periodicitySelectorOption3" name="periodicitySelector">
              Every
              <select id="transferOptionThree" name="transfer-periodicity-option-3-select" class="transfer-periodicity-option-3-select">
                <option SELECTED>Mon</option>
                <option>Tue</option>
                <option>Wed</option>
                <option>Thur</option>
                <option>Fri</option>
              </select>
              of Month
            </label>
          </div>
        </div>
      </div>
      <div class="amount-to-transfer-step medium-3 columns">
        <h3><i class="icon icon-money"></i> Amount</h3>
        <input type="radio" id="targetBalanceOf" class="target-balance-of-radio" name="target-balance-fixed-amount-radio">
        <label for="targetBalanceOf" class="target-balance-of-label">Target balance of</label>
        <input type="text" id="targetBalanceOfAmount" class="target-balance-of-amount-input" name="target-balance-of-amount-input">
        <input type="radio" id="fixedAmountOf" class="fixed-amount-of-radio" name="target-balance-fixed-amount-radio">
        <label for="fixedAmountOf" class="fixed-amount-of-label">Fixed amount of</label>
        <input type="text" id="targetBalanceOfAmount" class="target-balance-of-amount-input" name="target-balance-of-amount-input">
      </div>
      <div class="fund-groups-step medium-3 columns">
        <h3><i class="icon icon-users"></i> Fund Groups</h3>
        <select id="selectGroup" name="select-group-select" class="select-group-select" placeholder="Select Group">
          <option>Engineering</option>
          <option>Sales</option>
          <option>Marketing</option>
          <option>Design</option>
          <option>Operations</option>
        </select>
        <input type="text" id="allocateAmountToGroup" class="allocate-amount-to-group-input" name="allocate-amount-to-group-input">
        <a href="#" class="small button secondary">+ Add Group</a>
      </div>
    </div>
  </div>
</div>
            
          

Geographic Limits Selector

Use this geographic limits selector to add certain items from a list into a bucket.

Geographic Limits Selector Example

Find State to Define Geographic Limits
Find State to Define Geographic Limits
  • New York
  • North Carolina
Code
            
<div class="geographic-limits-selector row">
  <div class="find-state-list medium-6 columns">
    <h5>Find State to Define Geographic Limits</h5>
    <form>
      <div class="row collapse">
        <div class="medium-2 columns">
          <span class="prefix radius"><i class="icon icon-search-icon"></i></span>
        </div>
        <div class="medium-10 columns">
          <input type="text" id="searchStateList" placeholder="Find State">
        </div>
      </div>
      <ul class="geographic-state-list">
        <li class="geographic-state-limit"><a href="">Alabama</a></li>
        <li class="geographic-state-limit"><a href="">Alaska</a></li>
        <li class="geographic-state-limit"><a href="">Arizona</a></li>
        <li class="geographic-state-limit"><a href="">Arkansas</a></li>
        <li class="geographic-state-limit"><a href="">California</a></li>
        <li class="geographic-state-limit"><a href="">Colorado</a></li>
        <li class="geographic-state-limit"><a href="">Connecticut</a></li>
        <li class="geographic-state-limit"><a href="">Delaware</a></li>
      </ul>
    </form>
  </div>
  <div class="selected-state-list medium-6 columns">
    <h5>Find State to Define Geographic Limits</h5>
    <ul class="geographic-state-list">
      <li class="geographic-state-limit">
        New York
        <a href="" class="remove-state-limit"><i class="icon icon-close"></i></a></li>
      <li class="geographic-state-limit">North Carolina
        <a href="" class="remove-state-limit"><i class="icon icon-close"></i></a></li>
    </ul>
  </div>
</div>
            
          

Fund Transfer Log Component

Use the fund transfer log component to list fund transfer in a tabular format.

Fund Transfer Log Component Example

Date Funding Source Transferred Spent  
16 Jun

Chase Business Checkings

$20,000

$18,000

Transferred
16 Jun

Chase Business Checkings

$20,000

$18,000

Transferred
16 Jun

Chase Business Checkings

$20,000

$18,000

In Progress
Code
              
<table class="fund-transfer-log">
  <thead>
    <tr>
      <th class="transfer-date">Date</th>
      <th class="transfer-source">Funding Source</th>
      <th class="transfer-amount">Transferred</th>
      <th class="transfer-spend">Spent</th>
      <th class="transfer-status"> </th>
    </tr>
  </thead>

  <tbody>
    <tr class="fund-transfer-row">
      <td class="transfer-date">
        <span class="date-day">16</span>
        <span class="date-month">Jun</span>
      </td>
      <td class="transfer-source">
        <h3>Chase Business Checkings</h3>
      </td>
      <td class="transfer-amount">
        <h3>$20,000</h3>
      </td>
      <td class="transfer-spend">
        <h3>$18,000</h3>
      </td>
      <td class="transfer-status">
        <span class="transferred-label">
          Transferred
        </span>
      </td>
    </tr>

    <tr class="fund-transfer-row">
      <td class="transfer-date">
        <span class="date-day">16</span>
        <span class="date-month">Jun</span>
      </td>
      <td class="transfer-source">
        <h3>Chase Business Checkings</h3>
      </td>
      <td class="transfer-amount">
        <h3>$20,000</h3>
      </td>
      <td class="transfer-spend">
        <h3>$18,000</h3>
      </td>
      <td class="transfer-status">
        <span class="transferred-label">
          Transferred
        </span>
      </td>
    </tr>

    <tr class="fund-transfer-row">
      <td class="transfer-date">
        <span class="date-day">16</span>
        <span class="date-month">Jun</span>
      </td>
      <td class="transfer-source">
        <h3>Chase Business Checkings</h3>
      </td>
      <td class="transfer-amount">
        <h3>$20,000</h3>
      </td>
      <td class="transfer-spend">
        <h3>$18,000</h3>
      </td>
      <td class="transfer-status">
        <span class="in-progress-label">
          In Progress
        </span>
      </td>
    </tr>
  </tbody>

</table>
              
            

Funding Account Panel Component

Use the funding account panel component to modify or delete funding sources.

Funding Account Panel Example

Code
              
<div class="funding-account-panel">
  <table class="funding-accounts-table">
    <tbody>
      <tr class="funding-account">
        <td class="funding-account-name">
          <h3>Chase Business Debit Card</h3>
        </td>
        <td class="funding-account-label">
          <span class="primary-account-label">
            Primary Account
          </span>
        </td>
        <td class="funding-account-actions">
          <a href="#"><i class="icon icon-close"></i></a>
          <a href="#"><i class="icon icon-pencil4"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Help Flyout with Image Based Instructions Component

Use the help flyout with image based instructions to guide people in finding and entering the right pieces of information using imagery.

Help Flyout with Image Based Instructions Component Example

Where do I find the routing and account number?

Check Image
Code
              
<div class="help-flyout-image-instructions row">
  <div class="medium-8 columns">
    <p class="lead">
      <i class="icon icon-help"></i>
      Where do I find the routing and account number?
    </p>
    <div class="image-based-instructions-panel">
      <img src="images/check-image.png" alt="Check Image" class="check-image-help-instructions">
    </div>
  </div>
</div>
              
            

Connected Steps

Use this component to display a series of connected steps in a vertical line.

Connected Steps Example

  1. Authenticate

    Thank you for uploading the company verification documents.

    Articles of Incorporation

    These questions will help us consolidate some of the documents you will need to upload to verify your company information.

    Do the Articles of Incorporation contain the company's mailing address?

    Are you listed on the company's Board of Directors?

    Articles of Incorporation

    Next »
  2. Second step content.

  3. Third step content.

Code
            
<ol class="connected-steps">
  <li class="connected-step-item completed-step">
    Completed step content.
  </li>
  <li class="connected-step-item">
    Step content.
  </li>
  <li class="connected-step-item">
    Step content.
  </li>
</ol>
            
          

Connected Steps

Use this component to display a series of connected steps in a vertical line.

Connected Steps Example

  1. Verify your organization's address

    We need to verify your mailing address.
    100 W Rincon Ave
    Campbell, CA 95008
    I want to upload documents instead

    Secretary of State Search

    Note Entity address above must match search result.
    Next »
  2. Second step content.

  3. Third step content.

Code
            
<section class="sos-search-block">
  <h4>Secretary of State Search</h4>
  <h5 class="subheader"><span class="radius label">Note</span> Entity address above must match search result.</h5>
  <form>
    <ul class="radio-options">
      <li><input type="radio" name="sosRadioOptions" value="By Corporation Name" id="byCorporationName"><label for="byCorporationName">By Corporation Name</label></li>
      <li><input type="radio" name="sosRadioOptions" value="LLC or LP Name" id="llcOrLP"><label for="llcOrLP">LLC or LP Name</label></li>
      <li><input type="radio" name="sosRadioOptions" value="Entity Number" id="entityNumber"><label for="entityNumber">Entity Number</label></li>
    </ul>
    <div class="row collapse">
      <div class="medium-5 columns">
        <select>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="medium-5 columns">
        <input type="search" placeholder="Enter company name">
      </div>
      <div class="medium-2 columns">
        <button class="secondary">Search</button>
      </div>
    </div>
  </form>
</section>
            
          

Account History Timeline

Use this component in the account history section of the dashboard to show account updates in reverse chronological order.

Account History Timeline Example

Funding History
Acme Widget
Administrative Changes
Code
            
<ol class="account-history-timeline">
  <li class="timeline-update timeline-funding-update"><span class="update-date">June 20, 2013</span>$7,000 one-time transfer to budget by <a href="people-detail.php">Mary Fontina</a>.</li>
  <li class="timeline-update timeline-admin-update"><span class="update-date">June 14, 2013</span><a href="">Chris Agerton</a> edited the group <a href="">Engineering Team</a>.</li>
  <li class="timeline-update timeline-funding-update"><span class="update-date">May 2, 2013</span>$7,000 one-time transfer to budget by <a href="people-detail.php">Mary Fontina</a>.</li>
  <li class="timeline-update first-update">Joined December 12, 2012</li>
</ol>
            
          

Mobile Tab Bar

The mobile tab bar is used to link to the major functional areas of the application.

Mobile Tab Bar Example

Code
              
<nav>
  <ul class="kl-tab-bar">
    <li class="tab active">
      <a href="mobile-dashboard.php" class="active">
        <i class="icon icon-dashboard"></i>
        <span>Dashboard</span>
      </a>
    </li>
    <li class="tab">
      <a href="#">
        <i class="icon icon-users"></i>
        <span>People</span>
      </a>
    </li>
    <li class="tab">
      <a href="mobile-transaction-detail.php">
        <i class="icon icon-search-icon"></i>
        <span>Transactions</span>
      </a>
    </li>
  </ul>
</nav>
              
            

Mobile Top Bar

The mobile top bar is used for navigating back to that starting point.

Mobile Tab Bar Example

Code
              
<nav class="mobile-top-bar">
  <div class="nav-back left">
    <a href="mobile-dashboard.php">
      <span><i class="icon icon-chevron-circle-left"></i></span>
    </a>
  </div>
  <h3>Morton Salt</h3>
</nav>
              
            

Mobile Messages List

The mobile messages list is used for listing messages of various types.

Mobile Messages List Example

Code
              
<section class="dashboard-message-list">
  <article class="message-list-panel">
    <div class="message-content">
      <a href="mobile-message-fcrequest.php" class="notification-message">
        <h4>Bill Buckhold</h4>
        <p>Approved your FlashCash request for $2000</p>
      </a>
    </div>
  </article>
</section>
              
            

Mobile Messages Sender

The mobile message sender panel is used to showing who sent the message.

Mobile Message Sender Example

Joanne Jensen
From

Joanne Jensen

Code
              
<section class="message-sender">
  <div class="row">
    <div class="sender-image small-3 columns">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Joanne Jensen">
    </div>
    <div class="sender-name small-7 columns">
      <span class="custom-label">From</span>
      <h2>Joanne Jensen</h2>
    </div>
    <div class="message-type small-2 columns">
      <i class="icon icon-bell"></i>
    </div>
  </div>
</section>
              
            

Mobile Switches Component

Use this component when you have a binary option to present ot users.

Mobile Switches Example

Code
            
<div class="switch round small">
  <input id="exampleRadioSwitch" type="radio" name="testGroup">
  <label for="exampleRadioSwitch"></label>
</div>
            
          

Mobile Address Field

Use this to create an editable list of message recipients.

Mobile Address Field Example

Bryan Zmijewksi
Code
            
<div class="mobile-address-field">
  <header>
    <div class="row">
      <div class="small-2 columns">
        <label class="right inline">To</label>
      </div>
      <div class="small-8 columns">
        <span class="selected-message-recipient">Bryan Zmijewksi</span>
      </div>
      <div class="small-2 columns">
        <a href=""><i class="icon icon-plus4"></i></a>
      </div>
    </div>
  </header>
  <textarea placeholder="Type your message here…"></textarea>
</div>
            
          

Mobile FlashCash Widget Component

Use the mobile FlashCash widget to give manager the ability to edit FlashCash Requests on the fly.

Mobile FlashCash Widget Component

Code
            
<form class="flashcash-widget">
  <label for="flashcashAmount">FlashCash Amount Requested</label>
  <input type="text" value="$400" id="flashcashAmount" name="flashcash-amount">
  <div class="row">
    <div class="flashcash-date-from small-6 columns">
      <label for="dateFrom" class="prefix">From</label>
      <input type="date" class="postfix" id="dateFrom" name="dateFrom" value="2014-05-05">
    </div>
    <div class="flashcash-date-to small-6 columns">
      <label for="dateTo" class="prefix">To</label>
      <input type="date" class="postfix" id="dateTo" name="dateTo" value="2014-05-15">
    </div>
  </div>
</form>
            
          

Mobile Transaction Row

Use this to create a row in a list of transactions.

Mobile Transaction Row Example

Code
            
<a href="" class="transaction-row">
  <div class="row">
    <div class="small-2 columns">
      <i class="icon icon-food"></i>
    </div>
    <div class="small-5 columns">
      <span class="transaction-vendor-name">Morton Salt</span>
      <span class="transaction-timestamp">Feb 22, 2014</span>
    </div>
    <div class="small-5 columns">
      <span class="transaction-amount">$3,000.00</span>
    </div>
  </div>
</a>
            
          

Mobile Group List Component

Use the mobile group list to list all the groups in the organization

Mobile Message Sender Example

Code
            
<section class="mobile-group-list">
  <article class="group-list-panel">
    <div class="group-content">
      <a href="#">
        <h4>Engineering</h4>
        <p>31 Employees • 123 Transactions</p>
      </a>
    </div>
  </article>
</section>
            
          

Mobile Dashboard Budget Blockgrid

Use the mobile dashboard budget blockgrid to indicate what the user can pull

Mobile Dashboard Budget Blockgrid Example

Your budget this month
Spent This Month

$400

Budget This Month

$2000

Code
              
<section class="mobile-company-budget row">
  <div class="small-12 columns">
    <div class="mobile-company-budget-panel">
      <div class="row">
        <div class="small-7 columns">
          <img src="images/mobile-budget.png" alt="Your budget this month">
        </div>
        <div class="company-stats small-5 columns">
          <span class="stat-label spent-this-month">Spent This Month</span>
          <h3 class="stat-number spent-this-month">$400</h3>
          <span class="stat-label budget-this-month">Budget This Month</span>
          <h3 class="stat-number budget-this-month">$2000</h3>
        </div>
      </div>
    </div>
  </div>
</section>
              
            

Mobile Company Budget Component

Use the mobile company budget component to capture the company's budget

Mobile Company Budget Example

Company budget this month
Spent This Month

$400

Budget This Month

$2000

Code
              
<section class="mobile-company-budget row">
  <div class="small-12 columns">
    <div class="mobile-company-budget-panel">
      <div class="row">
        <div class="small-7 columns">
          <img src="images/company-budget.png" alt="Company budget this month">
        </div>
        <div class="company-stats small-5 columns">
          <span class="stat-label spent-this-month">Spent This Month</span>
          <h3 class="stat-number spent-this-month">$400</h3>

          <span class="stat-label budget-this-month">Budget This Month</span>
          <h3 class="stat-number budget-this-month">$2000</h3>
        </div>
      </div>
    </div>
  </div>
</section>

              
            

Mobile Admin Function Component

Use the mobile admin function component to delegate financial responsibility for the company from a mobile device

Mobile Admin Function Example

Code
            
<section class="mobile-admin-function">
  <table class="admins-members-table">
    <tbody>
      <tr>
        <td class="user-image">
          <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
        </td>
        <td class="user-profile">
          <h4><a href="#">Eric Morris</a></h4>
          <span class="person-title">Development</span>
        </td>
        <td class="permissions">
          <form class="custom">
            <label for="editMembersB0">
              <input type="checkbox" name="edit-members" id="editMembersB0">
              Edit Members
            </label>

            <label for="approveExpenseB0">
              <input type="checkbox" name="approve-expense" id="approveExpenseB0">
              Approve Expense
            </label>
          </form>
        </td>
        <td class="user-cta">
          <a href="#" class="secondary">
            <i class="icon icon-close"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td class="user-image">
          <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
        </td>
        <td class="user-profile">
          <h4><a href="#">Eric Morris</a></h4>
          <span class="person-title">Development</span>
        </td>
        <td class="permissions">
          <form class="custom">
            <label for="editMembersB1">
              <input type="checkbox" name="edit-members" id="editMembersB1">
              Edit Members
            </label>

            <label for="approveExpenseB1">
              <input type="checkbox" name="approve-expense" id="approveExpenseB1">
              Approve Expense
            </label>
          </form>
        </td>
        <td class="user-cta">
          <a href="#" class="secondary">
            <i class="icon icon-close"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td class="user-image">
          <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
        </td>
        <td class="user-profile">
          <h4><a href="#">Eric Morris</a></h4>
          <span class="person-title">Development</span>
        </td>
        <td class="permissions">
          <form class="custom">
            <label for="editMembersB2">
              <input type="checkbox" name="edit-members" id="editMembersB2">
              Edit Members
            </label>

            <label for="approveExpenseB2">
              <input type="checkbox" name="approve-expense" id="approveExpenseB2">
              Approve Expense
            </label>
          </form>
        </td>
        <td class="user-cta">
          <a href="#" class="secondary">
            <i class="icon icon-close"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td class="user-image">
          <img class="user-profile-image" src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Eric Morris">
        </td>
        <td class="user-profile">
          <h4><a href="#">Eric Morris</a></h4>
          <span class="person-title">Development</span>
        </td>
        <td class="permissions">
          <form class="custom">
            <label for="editMembersB3">
              <input type="checkbox" name="edit-members" id="editMembersB3">
              Edit Members
            </label>

            <label for="approveExpenseB3">
              <input type="checkbox" name="approve-expense" id="approveExpenseB3">
              Approve Expense
            </label>
          </form>
        </td>
        <td class="user-cta">
          <a href="#" class="secondary">
            <i class="icon icon-close"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</section>
            
          

Mobile Transaction Clarification Panel Component

Use the mobile transaction clarification panel to get employees to clarify what they spent money on from a message view

Mobile Transaction Clarification Panel Example

Code
            
<a href="" class="transaction-row">
  <div class="row">
    <div class="small-2 columns">
      <i class="icon icon-food"></i>
    </div>
    <div class="small-5 columns">
      <span class="transaction-vendor-name">Morton Salt</span>
      <span class="transaction-timestamp">Feb 22, 2014</span>
    </div>
    <div class="small-5 columns">
      <span class="transaction-amount">$3,000.00</span>
    </div>
  </div>
</a>
<div class="row">
  <div class="small-12 columns">
    <ul class="mobile-transaction-metadata">
      <li><i class="icon icon-info-circle"></i></li>
      <li><i class="icon icon-pictures"></i></li>
    </ul>
  </div>
</div>
            
          

Mobile People List Item Component

Use this component to display a list of people.

Mobile People List Item Example

Code
            
<a href="" class="mobile-list-item">
  <div class="row">
    <div class="small-2 columns">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg" alt="Joanne Jensen">
    </div>
    <div class="small-6 columns">
      <strong>Joanne Jensen</strong>
      <p>joanne@gmail.com</p>
    </div>
    <div class="small-2 columns">
      <i class="icon icon-phone"></i>
    </div>
    <div class="small-2 columns">
      <i class="icon icon-mail2"></i>
    </div>
  </div>
</a>
            
          

Modal Window Title

Modal window content
×

Upload Documents

Identify the uploaded documents

articles_of_incorporation.pdf

×

lowes-receipt.jpg

×