MOR POC

Accordion
Action Sheet
Alert
Animated Labels
Animations
Badge
Bell (Popover)
Blank Slate
Bottom Bar
Buttons
Button Loading
Card Sectioned
Carousel
Chat Message
Checkbox
Counter
Flip Card
Floating Actions
Floating Content
Footer
Dropdown
Dropdown Search
Dropdown Tags Search
Dropdown Tags Filter
Form
Horizontal Scroll
Icon Badge
Inputs
Input with Icon
Lightbox Image
Links
List
Main Navigation
Master Detail
Popover
Popup
Progress Circle
Progress Circle Fraction
Radio Buttons
Range Input
Section
Section Group
Section Index
Separator
Sidebar
Sub Navigation
Switch
Table
Tabs
Tags
Text Area
Timeline
Tooltip
Upload
User Avatar
Video
Waffle Menu
Walkthrough
Wizard

Buttons

Primary Buttons

Positive Action

                                
     <button type="button" class="btn btn-primary-positive">New Request</button>

Negative Action

                                
    <button type="button" class="btn btn-primary-negative">Cancel</button>

Disabled

                                
    <button type="button" class="btn btn-primary-disabled" disabled>New Request</button>

Secondary Buttons

Positive Action

                                
    <button type="button" class="btn btn-secondary-positive">Customize</button>

Negative Action

                                
     <button type="button" class="btn btn-secondary-negative">Cancel</button>

Disabled

                                
    <button type="button" class="btn btn-secondary-disabled" disabled>Customize</button>

Icon and Text Button

With Icon

                                
    <button type="button" class="btn btn-primary-positive"><i class="fas fa-envelope mr-2"></i>Message</button>

With Chevron

                                
    <button type="button" class="btn btn-primary-positive">Continue<i class="fas fa-chevron-right ml-2"></i></button>

Size

Small

                                
    <button type="button" class="btn btn-primary-positive btn-sm">New Request</button>

Medium

                                
    <button type="button" class="btn btn-primary-positive">New Request</button>

Large

                                
     <button type="button" class="btn btn-primary-positive btn-lg">New Request</button>

Button Group

                        
            <div class="btn-group" role="group"> 
                <button type="button" class="btn">All</button> 
                <button type="button" class="btn active">Active</button> 
                <button type="button" class="btn" disabled>Disabled</button> 
            </div>

Dropdown Button

                        
            <div class="dropdown"> 
                <button class="btn btn-primary-positive dropdown-toggle" data-toggle="dropdown" > 
                    Print Rates 
                </button> 
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
                    <a class="dropdown-item" href="#">securities</a> 
                    <a class="dropdown-item" href="#">All Rates</a> 
                </div> 
            </div>

Links

Link

Normal

                                
<a href="#">Link</a>

Link

Disabled

                                
<a href="#" class="disabled">Link</a>

Edit

With Icon

                                
<a href="#"><i class="far fa-edit mr-2"></i>Edit</a>

Learn More

With Icon - is Right

                                
<a href="#">Learn More<i class="fas fa-chevron-right ml-2"></i></a>

List / Card Item

JD

Header

Description
JD

Header

Description
JD

Header

Description

                    
                <ul class="list-group p-5">
                    <li class="list-group-item">
                        <div class="row">
                            <div class="col-md-1 list-group-item-icon"> 
                                <span>JD</span>
                            </div> 
                            <div class="col-md-10">
                                <h5 class="list-group-item-header">Header</h5>
                                <p class="list-group-item-description">Description</p>
                            </div> 
                            <div class="col-md-1"> <i class="fas fa-chevron-right"></i> </div> 
                        </div> 
                    </li> 
                    <li class="list-group-item"> 
                        <div class="row"> 
                            <div class="col-md-1 list-group-item-icon"> 
                                <span>JD</span> 
                            </div> 
                            <div class="col-md-10"> 
                                <h5 class="list-group-item-header">Header</h5> 
                                <p class="list-group-item-description">Description</p> 
                            </div> 
                            <div class="col-md-1"> <i class="fas fa-chevron-right"></i> </div> 
                        </div>
                    </li> 
                    <li class="list-group-item"> 
                        <div class="row"> 
                            <div class="col-md-1 list-group-item-icon"> 
                                <span>JD</span> 
                            </div> 
                            <div class="col-md-10"> 
                                <h5 class="list-group-item-header">Header</h5> 
                                <p class="list-group-item-description">Description</p> 
                            </div> 
                            <div class="col-md-1"> <i class="fas fa-chevron-right"></i> </div> 
                        </div> 
                    </li> 
                </ul>

Input

Employer Name

Normal

                            
<label for="name">Employer Name</label> 
<input class="form-control" id="name" placeholder="Type Full Name" />

Employer Name

Disabled

                            
<label for="name" class="disabled">Employer Name</label> 
<input class="form-control" id="name" disabled />

Employer Name

Error Message

Error

                            
<label for="name">Employer Name</label> 
<input class="form-control is-invalid" id="name" value="jamespjohn@email.com"/> 
<div><small class="is-invalid-feedback">Error Message</small></div>>

Employer Name

Small

                            
<label for="name">Employer Name</label> 
<input class="form-control form-control-sm" id="name" placeholder="Type Full Name" />

Employer Name

Medium

                            
<label for="name">Employer Name</label> 
<input class="form-control" id="name" placeholder="Type Full Name" />

Employer Name

Large

                            
<label for="name">Employer Name</label> 
<input class="form-control form-control-lg" id="name" placeholder="Type Full Name" />

Input with Icon

Normal

                        
                    <div class="input-group mt-5">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="far fa-user"></i>
                            </span>
                        </div>
                        <input class="form-control mt-0" />
                    </div>

Disabled

                        
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="far fa-user"></i>
                        </span>
                    </div>
                    <input class="form-control mt-0" disabled />
                </div>

Error

                        
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="far fa-user"></i>
                        </span>
                    </div>
                    <input class="form-control is-invalid mt-0"/>
                </div>

Normal Icon Right

                        
                <div class="input-group">
                    <input class="form-control mt-0" />
                    <div class="input-group-append">
                        <span class="input-group-text">
                            <i class="far fa-user"></i>
                        </span>
                    </div>
                </div>

Disabled Icon Right

                        
                <div class="input-group">
                    <input class="form-control mt-0" disabled />
                    <div class="input-group-append">
                        <span class="input-group-text">
                            <i class="far fa-user"></i>
                        </span>
                    </div>
                </div>

Error Icon Right

                        
                <div class="input-group">
                    <input class="form-control is-invalid mt-0" />
                    <div class="input-group-append">
                        <span class="input-group-text">
                            <i class="far fa-user"></i>
                        </span>
                    </div>
                </div>

Date Picker

                    
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>

Datepicker Range

                    
  <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>

Input with Animated Labels

Employer Name

                    
                <div class="form-group">
                    <input class="form-control" id="name"/>
                    <label for="name" class="animate">Employer Name</label>
                </div>

Form

Form - Top Labels

label

Priority

Due Date

Assigned To

                    
            <form>
                <div class="form-group">
                    <label for="request_name">label</label>
                    <input type="text" class="form-control" id="request_name" placeholder="Describe your request" />
                </div>
                <div class="form-group">
                    <label for="priority">Priority</label>
                    <select class="form-control" id="priority" placeholder="Choose Level">
                        <option>1</option>
                        <option>2</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="due_date">Due Date</label>
                    <select class="form-control" id="due_date">
                        <option>2018-12-03</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="assigned_to">Assigned To</label>
                    <select class="form-control" id="assigned_to" placeholder="Choose Employee">
                        <option>Example Emloyee 1</option>
                        <option>Example Emloyee 2</option>
                    </select>
                </div>
                <div class="form-row mt-4">
                    <div class="col-md-6">
                        <button class="btn btn-seconary w-100">Cancel</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary w-100">Save</button>
                    </div>
                </div>
            </form>

Form - Left Labels

label

Priority

Due Date

Assigned To

                    
                <form>
                    <div class="form-group form-inline">
                        <div class="col-md-2"><label for="request_name" class="float-left">label</label></div>
                        <input type="text" class="form-control col-md-10" id="request_name" placeholder="Describe your request" />
                    </div>
                    <div class="form-group form-inline">
                        <div class="col-md-2"><label for="priority" class="float-left">Priority</label></div>
                        <select class="form-control col-md-10" id="priority" placeholder="Choose Level">
                            <option>1</option>
                            <option>2</option>
                        </select>
                    </div>
                    <div class="form-group form-inline">
                        <div class="col-md-2"><label for="due_date" class="float-left">Due Date</label></div>
                        <select class="form-control col-md-10" id="due_date">
                            <option>2018-12-03</option>
                        </select>
                    </div>
                    <div class="form-group form-inline">
                        <div class="col-md-2"><label for="assigned_to" class="float-left">Assigned To</label></div>
                        <select class="form-control col-md-10" id="assigned_to" placeholder="Choose Employee">
                            <option>Example Emloyee 1</option>
                            <option>Example Emloyee 2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="form-row mt-4">
                            <div class="col-md-5 offset-md-2"><button class="btn btn-seconary w-100">Cancel</button></div>
                            <div class="col-md-5"><button class="btn btn-primary w-100">Save</button></div>
                        </div>
                    </div>
                </form>

Main Navigation / Sub Menu / Utility Navigation

                    
        <nav class="navbar navbar-expand-lg">
            <span class="navbar-brand" href="#">Members Only</span>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Users</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                    My Org
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">My Executives</a>
                    <a class="dropdown-item" href="#">Branches and Atms</a>
                    <a class="dropdown-item" href="#">Other Page</a>
                  </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Reports</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Requests</a>
                </li>
              </ul>
            </div>
          </nav>

Sub Navigation / Breadcrumbs

                    
            <nav class="navbar navbar-expand-lg navbar-sub">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Members Only</a></li>
                    <li class="breadcrumb-item active"><a href="#">Home</a></li>
                </ol>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#";>
                        1st Northern California
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Other CU</a>
                      </div>
                    </li>
                  </ul>
            </nav>

Footer

                    
        <footer>
            <div class="logo">
                <img src="img/logo.jpg">
            </div>
            <div class="contact">
                <ul>
                    <li><i class="far fa-envelope mr-2"></i>MemExp@corporateone.coop</li>
                    <li><i class="fas fa-phone mr-2"></i>866/MyCorp1</li>
                </ul>
            </div>
            <div class="copy">
                <ul>
                    <li>&copy; 2020 Corporate One Federal Credit Union</li>
                    <li><img src="img/logo-ncua.gif"></li>
                </ul>
            </div>
        </footer>

Popover

Note: the following JavaScript needs to be added in order for the popover to function

                    
    $(function () {
        $('[data-toggle="popover"]').popover({
            html: true,
            trigger: 'focus',
            title: 'Notifications<i class="fas fa-cog"></i>'
        })
      })

                        
<button type="button" class="btn btn-secondary-positive" data-container="body" data-toggle="popover" data-placement="top" 
    data-content="Fannie Woods has received your request. You'll be notified soon.">
        Popover on top
</button>

                        
<button type="button" class="btn btn-secondary-positive" data-container="body" data-toggle="popover" data-placement="bottom" 
    data-content="Fannie Woods has received your request. You'll be notified soon.">
        Popover on top
</button>

Bell (Popover)

JavaScript

                    
            ('.popover-list').popover({
                html: true,
                trigger: 'focus',
                title: 'Notifications<i class="fas fa-cog"></i>',
                content: '<ul>\
                    <li>Fannie Woods has received your request. You will be notified soon</li>\
                    <li>Dennis Wise has processed your ticket and the case is not closed</li>\
                    <div class="popover-view-all"><a href="#">View All</a></div>\
                    </ul>'
            })

HTML

                    
        <nav class="navbar navbar-expand-lg">
            <span class="navbar-brand" href="#">Members Only</span>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Users</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                    My Org
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">My Executives</a>
                    <a class="dropdown-item" href="#">Branches and Atms</a>
                    <a class="dropdown-item" href="#">Other Page</a>
                  </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Reports</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Requests</a>
                </li>
              </ul>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                  <li class="nav-item" ><button class="popover-list" data-toggle="popover"
                    data-placement="bottom">Bell</button> </li>
                  <li class="nav-item"><i class="fas fa-question"></i></li>
                  <li class="nav-item"><i class="fas fa-th"></i></li>
                  <li class="nav-item"><i class="far fa-user"></i></li>
                </ul>
            </div>
          </nav>

Waffle Menu

                    
        <nav class="navbar navbar-expand-lg">
            <span class="navbar-brand" href="#">Members Only</span>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Users</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                    My Org
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">My Executives</a>
                    <a class="dropdown-item" href="#">Branches and Atms</a>
                    <a class="dropdown-item" href="#">Other Page</a>
                  </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Reports</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Requests</a>
                </li>
              </ul>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                  <li class="nav-item" ><i class="fas fa-bell"></i></li>
                  <li class="nav-item"><i class="fas fa-question"></i></li>
                  <li class="nav-item"><button class="popover-waffle" data-toggle="popover"
                    data-placement="bottom">Waffle</button> </i></li>
                  <li class="nav-item"><i class="far fa-user"></i></li>
                </ul>
            </div>
          </nav>

Card Sectioned

OutSystems Styles

Personal Loan

Take control with a loan made for you. Access your loan information whenever you need it with tools to give you freedom to focus.

Simulate Loan

Vertical - No Padding

                    
    <div class="card card-outsystems vertical">
        <div class="card-img-top" style="background-image: url('img/os-card.png');">
        </div>
        <div class="card-body">
          <h5 class="card-title">Personal Loan</h5>
          <p class="card-text">
              Take control with a loan made for you. Access your loan
              information whenever you need it with tools to give you freedom to focus.</p>
          <a href="#">Simulate Loan</a>
        </div>
    </div>

Personal Loan

Take control with a loan made for you. Access your loan information whenever you need it with tools to give you freedom to focus.

Simulate Loan

Vertical - Padding

                    
        <div class="card card-outsystems vertical">
            <div class="card-img-top p-4">
                <div class="h-100" style="background-image: url('img/os-card.png');" ></div>
            </div>
            <div class="card-body">
              <h5 class="card-title">Personal Loan</h5>
              <p class="card-text">
                  Take control with a loan made for you. Access your loan
                  information whenever you need it with tools to give you freedom to focus.
                </p>
              <a href="#">Simulate Loan</a>
            </div>
          </div>

Personal Loan

Take control with a loan made for you. Access your loan information whenever you need it with tools to give you freedom to focus.

Simulate Loan

Horizontal - Left

                    
        <div class="card card-outsystems horizontal p-4">
            <div class="row no-gutters h-100 mx-0">
              <div class="col-md-6 p-4">
                <div class="card-img h-100" style="background-image: url('img/os-card.png');"></div>
              </div>
              <div class="col-md-6">
                <div class="card-body">
                  <h5 class="card-title">Personal Loan</h5>
                  <p class="card-text">
                    Take control with a loan made for you. Access your loan
                    information whenever you need it with tools to give you freedom to focus.
                  </p>
                  <a href="#">Simulate Loan</a>
                </div>
              </div>
            </div>
          </div>

Personal Loan

Take control with a loan made for you. Access your loan information whenever you need it with tools to give you freedom to focus.

Simulate Loan

Horizontal - Right

                    
            <div class="card card-outsystems horizontal">
                <div class="row no-gutters h-100">
                  <div class="col-md-6">
                    <div class="card-body">
                      <h5 class="card-title">Personal Loan</h5>
                      <p class="card-text">
                        Take control with a loan made for you. Access your loan
                        information whenever you need it with tools to give you freedom to focus.
                      </p>
                      <a href="#">Simulate Loan</a>
                    </div>
                  </div>
                  <div class="col-md-6 p-4">
                    <div class="card-img h-100" style="background-image: url('img/os-card.png');"></div>
                  </div>
                </div>
              </div>

My CU Manager Styles

User Information

Edit

First Name

Gabrielle

Last Name

Ciminello

E-mail

gciminello@corporateone.coop

Work Phone

614-555-1234

Title

ACH Manager

Business Level

Manager

Business Role(s)

ACH SEG Manager

My Permission

Basic User

Small

                    
            <div class="card col-4 p-0">
                <div class="card-header">
                  <h5>User Information</h5>
                  <div class="edit-btns">
                    <i class="fas fa-edit mr-2"></i><span>Edit</span>
                  </div>
                </div>
                <div class="card-body">

                  <label>First Name</label>
                  <span><p>Gabrielle</p></span>

                  <label>Last Name</label>
                  <span><p>Ciminello</p></span>

                  <label>E-mail</label>
                  <span><p>gciminello@corporateone.coop</p></span>

                  <label>Work Phone</label>
                  <span><p>614-555-1234</p></span>

                  <label>Title</label>
                  <span><p>ACH Manager</p></span>

                  <label>Business Level</label>
                  <span><p>Manager</p></span>

                  <label>Business Role(s)</label>
                  <span><p>ACH SEG Manager</p></span>

                  <label>My Permission</label>
                  <span><p>Basic User</p></span>
                </div>
              </div>

User Information

Cancel Save

First Name

Last Name

E-mail

Work Phone

Title

Business Level

Business Role(s)

My Permission

Small - Edit

                    
            <div class="card col-4 p-0 mt-5">
                <div class="card-header">
                  <h5>User Information</h5>
                  <div class="edit-btns">
                    <i class="fas fa-times mx-2"></i>Cancel
                    <i class="fas fa-check mx-2"></i>Save
                  </div>
                </div>
                <div class="card-body">
                    <form>
                        <div class="form-group required">
                            <label>First Name</label>
                            <input class="form-control" value="Gabrielle" required="required">
                        </div>
                        <div class="form-group required">
                            <label>Last Name</label>
                            <input class="form-control" value="Ciminello" required="required">
                        </div>
                        <div class="form-group required">
                            <label>E-mail</label>
                            <input class="form-control" value="gciminello@corporateone.coop" required="required">
                        </div>
                        <div class="form-group required">
                            <label>Work Phone</label>
                            <input class="form-control" value="614-555-1234" required="required">
                        </div>
                        <div class="form-group required">
                            <label>Title</label>
                            <input class="form-control" value="ACH Manager" required="required">
                        </div>
                        <div class="form-group required">
                            <label>Business Level</label>
                            <select class="form-control" required="required">
                                <option value="manager">Manager</option>
                            </select>
                        </div>
                        <div class="form-group required">
                            <label>Business Role(s)</label>
                            <select class="form-control" required="required">
                                <option value="manager">ACH SEG Manager</option>
                            </select>
                        </div>
                        <div class="form-group required">
                            <label>My Permission</label>
                            <select class="form-control" required="required">
                                <option value="manager">Basic User</option>
                            </select>
                        </div>
                    </form>
                </div>
              </div>

User Information

Edit

First Name

Gabrielle

Last Name

Ciminello

E-mail

gciminello@corporateone.coop

Work Phone

614-555-1234

Title

ACH Manager

Business Level

Manager

Business Role(s)

ACH SEG Manager

My Permission

Basic User

Medium

                    
            <div class="card col-6 p-0 mt-5">
                <div class="card-header">
                  <h5>User Information</h5>
                  <div class="edit-btns">
                    <i class="fas fa-edit mr-2"></i>Edit
                  </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <label>First Name</label>
                            <span><p>Gabrielle</p></span>
          
                            <label>Last Name</label>
                            <span><p>Ciminello</p></span>
          
                            <label>E-mail</label>
                            <span><p>gciminello@corporateone.coop</p></span>
          
                            <label>Work Phone</label>
                            <span><p>614-555-1234</p></span>
                        </div>
                        <div class="col-6">
                            <label>Title</label>
                            <span><p>ACH Manager</p></span>
          
                            <label>Business Level</label>
                            <span><p>Manager</p></span>
          
                            <label>Business Role(s)</label>
                            <span><p>ACH SEG Manager</p></span>
          
                            <label>My Permission</label>
                            <span><p>Basic User</p></span>
                        </div>
                    </div>
                </div>
              </div>

User Information

Cancel Save

First Name

Last Name

E-mail

Work Phone

Title

Business Level

Business Role(s)

My Permission

Medium - Edit

                    
            <div class="card col-6 p-0 mt-5">
                <div class="card-header">
                  <h5>User Information</h5>
                  <div class="edit-btns">
                    <i class="fas fa-times mx-2"></i>Cancel
                    <i class="fas fa-check mx-2"></i>Save
                  </div>
                </div>
                <div class="card-body">
                    <form>
                        <div class="row">
                        <div class="col-6">
                            <div class="form-group required">
                                <label>First Name</label>
                                <input class="form-control" value="Gabrielle" required="required">
                            </div>
                            <div class="form-group required">
                                <label>Last Name</label>
                                <input class="form-control" value="Ciminello" required="required">
                            </div>
                            <div class="form-group required">
                                <label>E-mail</label>
                                <input class="form-control" value="gciminello@corporateone.coop" required="required">
                            </div>
                            <div class="form-group required">
                                <label>Work Phone</label>
                                <input class="form-control" value="614-555-1234" required="required">
                            </div>
                        </div>
                        <div class="col-6">   
                            <div class="form-group required">
                                <label>Title</label>
                                <input class="form-control" value="ACH Manager" required="required">
                            </div>
                            <div class="form-group required">
                                <label>Business Level</label>
                                <select class="form-control" required="required">
                                    <option value="manager">Manager</option>
                                </select>
                            </div>
                            <div class="form-group required">
                                <label>Business Role(s)</label>
                                <select class="form-control" required="required">
                                    <option value="manager">ACH SEG Manager</option>
                                </select>
                            </div>
                            <div class="form-group required">
                                <label>My Permission</label>
                                <select class="form-control" required="required">
                                    <option value="manager">Basic User</option>
                                </select>
                            </div>
                        </div> 
                    </div>
                    </form>
                </div>
              </div>

User Information

Edit

First Name

Gabrielle

Last Name

Ciminello

E-mail

gciminello@corporateone.coop

Work Phone

614-555-1234

Cell Phone

614-555-4444

Title

ACH Manager

Business Level

Manager

Business Role(s)

ACH SEG Manager

My Permission

Basic User

Large

                    
            <div class="card col-12 p-0 mt-5">
                <div class="card-header">
                  <h5>User Information</h5>
                  <div class="edit-btns">
                    <i class="fas fa-edit mr-2"></i>Edit
                  </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            <label>First Name</label>
                            <span><p>Gabrielle</p></span>
          
                            <label>Last Name</label>
                            <span><p>Ciminello</p></span>
          
                            <label>E-mail</label>
                            <span><p>gciminello@corporateone.coop</p></span>
          
                        </div>
                        <div class="col-4">
                            <label>Work Phone</label>
                            <span><p>614-555-1234</p></span>

                            <label>Cell Phone</label>
                            <span><p>614-555-4444</p></span>

                            <label>Title</label>
                            <span><p>ACH Manager</p></span>
          
                        </div>
                        <div class="col-4">
                            <label>Business Level</label>
                            <span><p>Manager</p></span>
          
                            <label>Business Role(s)</label>
                            <span><p>ACH SEG Manager</p></span>
          
                            <label>My Permission</label>
                            <span><p>Basic User</p></span>
                        </div>
                    </div>
                </div>
              </div>

User Information

Cancel Save

First Name

Last Name

E-mail

Work Phone

Cell Phone

Title

Business Level

Business Role(s)

My Permission

Large - Edit

                    
            <div class="card p-0 mt-5">
                <div class="card-header">
                  <h5>User Information</h5>
                  <div class="edit-btns">
                    <i class="fas fa-times mx-2"></i>Cancel
                    <i class="fas fa-check mx-2"></i>Save
                  </div>
                </div>
                <div class="card-body">
                    <form>
                        <div class="row">
                        <div class="col-4">
                            <div class="form-group required">
                                <label>First Name</label>
                                <input class="form-control" value="Gabrielle" required="required">
                            </div>
                            <div class="form-group required">
                                <label>Last Name</label>
                                <input class="form-control" value="Ciminello" required="required">
                            </div>
                            <div class="form-group required">
                                <label>E-mail</label>
                                <input class="form-control" value="gciminello@corporateone.coop" required="required">
                            </div>
                        </div>
                        <div class="col-4">   
                            <div class="form-group required">
                                <label>Work Phone</label>
                                <input class="form-control" value="614-555-1234" required="required">
                            </div>
                            <div class="form-group required">
                                <label>Cell Phone</label>
                                <input class="form-control" value="614-555-5555" required="required">
                            </div>
                            <div class="form-group required">
                                <label>Title</label>
                                <input class="form-control" value="ACH Manager" required="required">
                            </div>
                        </div> 
                        <div class="col-4">
                            <div class="form-group required">
                                <label>Business Level</label>
                                <select class="form-control" required="required">
                                    <option value="manager">Manager</option>
                                </select>
                            </div>
                            <div class="form-group required">
                                <label>Business Role(s)</label>
                                <select class="form-control" required="required">
                                    <option value="manager">ACH SEG Manager</option>
                                </select>
                            </div>
                            <div class="form-group required">
                                <label>My Permission</label>
                                <select class="form-control" required="required">
                                    <option value="manager">Basic User</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
              </div>

Master-Detail

ACH

ACH Services

I&F

I&F Dashboard

Member$mart

OneWire Domestic

OneWire Global

Safekeeping

SCD

SimpliCD*

TranzCapture

Vault Services

ACH Services

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus sagittis.

Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae ligula blandit fermentum vel eget lectus. Ut blandit p-4 ipsum, condimentum sagittis nibh vulputate aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor

I&F Dashboard

Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor

Member$mart

OneWire Domestic

OneWire Global

Safekeeping

SimpliCD

TranzCapture

Vault Services

                    
            <div class="row mt-5">
                <div class="col-3">
                  <div class="list-group master-detail" id="list-tab" role="tablist">
                    <a class="master-detail-tab active" id="list-home-list" data-toggle="list" href="#ACH" role="tab">
                        <div class="master-detail-tab-icon mr-3">ACH</div>ACH Services<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-profile-list" data-toggle="list" href="#IF" role="tab">
                        <div class="master-detail-tab-icon mr-3">I&#38;F</div>I&#38;F Dashboard<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-messages-list" data-toggle="list" href="#MS" role="tab">
                        <div class="master-detail-tab-icon mr-3">MS</div>Member$mart<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-settings-list" data-toggle="list" href="#OD" role="tab">
                        <div class="master-detail-tab-icon mr-3">OD</div>OneWire Domestic<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-settings-list" data-toggle="list" href="#OG" role="tab">
                        <div class="master-detail-tab-icon mr-3">OG</div>OneWire Global<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-settings-list" data-toggle="list" href="#SK" role="tab">
                        <div class="master-detail-tab-icon mr-3">SK</div>Safekeeping<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-settings-list" data-toggle="list" href="#SCD" role="tab">
                        <div class="master-detail-tab-icon mr-3">SCD</div>SimpliCD*<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-settings-list" data-toggle="list" href="#TZ" role="tab">
                        <div class="master-detail-tab-icon mr-3">TZ</div>TranzCapture<i class="fas fa-chevron-right"></i>
                    </a>
                    <a class="master-detail-tab" id="list-settings-list" data-toggle="list" href="#V" role="tab">
                        <div class="master-detail-tab-icon mr-3">V</div>Vault Services<i class="fas fa-chevron-right"></i>
                    </a>
                  </div>
                </div>
                <div class="col-9">
                  <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="ACH" role="tabpanel">
                        <h5>ACH Services</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="IF" role="tabpanel">
                        <h5>I&#38;F Dashboard</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="MS" role="tabpanel">
                        <h5>Member$mart</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="OD" role="tabpanel">
                        <h5>OneWire Domestic</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="OG" role="tabpanel">
                        <h5>OneWire Global</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="SK" role="tabpanel">
                        <h5>Safekeeping</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="SCD" role="tabpanel">
                        <h5>SimpliCD</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="TZ" role="tabpanel">
                        <h5>TranzCapture</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                    <div class="tab-pane fade" id="V" role="tabpanel">
                        <h5>Vault Services</h5>
                        <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu diam quis risus facilisis 
                            sodales et nec neque. Phasellus ut mauris eget odio gravida accumsan. Donec tempor eu ante dapibus 
                            sagittis. 
                        </p>
                        <p>
                            Maecenas luctus nisl et lectus facilisis, at placerat ligula pretium. Nulla ut nisi vitae 
                            ligula blandit fermentum vel eget lectus. Ut blandit felis ipsum, condimentum sagittis nibh vulputate 
                            aliquet. Sed nisi felis, varius nec tempus non, pretium id dolor
                        </p>
                    </div>
                  </div>
                </div>
              </div>

Table

Request Name	Priority	Due Date	Assigned To
I noticed some erratic behavior from my screen.	High	9 Mar	Ann
Some of my keyboard keys are not working properly.	High	10 Mar	Darlene
I need a new mouse, the left click is not working.	High	11 Mar	David
My laptop needs to be replaced by a faster one.	High	12 Mar	Scarlet

Request Name	I noticed some erratic behavior from my screen.
Priority	High
Due Date	9 Mar
Assigned To	Ann
Request Name	Some of my keyboard keys are not working properly.
Priority	High
Due Date	10 Mar
Assigned To	Darlene
Request Name	I need a new mouse, the left click is not working.
Priority	High
Due Date	11 Mar
Assigned To	David
Request Name	My laptop needs to be replaced by a faster one.
Priority	High
Due Date	12 Mar
Assigned To	Scarlet

                    
            <table class="table">
                <thead>
                    <tr>
                        <th index="0">Request Name<i class="fas fa-sort ml-3"></i></th>
                        <th index="1">Priority<i class="fas fa-sort ml-3"></i></th>
                        <th>Due Date<i class="fas fa-sort ml-3"></i></th>
                        <th>Assigned To<i class="fas fa-sort ml-3"></i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>I noticed some erratic behavior from my screen.</td>
                        <td>High</td>
                        <td>9 Mar</td>
                        <td>Ann</td>
                    </tr>
                    <tr>
                        <td>Some of my keyboard keys are not working properly.</td>
                        <td>High</td>
                        <td>10 Mar</td>
                        <td>Darlene</td>
                    </tr>
                    <tr>
                        <td>I need a new mouse, the left click is not working.</td>
                        <td>High</td>
                        <td>11 Mar</td>
                        <td>David</td>
                    </tr>
                    <tr>
                        <td>My laptop needs to be replaced by a faster one.</td>
                        <td>High</td>
                        <td>12 Mar</td>
                        <td>Scarlet</td>
                    </tr>
                </tbody>
            </table>

Note: add the below markup to make the table mobile-responsive. The above table will be hidden and the below table displayed where the mobile breakpoint occurs.

                    
    <table class="table table-mobile">
                        <thead>
                        <tbody>
                            <tr>
                                <th index="0">Request Name</th>
                                <td>I noticed some erratic behavior from my screen.</td>
                            </tr>
                            <tr>
                                <th index="1">Priority</th>
                                <td>High</td>
                            </tr>
                            <tr>
                                <th>Due Date</th>
                                <td>9 Mar</td>
                            </tr>
                            <tr>
                                <th>Assigned To</th>
                                <td>Ann</td>

                            </tr>
                            <tr>
                                <th index="0">Request Name</th>
                                <td>Some of my keyboard keys are not working properly.</td>
                            </tr>
                            <tr>
                                <th index="1">Priority</th>
                                <td>High</td>
                            </tr>
                            <tr>
                                <th>Due Date</th>
                                <td>10 Mar</td>
                            </tr>
                            <tr>
                                <th>Assigned To</th>
                                <td>Darlene</td>

                            </tr>
                            <tr>
                                <th index="0">Request Name</th>
                                <td>I need a new mouse, the left click is not working.</td>
                            </tr>
                            <tr>
                                <th index="1">Priority</th>
                                <td>High</td>
                            </tr>
                            <tr>
                                <th>Due Date</th>
                                <td>11 Mar</td>
                            </tr>
                            <tr>
                                <th>Assigned To</th>
                                <td>David</td>
                            </tr>
                            <tr>
                                <th index="0">Request Name</th>
                                <td>My laptop needs to be replaced by a faster one.</td>
                            </tr>
                            <tr>
                                <th index="1">Priority</th>
                                <td>High</td>
                            </tr>
                            <tr>
                                <th>Due Date</th>
                                <td>12 Mar</td>
                            </tr>
                            <tr>
                                <th>Assigned To</th>
                                <td>Scarlet</td>
                            </tr>
                        </tbody>
                    </table>

Row Height

Request Name	Priority	Due Date	Assigned To
I noticed some erratic behavior from my screen.	High	9 Mar	Ann

Small

                    
        <table class="table table-small">
            <thead>
                <tr>
                    <th>Request Name<i class="fas fa-sort ml-3"></i></th>
                    <th>Priority<i class="fas fa-sort ml-3"></i></th>
                    <th>Due Date<i class="fas fa-sort ml-3"></i></th>
                    <th>Assigned To<i class="fas fa-sort ml-3"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>I noticed some erratic behavior from my screen.</td>
                    <td>High</td>
                    <td>9 Mar</td>
                    <td>Ann</td>
                </tr>
            </tbody>
        </table>

Request Name	Priority	Due Date	Assigned To
I noticed some erratic behavior from my screen.	High	9 Mar	Ann

Default

                    
            <table class="table">
                <thead>
                    <tr>
                        <th>Request Name<i class="fas fa-sort ml-3"></i></th>
                        <th>Priority<i class="fas fa-sort ml-3"></i></th>
                        <th>Due Date<i class="fas fa-sort ml-3"></i></th>
                        <th>Assigned To<i class="fas fa-sort ml-3"></i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>I noticed some erratic behavior from my screen.</td>
                        <td>High</td>
                        <td>9 Mar</td>
                        <td>Ann</td>
                    </tr>
                </tbody>
            </table>

Request Name	Priority	Due Date	Assigned To
I noticed some erratic behavior from my screen.	High	9 Mar	Ann

Large

                    
            <table class="table table-large">
                <thead>
                    <tr>
                        <th>Request Name<i class="fas fa-sort ml-3"></i></th>
                        <th>Priority<i class="fas fa-sort ml-3"></i></th>
                        <th>Due Date<i class="fas fa-sort ml-3"></i></th>
                        <th>Assigned To<i class="fas fa-sort ml-3"></i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>I noticed some erratic behavior from my screen.</td>
                        <td>High</td>
                        <td>9 Mar</td>
                        <td>Ann</td>
                    </tr>
                </tbody>
            </table>

Request Name	Priority	Due Date	Assigned To
I noticed some erratic behavior from my screen.	High	9 Mar	Ann
Some of my keyboard keys are not working properly.	High	10 Mar	Darlene
I need a new mouse, the left click is not working.	High	11 Mar	David
My laptop needs to be replaced by a faster one.	High	12 Mar	Scarlet

Zebra Striping

                    
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Request Name<i class="fas fa-sort ml-3"></i></th>
                        <th>Priority<i class="fas fa-sort ml-3"></i></th>
                        <th>Due Date<i class="fas fa-sort ml-3"></i></th>
                        <th>Assigned To<i class="fas fa-sort ml-3"></i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>I noticed some erratic behavior from my screen.</td>
                        <td>High</td>
                        <td>9 Mar</td>
                        <td>Ann</td>
                    </tr>
                    <tr>
                        <td>Some of my keyboard keys are not working properly.</td>
                        <td>High</td>
                        <td>10 Mar</td>
                        <td>Darlene</td>
                    </tr>
                    <tr>
                        <td>I need a new mouse, the left click is not working.</td>
                        <td>High</td>
                        <td>11 Mar</td>
                        <td>David</td>
                    </tr>
                    <tr>
                        <td>My laptop needs to be replaced by a faster one.</td>
                        <td>High</td>
                        <td>12 Mar</td>
                        <td>Scarlet</td>
                    </tr>
                </tbody>
            </table>

Vertical Borders

Request Name	Priority	Due Date	Assigned To
I noticed some erratic behavior from my screen.	High	9 Mar	Ann
Some of my keyboard keys are not working properly.	High	10 Mar	Darlene
I need a new mouse, the left click is not working.	High	11 Mar	David
My laptop needs to be replaced by a faster one.	High	12 Mar	Scarlet

                    
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Request Name<i class="fas fa-sort ml-3"></i></th>
                        <th>Priority<i class="fas fa-sort ml-3"></i></th>
                        <th>Due Date<i class="fas fa-sort ml-3"></i></th>
                        <th>Assigned To<i class="fas fa-sort ml-3"></i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>I noticed some erratic behavior from my screen.</td>
                        <td>High</td>
                        <td>9 Mar</td>
                        <td>Ann</td>
                    </tr>
                    <tr>
                        <td>Some of my keyboard keys are not working properly.</td>
                        <td>High</td>
                        <td>10 Mar</td>
                        <td>Darlene</td>
                    </tr>
                    <tr>
                        <td>I need a new mouse, the left click is not working.</td>
                        <td>High</td>
                        <td>11 Mar</td>
                        <td>David</td>
                    </tr>
                    <tr>
                        <td>My laptop needs to be replaced by a faster one.</td>
                        <td>High</td>
                        <td>12 Mar</td>
                        <td>Scarlet</td>
                    </tr>
                </tbody>
            </table>

Total Row

Investment Portfolio	Amount	Processing Date
Share Accounts	$829,267.69	03/23/2020
Certificate Accounts	$0.00	03/23/2020
SimpliCD	$992,000.00	02/01/2020
Securities	$0.00	02/01/2020
Total	$1,821,267.69

                    
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Investment Portfolio<i class="fas fa-sort ml-3"></i></th>
                        <th>Amount<i class="fas fa-sort ml-3"></i></th>
                        <th>Processing Date<i class="fas fa-sort ml-3"></i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Share Accounts</td>
                        <td>$829,267.69</td>
                        <td>03/23/2020</td>
                    </tr>
                    <tr>
                        <td>Certificate Accounts</td>
                        <td>$0.00</td>
                        <td>03/23/2020</td>
                    </tr>
                    <tr>
                        <td>SimpliCD</td>
                        <td>$992,000.00</td>
                        <td>02/01/2020</td>
                    </tr>
                    <tr>
                        <td>Securities</td>
                        <td>$0.00</td>
                        <td>02/01/2020</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr class="total-row">
                        <td>Total</td>
                        <td>$1,821,267.69</td>
                        <td></td>
                    </tr>
                </tfoot>
                
            </table>

Investment Portfolio	Amount	Processing Date
Share Accounts	$829,267.69	03/23/2020
Certificate Accounts	$0.00	03/23/2020
SimpliCD	$992,000.00	02/01/2020
Securities	$0.00	02/01/2020
Total	$1,821,267.69

Color

                    
        <table class="table table-bordered table-striped color-primary">
            <thead>
                <tr>
                    <th>Investment Portfolio<i class="fas fa-sort ml-3"></i></th>
                    <th>Amount<i class="fas fa-sort ml-3"></i></th>
                    <th>Processing Date<i class="fas fa-sort ml-3"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Share Accounts</td>
                    <td>$829,267.69</td>
                    <td>03/23/2020</td>
                </tr>
                <tr>
                    <td>Certificate Accounts</td>
                    <td>$0.00</td>
                    <td>03/23/2020</td>
                </tr>
                <tr>
                    <td>SimpliCD</td>
                    <td>$992,000.00</td>
                    <td>02/01/2020</td>
                </tr>
                <tr>
                    <td>Securities</td>
                    <td>$0.00</td>
                    <td>02/01/2020</td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="total-row">
                    <td>Total</td>
                    <td>$1,821,267.69</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>

Pagination Dropdown

Show

items per page

                    
            <nav class="pagination-nav">
                <ul class="pagination">
                  <li class="pagination-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="pagination-item" data-order="1"><a class="page-link" href="#">1</a></li>
                  <li class="pagination-item active" data-order="2"><a class="page-link" href="#">2</a></li>
                  <li class="pagination-item" data-order="3"><a class="page-link" href="#">3</a></li>
                  <li class="pagination-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
                <div class="pagination-dropdown-container">
                    <div><p>Show</p></div>
                    <div>
                        <select class="form-control">
                            <option>10</option>
                            <option>25</option>
                            <option>50</option>
                            <option>All</option>
                        </select>
                    </div>
                    <div><p> items per page</p></div>
                </div>
                
              </nav>

Accordion

OutSystems Style

I noticed some erratic behavior on my screen.

details here.

Some of my keyboard keys are not working properly.

details here.

I need a new mouse, the left click is not working.

details here.

                    
                    <div class="accordion accordion-os" id="accordionExample">
                        <div class="accordion-item">
                            <div class="accordion-heading" data-toggle="collapse" data-target="#collapseOne">
                                <p>I noticed some erratic behavior on my screen.</p><i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="collapseOne" class="collapse" data-parent="#accordionExample">
                                <p>details here.</p>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <div class="accordion-heading" data-toggle="collapse" data-target="#collapseTwo">
                                <p>Some of my keyboard keys are not working properly.</p><i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="collapseTwo" class="collapse" data-parent="#accordionExample">
                                <p>details here.</p>
                            </div>
                        </div>
                        <div class="accordion-item disabled" disabled>
                            <div class="accordion-heading" data-toggle="collapse" data-target="#collapseThree">
                                <p>I need a new mouse, the left click is not working.</p><i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="collapseThree" class="collapse" data-parent="#accordionExample">
                                <p>details here.</p>
                            </div>
                        </div>
                    </div>

MCM Style

I noticed some erratic behavior on my screen.

details here.

Some of my keyboard keys are not working properly.

details here.

I need a new mouse, the left click is not working.

details here.

                    
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <div class="accordion-heading" data-toggle="collapse" data-target="#collapseOneMCM">
                                <h4>I noticed some erratic behavior on my screen.</h4><i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="collapseOneMCM" class="collapse" data-parent="#accordionExample">
                                <p>details here.</p>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <div class="accordion-heading" data-toggle="collapse" data-target="#collapseTwoMCM">
                                <h4>Some of my keyboard keys are not working properly.</h4><i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="collapseTwoMCM" class="collapse" data-parent="#accordionExample">
                                <p>details here.</p>
                            </div>
                        </div>
                        <div class="accordion-item disabled" disabled>
                            <div class="accordion-heading" data-toggle="collapse" data-target="#collapseThreeMCM">
                                <h4>I need a new mouse, the left click is not working.</h4><i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="collapseThreeMCM" class="collapse" data-parent="#accordionExample">
                                <p>details here.</p>
                            </div>
                        </div>
                    </div>

Dropdown

Employee Name

                    
                    <label>Employee Name</label>
                    <div class="dropdown">
                        <a class="dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown">
                            Choose Employee
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Employee 1</a>
                            <a class="dropdown-item" href="#">Employee 2</a>
                            <a class="dropdown-item" href="#">Employee 3</a>
                        </div>
                    </div>

Button Dropdown

                    
                    <div class="dropdown">
                        <button class="btn btn-primary-positive dropdown-toggle" 
                        type="button" id="dropdownMenuButton" data-toggle="dropdown">
                            Dropdown button
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>

Radio Buttons

Option 1

Option 2

Option 3 (disabled)

                    
                    <div class="form-check form-check-inline">
                        <label class="form-check-label" for="inlineRadio1">
                            <input class="form-check-input" checked="checked" type="radio" 
                            name="inlineRadioOptions" id="inlineRadio1" value="option1">
                            <span class="radio-btn"></span>
                            <span class="radio-label">Option 1</span>
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label" for="inlineRadio2">
                            <input class="form-check-input" type="radio" 
                            name="inlineRadioOptions" id="inlineRadio2" value="option2">
                            <span class="radio-btn"></span>
                            <span class="radio-label">Option 2</span>
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label" for="inlineRadio3">
                            <input class="form-check-input" type="radio" 
                            name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                            <span class="radio-btn"></span>
                            <span class="radio-label">Option 3 (disabled)</span>
                        </label>
                    </div>

Radio Button - Disabled Checked

Option 3 (disabled)

                    
                    <div class="form-check form-check-inline">
                        <label class="form-check-label" for="inlineRadio3">
                            <input checked="checked" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                            <span class="radio-btn"></span>
                            <span class="radio-label">Option 3 (disabled)</span>
                        </label>
                    </div>

Sidebar

                    
                            <button class="sidebar-toggle btn btn-secondary-positive">Toggle Sidebar</button>
                            <nav id="sidebar" class="sidebar hidden">
                                <p>Hi! I'm a sidebar!</p>
                            </nav>

Alert

Info

Info Alert

                    
            <div class="alert alert-info alert-dismissible fade show col-6" role="alert">
                <i class="fas fa-info-circle mr-2"></i>Info Alert
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>

Success

Success Alert

                    
        <div class="alert alert-success alert-dismissible fade show col-6" role="alert">
            <i class="fas fa-check-circle mr-2"></i>Success Alert
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>

Warning

Warning Alert

                    
            <div class="alert alert-warning alert-dismissible fade show col-6" role="alert">
                <i class="fas fa-exclamation-circle mr-2"></i>Warning Alert
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>

Error

Error Alert

                    
        <div class="alert alert-danger alert-dismissible fade show col-6" role="alert">
            <i class="fas fa-ban mr-2"></i>Error Alert
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

Carousel

Slide 1

Slide 2

                    
            <div id="carouselExampleIndicators" class="carousel slide mt-4" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                      <div class="carousel-example">Slide 1</div>
                  </div>
                  <div class="carousel-item">
                    <div class="carousel-example">Slide 2</card>
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>

Tooltip

                    
            <button type="button" class="btn btn-primary-positive" data-toggle="tooltip" 
            data-placement="top" title="Tooltip on top">
                Tooltip on top
            </button>

                    
          <button type="button" class="btn btn-primary-positive" data-toggle="tooltip" 
          data-placement="right" title="Tooltip on right">
              Tooltip on right
          </button>

                    
                  <button type="button" class="btn btn-primary-positive" data-toggle="tooltip"
                  data-placement="bottom" title="Tooltip on bottom">
                  Tooltip on bottom
                  </button>

                    
          <button type="button" class="btn btn-primary-positive" data-toggle="tooltip" 
          data-placement="left" title="Tooltip on left">
              Tooltip on left
          </button>

Card

This is some text within a card body.

                    
            <div class="card">
                <div class="card-body">
                  This is some text within a card body.
                </div>
            </div>

Card Background

Take Control with a Loan Made for You

Center

                    
            <div class="card card-background col-4">
                <div class="card-body center" style="background-image: url('img/os-card.png');">
                  <h3>Take Control with a Loan Made for You</h3>
                </div>
            </div>

Take Control with a Loan Made for You

Center Top

                    
          <div class="card card-background col-4">
              <div class="card-body top" style="background-image: url('img/os-card.png');">
                <h3>Take Control with a Loan Made for You</h3>
              </div>
          </div>

Take Control with a Loan Made for You

Center Bottom

                    
          <div class="card card-background col-4">
              <div class="card-body bottom" style="background-image: url('img/os-card.png');">
                <h3>Take Control with a Loan Made for You</h3>
              </div>
          </div>

Take Control with a Loan Made for You

Color

                    
          <div class="card card-background col-4">
              <div class="card-body center color" style="background-image: url('img/os-card.png');">
                <h3>Take Control with a Loan Made for You</h3>
              </div>
          </div>

Tags - OutSystems Styling

High

                            
<span class="badge badge-pill badge-danger badge-md">High</span>

Is Light

High

                            
<span class="badge badge-pill badge-danger-light badge-md">High</span>

Sizing

High

Small

                                
<span class="badge badge-pill badge-danger badge-sm">High</span>

High

Medium

                                
<span class="badge badge-pill badge-danger badge-md">High</span>

High

Large

                                
<span class="badge badge-pill badge-danger badge-lg">High</span>

Alternative Colors

success

Success

                                
<span class="badge badge-pill badge-success badge-md">High</span>

Info

Info

                                
<span class="badge badge-pill badge-info badge-md">High</span>

Warning

Warning

                                
<span class="badge badge-pill badge-warning badge-md">High</span>

Action Sheet

                    
            <div class="card card-outsystems vertical" style="background-color: gray;">
                <button class="btn btn-primary-positive action-toggle">Open Action Sheet</button>
                <div class="action-sheet">
                    <div class="btn-group-vertical">
                        <button class="btn">Flag</button>
                        <button class="btn">Mark as Unread</button>
                        <button class="btn btn-delete">Delete</button>
                        <button class="btn btn-cancel">Cancel</button>
                    </div>
                </div>
            </div>

Horizontal Scroll

                    
            <div class="horizontal-scroll">
                <ul>
                    <li><div class="card">1</div></li>
                    <li><div class="card">2</div></li>
                    <li><div class="card">3</div></li>
                    <li><div class="card">4</div></li>
                </ul>
            </div>

Floating Actions

Add Member
Settings

                    
            <div class="floating-actions">
                <ul>
                    <li>
                        Add Member<button class="btn btn-secondary-positive mx-2">+</button>
                    </li>
                    <li>
                        Settings<button class="btn btn-secondary-positive mx-2">+</button>
                    </li>
                </ul>
                <button class="btn btn-open btn-primary-positive">+</button>
            </div>

Lightbox Image

                    
            <div class="lightbox" style="width: 50rem;">
                <div class="row">
                    <div data-slide="1" class="lightbox-image lightbox-image-featured col-12" data-toggle="modal" data-target="#lightbox-expand">
                        <img src="img/lightbox-1.png">
                    </div>
                </div>
                <div class="row mt-3">
                    <div data-slide="2" class="lightbox-image col-4" data-toggle="modal" data-target="#lightbox-expand"><img src="img/lightbox-2.png"></div>
                    <div data-slide="3" class="lightbox-image col-4" data-toggle="modal" data-target="#lightbox-expand"><img src="img/lightbox-3.png"></div>
                    <div data-slide="4" class="lightbox-image col-4" data-toggle="modal" data-target="#lightbox-expand"><img src="img/lightbox-4.png"></div>
                </div>
            </div>
            <div id="lightbox-expand" class="modal fade lightbox-expand" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                          <div class="carousel-item lightbox-item lightbox-item-1">
                            <img class="d-block w-100"  src="img/lightbox-1.png">
                          </div>
                          <div class="carousel-item lightbox-item lightbox-item-2">
                            <img class="d-block w-100" src="img/lightbox-2.png">
                          </div>
                          <div class="carousel-item lightbox-item lightbox-item-3">
                            <img class="d-block w-100" src="img/lightbox-3.png">
                          </div>
                          <div class="carousel-item lightbox-item lightbox-item-4">
                            <img class="d-block w-100" src="img/lightbox-4.png">
                          </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                          <span aria-hidden="true">&larr;</span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                          <span aria-hidden="true">&rarr;</span>
                          <span class="sr-only">Next</span>
                        </a>
                      </div>
                  </div>
                </div>
              </div>

Video

Small

                        
                <div class="embed-responsive embed-responsive-16by9 video-s">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
                </div>

Medium

                        
                <div class="embed-responsive embed-responsive-16by9 video-m">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
                </div>

Large

                        
                <div class="embed-responsive embed-responsive-16by9 video-lg">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
                </div>

Extra Large

                        
                <div class="embed-responsive embed-responsive-16by9 video-xl">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
                </div>

Range Slider Input

8 Months

                    
                    <div class="indicator">8 Months</div>
                    <div class="range" style='--min:0; --max:12; --value:8; '>
                        <input type="range" min="0" max="12" value="3" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
                        <div class='range__progress'></div>
                    </div>

Search

                    
            <div class="input-group">
                <input class="form-control form-control-search col-4" placeholder="Search" />
                <button class="btn btn-clear">
                    <i class="fa fa-times"></i>
                </button>
            </div>

Animations

Bottom To Top

                    
<span class="animation-ball bottom-to-top infinite"></span>

Top To Bottom

                    
<span class="animation-ball top-to-bottom infinite"></span>

Left to Right

                    
<span class="animation-ball left-to-right infinite"></span>

Right to Left

                    
<span class="animation-ball right-to-left infinite"></span>

Fade In

                    
<span class="animation-ball fade-in infinite"></span>

Bounce

                    
<span class="animation-ball bounce infinite"></span>

Scale

                    
<span class="animation-ball scale infinite"></span>

Scale Down

                    
<span class="animation-ball scale-down infinite"></span>

Spinner

                    
<span class="animation-ball spinner infinite"></span>

Bottom Bar

                    
                    <div class="bottom-bar btn-group" role="group">
                        <button type="button" class="btn">
                            <p><i class="far fa-star"></i></p>
                            <p>Favorites</p>
                        </button>
                        <button type="button" class="btn">
                            <p><i class="fas fa-search"></i></p>
                            <p>Browse</p>
                        </button>
                        <button type="button" class="btn active">
                            <p><i class="far fa-comments"></i></p>
                            <p>Messages</p>
                        </button>
                        <button type="button" class="btn">
                            <p><i class="far fa-user"></i></p>
                            <p>Profile</p>
                        </button>
                    </div>

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at tincidunt lorem. Nullam feugiat tristique nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam et condimentum risus, ut tincidunt diam.

Donec faucibus sollicitudin ipsum. Donec vulputate luctus velit, sit amet condimentum orci hendrerit at. Suspendisse consequat dui eget leo placerat, et ultrices ex lacinia. Phasellus accumsan erat maximus eleifend sollicitudin.

Aenean eros sapien, rutrum eu sagittis eget, sollicitudin condimentum arcu. Aliquam erat volutpat. Quisque varius massa at fermentum tincidunt. Aenean venenatis, arcu tempor vestibulum mollis, turpis libero convallis sapien, non hendrerit quam lacus vitae libero.

                    
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#personal" role="tab" aria-controls="personal" aria-selected="true">Personal</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#job" role="tab" aria-controls="job" aria-selected="false">Job</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#salary" role="tab" aria-controls="salary" aria-selected="false">Salary</a>
                </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="personal" role="tabpanel">...</div>
                <div class="tab-pane fade" id="job" role="tabpanel">...</div>
                <div class="tab-pane fade" id="salary" role="tabpanel">...</div>
              </div>

Justified

                    
        <ul class="nav nav-tabs justified" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="home-tab" data-toggle="tab" href="#personal2" role="tab" aria-controls="personal" aria-selected="true">
              Personal
            </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="profile-tab" data-toggle="tab" href="#job2" role="tab" aria-controls="job" aria-selected="false">Job</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="contact-tab" data-toggle="tab" href="#salary2" role="tab" aria-controls="salary" aria-selected="false">Salary</a>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="personal2" role="tabpanel">...</div>
            <div class="tab-pane fade" id="job2" role="tabpanel">...</div>
            <div class="tab-pane fade" id="salary2" role="tabpanel">...</div>
          </div>

Personal Job Salary

Vertical Left

                    
            <div class="row">
                <div class="col-3">
                  <div class="nav nav-tabs flex-column vertical-left" role="tablist" aria-orientation="vertical">
                        <a class="nav-link active" id="personal-tab-3" data-toggle="tab" href="#personal3" role="tab">Personal</a>
                        <a class="nav-link"id="job-tab-3" data-toggle="tab" href="#job3" role="tab">Job</a>
                        <a class="nav-link" id="salary-tab-3" data-toggle="tab" href="#salary3" role="tab">Salary</a>
                  </div>
                </div>
                <div class="col-9">
                  <div class="tab-content">
                    <div class="tab-pane fade show active" id="personal3" role="tabpanel">...</div>
                    <div class="tab-pane fade" id="job3" role="tabpanel">...</div>
                    <div class="tab-pane fade" id="salary3" role="tabpanel">...</div>
                  </div>
                </div>
              </div>

Personal Job Salary

Vertical Right

                    
            <div class="row">
                <div class="col-9">
                  <div class="tab-content text-right">
                    <div class="tab-pane fade show active" id="personal4" role="tabpanel">...</div>
                    <div class="tab-pane fade" id="job4" role="tabpanel">...</div>
                    <div class="tab-pane fade" id="salary4" role="tabpanel">...</div>
                  </div>
                </div>
                <div class="col-3">
                    <div class="nav nav-tabs flex-column vertical-right" role="tablist" aria-orientation="vertical">
                          <a class="nav-link active" id="personal-tab-4" data-toggle="tab" href="#personal4" role="tab">Personal</a>
                          <a class="nav-link" id="job-tab-4" data-toggle="tab" href="#job4" role="tab">Job</a>
                          <a class="nav-link" id="salary-tab-4" data-toggle="tab" href="#salary4" role="tab">Salary</a>
                    </div>
                  </div>
              </div>

Section Index

Personal Details Job Details Team Details

Personal Details

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Job Details

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Team Details

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

                    
        <div class="row section-index">
            <div class="col-2">
                <div id="list-example" class="list-group">
                    <a class="list-group-item list-group-item-action active" href="#personal-details">Personal Details</a>
                    <a class="list-group-item list-group-item-action" href="#job-details">Job Details</a>
                    <a class="list-group-item list-group-item-action" href="#team-details">Team Details</a>
                  </div>
            </div>
            <div class="col-8">
                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="section-index-content">
                    <h4 id="personal-details">Personal Details</h4>
                    <p>...</p>
                    <h4 id="job-details">Job Details</h4>
                    <p>...</p>
                    <h4 id="team-details">Team Details</h4>
                    <p>...</p>
                  </div>
            </div>
        </div>

Timeline

Today

Pending Approval

This request requires approval.
May 19, 2018

Approval Requested

John Lloyd has requested your approval.
2018

Request Created

Request Created by Kim May.

                    
        <ul class="timeline">
            <li class="timeline-item">
                <div class="date">Today</div>
                <div class="status">Pending Approval</div>
                <div class="description">This request requires approval.</div>
            </li>
            <li class="timeline-item">
                <div class="date">May 19, 2018</div>
                <div class="status">Approval Requested</div>
                <div class="description">John Lloyd has requested your approval.</div>
            </li>
            <li class="timeline-item">
                <div class="date">2018</div>
                <div class="status">Request Created</div>
                <div class="description">Request Created by Kim May.</div>
            </li>
        </ul>

Wizard

Personal Details
Address Details
Review Account

                    
            <ul class="wizard">
                <li class="wizard-item">Personal Details</li>
                <li class="wizard-item">Address Details</li>
                <li class="wizard-item">Review Account</li>
            </ul>

Personal Details
Address Details
Review Account

Top Labels

                    
            <ul class="wizard top-label">
                <li class="wizard-item">Personal Details</li>
                <li class="wizard-item">Address Details</li>
                <li class="wizard-item">Review Account</li>
            </ul>

Personal Details
Address Details
Review Account

Vertical

                    
            <ul class="wizard wizard-vertical">
                <li class="wizard-item">Personal Details</li>
                <li class="wizard-item">Address Details</li>
                <li class="wizard-item">Review Account</li>
            </ul>

Checkbox

Checkbox Label

                    
<div class="form-check">
       <label class="form-check-label" for="defaultCheck">
             <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
             <span class="checkbox"><i class="fas fa-check"></i></span>
                Checkbox Label 
        </label>
</div>

Checkbox Label

Disabled

                    
<div class="form-check">
       <label class="form-check-label" for="disabledCheck">
             <input class="form-check-input" type="checkbox" value="" id="disabledCheck" disabled>
             <span class="checkbox"></span>
                Checkbox Label 
        </label>
</div>

Checkbox Label

Acceptance is Required

Error

                    
<div class="form-check">
    <label class="form-check-label" for="errorCheck">
        <input class="form-check-input error" type="checkbox" value="" id="errorCheck">
        <span class="checkbox"><i class="fas fa-check"></i></span>
        Checkbox Label 
    </label>
    <p><small class="form-check-error-msg">Acceptance is Required</small></p>
</div>

Popup

                    
        <button class="btn btn-primary-positive" data-toggle="modal" data-target="#example-popup">Open Popup</button>
    
        <div class="modal fade" id="example-popup" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title">Members Only Access</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <p>By assigning this user to a System Role, they will be given Members only access for $2.50 a month.</p>
                    <p>Members Only access requires a Multi-Factor Authorization Username.</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary-negative" data-dismiss="modal">Cancel</button>
                  <button class="btn btn-primary-positive">Continue</button>
                </div>
              </div>
            </div>
          </div>

Badge

Small

                            
                        <span class="badge badge-round badge-round-sm badge-dark">22</span>

Default

                            
                        <span class="badge badge-round badge-dark">22</span>

Medium

                            
                        <span class="badge badge-round badge-rouind-md badge-dark">22</span>

Icon Badge

                        
                <div class="badge-icon-container">
                    <i class="fas fa-envelope mr-2"></i>
                    <span class="badge badge-icon badge-danger">1</span>
                </div>

                        
                <div class="badge-icon-container">
                    <i class="fas fa-envelope mr-2"></i>
                    <span class="badge badge-icon badge-icon-light">1</span>
                </div>

Counter

Completed Requests

Default

                        
                <div class="card counter-container col-3">
                    <div class="card-body">
                      <div class="counter-number">26</div>
                      <div class="counter-label">Completed Requests</div>
                      <div class="counter-icon"><i class="fas fa-check"></i></div>
                </div>
                </div>

Completed Requests

Disabled

                        
                <div class="card counter-container counter-disabled col-3">
                    <div class="card-body">
                      <div class="counter-number">26</div>
                      <div class="counter-label">Completed Requests</div>
                      <div class="counter-icon"><i class="fas fa-check"></i></div>
                    </div>
                </div>

Completed Requests

Vertical

                        
                <div class="card counter-container col-3">
                    <div class="card-body vertical">
                      <div class="counter-number">26</div>
                      <div class="counter-label">Completed Requests</div>
                      <div class="counter-icon"><i class="fas fa-check"></i></div>
                    </div>
                </div>

Completed Requests

Colored - Primary

                    
            <div class="card counter-container counter-primary col-3">
                <div class="card-body">
                  <div class="counter-number">26</div>
                  <div class="counter-label">Completed Requests</div>
                  <div class="counter-icon"><i class="fas fa-check"></i></div>
                </div>
            </div>

Completed Requests

Colored - Disabled

                    
            <div class="card counter-container counter-primary-disabled col-3">
                <div class="card-body">
                  <div class="counter-number">26</div>
                  <div class="counter-label">Completed Requests</div>
                  <div class="counter-icon"><i class="fas fa-check"></i></div>
                </div>
            </div>

Completed Requests

Colored - Vertical

                    
            <div class="card counter-container counter-primary col-3">
                <div class="card-body vertical">
                  <div class="counter-number">26</div>
                  <div class="counter-label">Completed Requests</div>
                  <div class="counter-icon"><i class="fas fa-check"></i></div>
                </div>
            </div>

Change(s) Pending My Approval

Manage Requests

MyCU Manager Style

                    
            <div class="card counter-container counter-primary counter-mcm col-5">
                <div class="card-body">
                    <div class="counter-number">6</div>
                    <div class="counter-label">
                      Change(s) Pending My Approval
                    </div>
                </div>
            <a class="counter-link" href="#">Manage Requests <i class="fas fa-chevron-right ml-2"></i></a>
           </div>

$100k

SimpliCD

Investment Dashboard Style

                    
            <div class="card counter-container counter-investment col-5">
                <div class="card-body">
                    <div class="counter-number">$100k</div>
                    <div class="counter-label">SimpliCD</div>
                    <div class="counter-icon"><i class="fas fa-chevron-right"></i></div>
                </div>
           </div>

$100k

SimpliCD

Investment Dashboard Style - Disabled

                    
            <div class="card counter-container counter-disabled counter-investment col-5">
                <div class="card-body">
                    <div class="counter-number">$100k</div>
                    <div class="counter-label">SimpliCD</div>
                    <div class="counter-icon"><i class="fas fa-chevron-right"></i></div>
                </div>
           </div>

Progress Bar

Ongoing

55%

Extra small

                    
        <div class="progress-container col-6">
            <div class="progress-label">
                <p>Ongoing</p>
                <p>55%</p>
            </div>
            <div class="progress progress-xs">
                <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

Ongoing

55%

Small

                    
        <div class="progress-container col-6">
            <div class="progress-label">
                <p>Ongoing</p>
                <p>55%</p>
            </div>
            <div class="progress progress-s">
                <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

Ongoing

55%

Default

                    
        <div class="progress-container col-6">
            <div class="progress-label">
                <p>Ongoing</p>
                <p>55%</p>
            </div>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

55%

Inline

                    
        <div class="progress-container progress-inline col-6">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label">
                <p>55%</p>
            </div>
        </div>

Progress Circle

55%

                    
        <div class="progress progress-circle" data-value='55'>
            <span class="progress-left">
                <span class="progress-bar progress-border"></span>
            </span>
            <span class="progress-right">
                <span class="progress-bar progress-border"></span>
            </span>
            <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
              <div class="progress-label">55%</div>
            </div>
        </div>

Progress Circle Fraction

100

                    
            <div class="progress progress-circle" data-value='55'>
                <span class="progress-left">
                    <span class="progress-bar progress-border"></span>
                </span>
                <span class="progress-right">
                    <span class="progress-bar progress-border"></span>
                </span>
                <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                    <div class="progress-label-fraction">
                      <div class="numerator">55</div>
                      <div class="denominator">100</div>
                    </div>
                </div>
            </div>

Dropdown Search

Employee Name

                        
                    <label for="employee-name-dropdown">Employee Name</label>
                    <div class="dropdown">
                        <button class="btn btn-dropdown-search dropdown-toggle" type="button" data-toggle="dropdown" 
                        aria-haspopup="true" aria-expanded="false">
                        Select Name
                        </button>
                        <div class="dropdown-menu"  id="employee-name-dropdown" aria-labelledby="dropdownMenuButton">
                            <input class="form-control dropdown-search" type="text" placeholder="Search">
                            <a class="dropdown-item" href="#">Brian Pena</a>
                            <a class="dropdown-item" href="#">Blanche Valdez</a>
                            <a class="dropdown-item" href="#">Dale Quinn</a>
                            <a class="dropdown-item" href="#">Dennis Wise</a>
                            <a class="dropdown-item" href="#">Francesca Illia</a>
                            <a class="dropdown-item" href="#">Franklin Cooper</a>
                            <a class="dropdown-item" href="#">Gregory Schmitt</a>
                        </div>
                    </div>

Section

Project Summary

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?

                    
            <div class="col-3 section">
                <div class="section-sub" id="summary">
                    <div class="section-sub-header">
                        <h4>Project Summary</h4>
                        <hr>
                    </div>
                    <p>
                        Nor again is there anyone who loves or pursues 
                        or desires to obtain pain of itself, because it 
                        is pain, but because occasionally circumstances 
                        occur in which toil and pain can procure him some 
                        great pleasure. To take a trivial example, which 
                        of us ever undertakes laborious physical exercise, 
                        except to obtain some advantage from it?
                    </p>
                </div>
            </div>

Section Group

Project Summary

Project Goals

                    
                <div class="col-3 section" style="max-height:250px;">
                    <div class="section-sub" id="project-summary">
                        <div class="section-sub-header">
                            <h4>Project Summary</h4>
                            <hr>
                        </div>
                        <p>
                            Nor again is there anyone who loves or pursues 
                            or desires to obtain pain of itself, because it 
                            is pain, but because occasionally circumstances 
                            occur in which toil and pain can procure him some 
                            great pleasure. To take a trivial example, which 
                            of us ever undertakes laborious physical exercise, 
                            except to obtain some advantage from it?
                        </p>
                    </div>  
                    <div class="section-sub" id="project-goals">
                        <div class="section-sub-header">
                            <h4>Project Goals</h4>
                            <hr>
                        </div>
                        <p>
                            Nor again is there anyone who loves or pursues 
                            or desires to obtain pain of itself, because it 
                            is pain, but because occasionally circumstances 
                            occur in which toil and pain can procure him some 
                            great pleasure. To take a trivial example, which 
                            of us ever undertakes laborious physical exercise, 
                            except to obtain some advantage from it?
                        </p>
                    </div>
                </div>

Floating Content

                    
            <div class="floating-content-container col-6">
                <img src="img/map.png">
                <div class="floating-content top-left">
                    <input class="form-control" placeholder="Search on Maps" />
                </div>
            </div>

Full Width

                    
            <div class="floating-content-container col-6">
                <img src="img/map.png">
                <div class="floating-content top-left w-100">
                    <input class="form-control" placeholder="Search on Maps" />
                </div>
            </div>

Flip Card

Learn More

Notaratum Silver

Powerful and reliable, this 13" HD laptop will not let you down. 256GB Storage, latest gen.

$399.99

Add to cart

                    
        <div class="card card-outsystems vertical flip">
            <div class="flip-front" style="background-image: url('img/os-card.png');">
              <a href="#" style="color:white;">Learn More</a>
            </div>
            <div class="flip-back">
                <h4>Notaratum Silver</h4>
                <p class="my-5">Powerful and reliable, this 13" HD laptop will not let you down. 256GB Storage, latest gen.</p>
                <p class="my-5">$399.99</p>
                <a href="#">Add to cart</a>
            </div>
        </div>

User Avatar

Default

                        
                    <span class="user-avatar">JD</span>

Small

                        
                    <span class="user-avatar user-avatar-sm">JD</span>

Medium

                        
                    <span class="user-avatar user-avatar-md">JD</span>

Light

                        
                    <span class="user-avatar user-avatar-light">JD</span>

Chat Message

Scott Richie

Hello

9:32 AM

Helen Stafford

Hello Scott!

9:32 AM

                    
        <div class="chat-msg-container">
            <div class="chat-msg chat-msg-sent">
                <span class="chat-msg-avatar">SR</span>
                <div class="chat-msg-content-container">
                    <div class="chat-msg-content">
                        <p class="chat-msg-user">Scott Richie</p>
                        <p class="chat-msg-text">Hello</p>
                    </div>
                    <p><small>9:32 AM<i class="fas fa-check ml-2"></i></small></p>
                </div>
            </div>
            <div class="chat-msg chat-msg-received">
                <div class="chat-msg-content-container">
                    <div class="chat-msg-content">
                        <p class="chat-msg-user">Helen Stafford</p>
                        <p class="chat-msg-text">Hello Scott!</p>
                    </div>
                    <p><small>9:32 AM<i class="fas fa-check ml-2"></i></small></p>
                </div>
                <span class="chat-msg-avatar">HS</span>
            </div>
        </div>

Scott Richie

Hello

9:32 AM

                    
            <div class="chat-msg-container">
                <div class="chat-msg chat-msg-sent inline">
                    <span class="chat-msg-avatar">SR</span>
                    <div class="chat-msg-content-container">
                        <div class="chat-msg-content">
                            <p class="chat-msg-user">Scott Richie</p>
                            <p class="chat-msg-text">Hello</p>
                        </div>
                        <p><small>9:32 AM<i class="fas fa-check ml-2"></i></small></p>
                    </div>
                </div>
            </div>

Blank Slate

No records have been added yet

                    
        <div class="blank-slate">
            <img src="img/blankslate.png">
            <p>No records have been added yet</p>
        </div>

Switch

Default

                        
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="customSwitch1">
                    <label class="custom-control-label" for="customSwitch1"></label>
                </div>

Disabled

                        
            <div class="custom-control custom-switch">
                <input type="checkbox" disabled class="custom-control-input" id="customSwitch2">
                <label class="custom-control-label" for="customSwitch2"></label>
            </div>

Separator

horizontal

                    
        <div class="separator-horizontal" style="width: 200px"></div>

vertical

                    
        <div class="separator-vertical" style="height: 200px; width: 200px"></div>

Text Area

Short Bio

Normal

                    
                            <div class="col-3">
                            <p>Short Bio</p>
                            <textarea class="form-control" rows="8" placeholder="Type a brief description"></textarea>
                            </div>

Short Bio

Disabled

                    
                            <div class="col-3">
                            <p>Short Bio</p>
                            <textarea class="form-control" rows="8" placeholder="Type a brief description" disabled></textarea>
                            </div>

Short Bio

Error Message

Error

                    
        <div class="col-3">
            <p>Short Bio</p>
            <textarea class="form-control error" rows="8"></textarea>
            <p><small class="error-msg"><em>Error Message</em></small></p>
        </div>

Upload

Select File

                    
                <div class="input-group">
                    <input type="file" name="uploadfile" id="uploadExample"/>
                    <label class="form-control-upload col-4" for="uploadExample">
                        <i class="fa fa-paperclip"></i>
                        <span>Select File</span>
                    </label>
                </div>

Button Loading

                    
    <button type="button" class="btn btn-primary-positive loading"><span class="spinner infinite"></span></i></button>

With Label

                    
    <button type="button" class="btn btn-primary-positive loading"<span class="spinner infinite mr-2"></span>Download</button>