Processing Your Request




                
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Framework Demo</title>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" href="css/grid.css">
        <link rel="stylesheet" href="css/custom.css">

            <link rel="stylesheet" href="css/copyStuff.css">

        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

  <!--[if IE ]>
  <link href="assets/css/IE.css" rel="stylesheet" type="text/css">
  <![endif]-->
</head>

<body>
    
        <!-- Nav Here    -->
    
        <div class="container">

             <!-- Main Content Here    -->

        </div>

        <footer>
            <a href="#top"><div class="arrowWrapper">TOP</div></a>
            &copy; <span id="spanYear"></span> Value Payment Systems. All rights Reserved
        </footer><br><br>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<script src="js/materialize.min.js"></script> 
<script src="js/framework.js"></script>


</body>

</html>
                
            
                
    <ul id="dropdown1" class="dropdown-content navDropdown">
      <li><a href="#!" class="sidenav-close">One</a></li>
      <li><a href="#!" class="sidenav-close">Two</a></li>
      <li><a href="#tabs" class="sidenav-close">Three</a></li>
      <li><a href="#tabs" class="sidenav-close">Four</a></li>
      <li><a href="#tabs" class="sidenav-close">Super Much Longer Name</a></li>
    </ul>

    <ul id="dropdown2" class="dropdown-content sidenavDropdown">
      <li><a href="#!" class="sidenav-close">One</a></li>
      <li><a href="#!" class="sidenav-close">Two</a></li>
      <li><a href="#tabs" class="sidenav-close">Three</a></li>
      <li><a href="#tabs" class="sidenav-close">Four</a></li>
      <li><a href="#tabs" class="sidenav-close">Super Much Longer Name Wrap</a></li>
    </ul>
    
<nav>
  <div class="nav-wrapper" id="top">
    <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large left mobileHide"><i class="material-icons">content_copy</i></a>
    <a href="#" class="brand-logo">Framework Demo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>

    <ul class="right hide-on-med-and-down">
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
      <li><a href="#!">First Link</a></li>
      <li><a href="#!">Second Link</a></li>
      <li><a href="#tabs">Third Link</a></li>
    </ul>
  </div>
</nav>    
    
  <ul class="sidenav" id="mobile-demo">
    <li><a class="waves-effect sidenav-close" href="#!">First Link</a></li>
    <li><a class="waves-effect sidenav-close" href="#!">Second Link</a></li>
    <li><a class="waves-effect sidenav-close" href="#tabs">Third Link</a></li>
    <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
  </ul>    
    
    <br><br>
                
            
                
                <div class="row">
                <div class="input-field col-sm-6">
                  <input id="first_name" type="text" class="validate">
                  <label for="first_name"><b><i class="material-icons">person</i>First Name<span class="asterix">*</span></b></label>
                </div>
                <div class="input-field col-sm-6">
                  <input id="last_name" type="text" class="validate">
                  <label for="last_name"><b><i class="material-icons">person</i>Last Name<span class="asterix">*</span></b></label>
                </div>
            </div>
                
            
                
            <div class="row">
                <div class="input-field col-sm-6">
                  <input id="SSN" type="number" data-length="9" max="9" class="validate socialInput">
                  <label for="SSN"><b><i class="material-icons">account_box</i>Social Security Number<span class="asterix">*</span></b></label>
                </div>
                <div class="input-field col-sm-6">
                  <input id="SSNconfirm" type="number" max="9" class="validate socialInput">
                  <label for="SSN"><b><i class="material-icons">account_box</i>Confirm Social Security Number<span class="asterix">*</span></b></label>
                </div>
            </div>  
                
            
                
            <div class="row">
                <div class="input-field col-sm-6">
                  <input id="first_name" type="text" class="validate">
                  <label for="first_name"><b><i class="material-icons">location_on</i>Address<span class="asterix">*</span></b></label>
                </div>
                <div class="input-field col-sm-6">
                  <input id="last_name" type="text" class="validate">
                  <label for="last_name"><b><i class="material-icons">location_on</i>Address Continued</b></label>
                </div>
            </div>
            
            <div class="row">
                <div class="input-field col-sm-5">
                  <input  id="city" type="email" class="validate">
                  <label for="city"><b><i class="material-icons">location_on</i>City<span class="asterix">*</span></b></label>
                </div>
                
                <div class="input-field col-sm-4 stateSelect phonePad">
                    <select style="cursor:pointer;" id="state">
                        <option value="" selected>Please Select</option>
                                    <option value="AL">Alabama</option> 
                                    <option value="AK">Alaska</option> 
                                    <option value="AZ">Arizona</option> 
                                    <option value="AR">Arkansas</option> 
                                    <option value="CA">California</option> 
                                    <option value="CO">Colorado</option> 
                                    <option value="CT">Connecticut</option> 
                                    <option value="DE">Delaware</option> 
                                    <option value="DC">District Of Columbia</option> 
                                    <option value="FL">Florida</option> 
                                    <option value="GA">Georgia</option> 
                                    <option value="HI">Hawaii</option> 
                                    <option value="ID">Idaho</option> 
                                    <option value="IL">Illinois</option> 
                                    <option value="IN">Indiana</option> 
                                    <option value="IA">Iowa</option> 
                                    <option value="KS">Kansas</option> 
                                    <option value="KY">Kentucky</option> 
                                    <option value="LA">Louisiana</option> 
                                    <option value="ME">Maine</option> 
                                    <option value="MD">Maryland</option> 
                                    <option value="MA">Massachusetts</option> 
                                    <option value="MI">Michigan</option> 
                                    <option value="MN">Minnesota</option> 
                                    <option value="MS">Mississippi</option> 
                                    <option value="MO">Missouri</option> 
                                    <option value="MT">Montana</option> 
                                    <option value="NE">Nebraska</option> 
                                    <option value="NV">Nevada</option> 
                                    <option value="NH">New Hampshire</option> 
                                    <option value="NJ">New Jersey</option> 
                                    <option value="NM">New Mexico</option> 
                                    <option value="NY">New York</option> 
                                    <option value="NC">North Carolina</option> 
                                    <option value="ND">North Dakota</option> 
                                    <option value="OH">Ohio</option> 
                                    <option value="OK">Oklahoma</option> 
                                    <option value="OR">Oregon</option> 
                                    <option value="PA">Pennsylvania</option> 
                                    <option value="RI">Rhode Island</option> 
                                    <option value="SC">South Carolina</option> 
                                    <option value="SD">South Dakota</option> 
                                    <option value="TN">Tennessee</option> 
                                    <option value="TX">Texas</option> 
                                    <option value="UT">Utah</option> 
                                    <option value="VT">Vermont</option> 
                                    <option value="VA">Virginia</option> 
                                    <option value="WA">Washington</option> 
                                    <option value="WV">West Virginia</option> 
                                    <option value="WI">Wisconsin</option> 
                                    <option value="WY">Wyoming</option>
                    </select>
                    <label class="selectLabel statelabel" for="state"><b><i class="material-icons">location_on</i>State<span class="asterix">*</span></b></label>
                </div>
                
                <div class="input-field col-sm-3">
                  <input  id="zip" type="number" class="validate">
                  <label for="zip"><b><i class="material-icons">location_on</i>Zip<span class="asterix">*</span></b></label>
                </div>
            </div>
            
            
                
    <div class="row">
        
        <div class="input-field col-sm-3 enterAmount">  
          <input id="paymentAmount" type="text" class="validate">
          <label for="paymentAmount" class=""><b><i class="material-icons" style="margin-right:0px;">attach_money</i>Payment Amount<span class="asterix">*</span></b></label>
        </div> 
        
        <div class="input-field col-sm-4 methodSelect">  
            <select class="cardSelect select12" id="methodSelect" style="cursor:pointer;">
                <option value="" selected class="pleaseSelect">Please Select</option>
                <option value="Credit" class="credit">Credit</option>
                <option value="Debit" class="debit">Debit</option>
                <option value="eCheck" class="echeck">eCheck</option>
            </select>
            <label class="selectLabel methodLabel" for="methodSelect"><b><i class="material-icons">credit_card</i>Payment Method<span class="asterix">*</span></b></label>
        </div>
        <div class="input-field col-sm-5 cardWrapper">
            <div class="payLogoWrapper">
                <img src="img/amexLogo.svg" class="amexCreditLogo" alt="amex logo" style="padding-top:3px;width:40px;margin-right:7px;margin-bottom:3px;">
                <img src="img/visaLogo.svg" class="visaCreditLogo" alt="visa logo" style="padding-top:3px;width:60px;margin-right:7px;margin-bottom:3px;">
                <img src="img/mastercardLogo.svg" class="masterCreditLogo" alt="mastercard log" style="padding-top:3px;width:45px;margin-right:7px;margin-bottom:3px;">
                <img src="img/discover.svg" class="discoverCreditLogo" alt="discover logo" style="padding-top:3px;width:50px;margin-right:7px;margin-bottom:3px;">
                <img src="img/eCheck.svg" class="echeckLogo" alt="echeck logo" style="padding-top:3px;width:55px;margin-left:5px;margin-bottom:3px;">
            </div>
        </div>
    </div> 
            
    <br>
            
    <!-- Credit and debit inputs -->
    <div class="cardInfo">          
        <div class="row">
            <div class="input-field col-sm-6">
              <input id="holderName" type="text" data-length="9" class="validate">
              <label for="holderName"><b><i class="material-icons">credit_card</i>Cardholder Name<span class="asterix">*</span></b></label>
            </div>
            <div class="input-field col-sm-6">
              <input id="cardNumber" type="number" class="validate socialInput">
              <label for="cardNumber"><b><i class="material-icons">credit_card</i>Card Number<span class="asterix">*</span></b></label>
            </div>
        </div>             

        <div class="row">
            <div class="input-field col-sm-4 phonePad monthSelect">
                <select id="month">
                    <option value="" disabled selected>Please Select Month</option>
                    <option value="January">January</option>
                    <option value="February">February</option>
                    <option value="March">March</option>
                    <option value="April">April</option>
                    <option value="May">May</option>
                    <option value="June">June</option>
                    <option value="July">July</option>
                    <option value="August">August</option>
                    <option value="September">September</option>
                    <option value="October">October</option>
                    <option value="November">November</option>
                    <option value="December">December</option>
                </select>
                <label class="selectLabel monthLabel" for="month"><b><i class="material-icons">credit_card</i>Expiration Month<span class="asterix">*</span></b></label>
            </div>
            <div class="input-field col-sm-4 phonePad yearSelect">
                <select style="cursor:pointer;" id="year">
                    <option value="" disabled selected>Please Select Year</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2019">2021</option>
                    <option value="2020">2022</option>
                    <option value="2019">2023</option>
                    <option value="2020">2024</option>
                    <option value="2019">2025</option>
                    <option value="2020">2026</option>
                </select>
                <label class="selectLabel yearLabel" for="year"><b><i class="material-icons">credit_card</i>Expiration Year<span class="asterix">*</span></b></label>
            </div>
            <div class="input-field col-sm-4">
              <input id="cvv" type="number" class="validate">
              <label for="cvv"><b><i class="material-icons">credit_card</i>CVV<span class="asterix">*</span></b></label>
            </div>
        </div>
        <a class="modal-trigger right cvvTrigger" href="#modal1">What is CVV?</a>
    </div>
            
        <!-- eCheck inputs -->
        <div class="checkInfo">
            <div class="row">
                <div class="input-field col-sm-6 padBelow checkTypeSelect">
                    <select style="cursor:pointer;" id="accountType">
                        <option value="" disabled selected class="">Please Select Account Type</option>
                        <option value="Personal Checking">Personal Checking</option>
                        <option value="Business Checking">Business Checking</option>
                        <option value="Savings">Savings</option>
                    </select>
                    <label class="selectLabel checkTypeLabel" for="accountType"><b><i class="material-icons">account_balance</i>Check Type<span class="asterix">*</span></b></label>
                </div>
                <div class="input-field col-sm-6">
                  <input id="routing" type="number" class="validate socialInput">
                  <label for="routing"><b><i class="material-icons">account_balance</i>Bank Routing Number<span class="asterix">*</span></b></label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col-sm-6">
                  <input id="account" type="number" data-length="9" class="validate">
                  <label for="account"><b><i class="material-icons">account_balance</i>Account Number<span class="asterix">*</span></b></label>
                </div>
                <div class="input-field col-sm-6">
                  <input id="confirmAccount" type="number" class="validate socialInput">
                  <label for="confirmAccount"><b><i class="material-icons">account_balance</i>Confirm Account Number<span class="asterix">*</span></b></label>
                </div>
            </div>
        </div>
            
          <!-- Modal -->
          <div id="modal1" class="modal">
            <div class="modal-header">
                <div class="right"><a href="#!" class="modal-close gray"><i class="material-icons">close</i></a></div>
            </div>
            <div class="modal-content">
                <img src="img/cvv.svg" alt="VPS logo" style="min-height:100px;max-height:500px;"/>
            </div>
            <div class="modal-footer">
              <a href="#!" class="modal-close waves-effect waves-blue btn">Close</a>
            </div>
          </div>
            
            
<!--           Digital Wallets -->

                <p class="checkOutLabel" style="color:#8d8d8d;"><b>Or checkout with:</b></p>
                <div class="walletWrapper">
                    <a class="amexMove allWalletLogos" data-toggle="modal" data-target="#amexMoveModal"><img src="img/AmexMoveLogocopy.png" alt="Amex Express logo" style="padding-top:0px;width:150px;"></a>
                    <a class="amexLogo allWalletLogos"><img src="img/amexCheckout.png" alt="Amex Express logo" style="padding-top:0px;width:150px;padding-bottom:0px!important;"></a>
                    <a class="paypalLogo allWalletLogos"><img src="img/paypalbutton.png" alt="PayPal logo" style="padding-top:0px;width:160px;"></a>
                    <a class="visaLogo allWalletLogos" ><img src="img/visabutton.png" alt="Visa Checkout logo" style="padding-top:0px;width:155px;"></a>
                    <a class="masterpassLogo allWalletLogos"><img src="img/masterpassbutton.png" alt="MasterPass logo" style="padding-top:0px;width:140px;"></a>
                </div>                
            
                
            <div class="row">
                <div class="col-md-4 phonePad"> 
                    <p>
                      <label style="margin-left:0px;color:#666666;">
                        <input type="checkbox" class="filled-in" checked="checked" /><span>Checkbox Checked</span>
                      </label>
                    </p>

                    <p>
                      <label style="margin-left:0px;color:#666666;">
                        <input type="checkbox" class="filled-in"/><span>Checkbox Unchecked</span>
                      </label>
                    </p>                     
                    
                </div>
            </div>
                
            
                
            <div class="row">
                <div class="col-md-4"> 
                    <p>
                      <label style="margin-left:0px;color:#666666;position:relative;right:2px;">
                        <input name="group1" type="radio" checked/>
                        <span>Selected</span>
                      </label>
                    </p>
                    <p>
                      <label style="margin-left:0px;color:#666666;position:relative;right:2px;">
                        <input name="group1" type="radio"/>
                        <span>Not Selected</span>
                      </label>
                    </p> 
                </div>
            </div> 
                
            
                
         <div class="row">
            <div class="col-md-6" style="padding-right:5px;">
                <h5 class="blue none"><strong>Accordian</strong></h5>
                 <ul class="collapsible">
                    <li>
                      <div class="collapsible-header whiteText accordHover"><i class="material-icons">filter_drama</i>First</div>
                      <div class="collapsible-body"><span>Add "active" class to the li tag to have one of the expandable items pre expanded.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
                    </li>
                    <li>
                      <div class="collapsible-header whiteText accordHover"><i class="material-icons">place</i>Second</div>
                      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
                    </li>
                    <li>
                      <div class="collapsible-header whiteText accordHover"><i class="material-icons">whatshot</i>Third</div>
                      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
                    </li>
                  </ul>
             </div>
         </div>
                
            
                
          <a class="waves-effect waves-light btn modal-trigger" href="#modal2">Open Modal</a>

          <!-- Modal Structure -->
          <div id="modal2" class="modal">
            <div class="modal-header">
                <div class="right"><a href="#!" class="modal-close gray"><i class="material-icons">close</i></a></div>
            </div>
            <div class="modal-content">
              <h4>Modal Header</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="modal-footer">
              <a href="#!" class="modal-close waves-effect waves-blue btn" style="margin-right:20px;">Close</a>
            </div>
          </div>
                
            
                
        <div class="row">
            <div class="col-md-6">
              <ul class="tabs">
                <li class="tab"><a href="#test1">Tab 1</a></li>
                <li class="tab"><a href="#test2">Tab 2</a></li>
                <li class="tab"><a href="#test3">Tab 3</a></li>
                <li class="tab"><a href="#test4" class="active">Tab 4</a></li>
              </ul>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-8">
                <div id="test1"><b class="blue">Tab 1</b><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                <div id="test2"><b class="blue">Tab 2</b><br><br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                <div id="test3"><b class="blue">Tab 3</b><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                <div id="test4"><b class="blue">Tab 4</b><br><br>Add class="active" to the tab's a tag to preselect a certain tab.<br>Dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
        </div>
         
         <br><br>
                
            
                
    <section class="row center stepWrapper fourSteps">
        <div class="col-xs-3 step1">
            <img src="img/arrows/foursteps/desktop/step1Arrow.svg" class="img-responsive" alt="Step one icon, Select Service">
        </div>
        <div class="col-xs-3 step2">
            <img src="img/arrows/foursteps/desktop/step2Square.svg" class="img-responsive" alt="Step two icon, Payment Details">
        </div>
        <div class="col-xs-3 step3">
            <img src="img/arrows/foursteps/desktop/step3Square.svg" class="img-responsive" alt="Step three icon, Review Information">
        </div>
        <div class="col-xs-3 step4">
            <img src="img/arrows/foursteps/desktop/step4Square.svg" class="img-responsive" alt="Step four icon, Payment Receipt">
        </div>
    </section>
    
    <br><br><br>
                
            
                
    <section class="row center stepWrapper threeSteps">
        <div class="col-xs-4 step1">
            <img src="img/arrows/threesteps/desktop/step1Arrow.svg" class="img-responsive" alt="Step one icon, Payment Details">
        </div>
        <div class="col-xs-4 step2">
            <img src="img/arrows/threesteps/desktop/step2Square.svg" class="img-responsive" alt="Step two icon, Review Information">
        </div>
        <div class="col-xs-4 step3">
            <img src="img/arrows/threesteps/desktop/step3Square.svg" class="img-responsive" alt="Step three icon, Payment Receipt">
        </div>
    </section>
    
        <br><br><br>
                
            
                
holder


VPS logo
mode_edit

Main Content Container

Container is set at width: 70% (max-width: 1280px) on desktop and width: 90% on tablet and phone sizes




Color Palette

#514585
Primary Logo Color

#7b6fb2

#a396c9

#66c082
Primary Logo Color

#85c992

#a7d6a7

#f99b1e
Highlight Color

#fcb24e

#fec87d




Button Color Palette

#4c7197
Primary Button Color

#4a5a6c
Button Hover Color




Add a class for a background color
.VPSpurpleBack
.VPSpurpleLightMedBack
.VPSpurpleLightBack

.VPSgreenBack
.VPSgreenLightMedBack
.VPSgreenLightBack

.VPSorangeBack
.VPSorangeLightMedBack
.VPSorangeLightBack

.blueBack
.darkBlueBack

Code Example: <div class="VPSorangeLightBack">



Add a class for text color

.VPSpurple

.VPSpurpleLightMedium

.VPSpurpleLight


.VPSgreen

.VPSgreenLightMedium

.VPSgreenLight


.VPSorange

.VPSorangeLightMedium

.VPSorangeLight


.blue

.darkBlue


Code Example: <p class="VPSpurple">



Font: Roboto

h1 headline
(font-size: 4rem;)

h2 headline (font-size: 3.5rem;)

h3 headline (font-size: 3rem;)

h4 headline (font-size: 2.25rem;)

h5 headline (font-size: 1.5rem;)
h6 headline (font-size: 1rem;)


Body Copy (font-size: 15px;)

This is body copy. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Form Elements

What is CVV?

Or checkout with:

Amex Express logo
Date Picker

Checkboxes

Radio Buttons



Buttons
Continue printPrint Receipt
Default Button Back Disabled


Accordian
  • filter_dramaFirst
    Add "active" class to the li tag to have one of the expandable items pre expanded.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • placeSecond
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • whatshotThird
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Modal
Open Modal

Tabs

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tab 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tab 4

Add class="active" to the tab's a tag to preselect a certain tab.
Dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Tooltip
Click here to toggle the popup. Place tooltip info text here.



Loader



Cards
Avatar
John Doe

Architect & Engineer


Avatar
Jane Doe

Architect & Engineer





Line

Code Example: <div class="line"></div>






Four Steps
Step one icon, Select Service
Step two icon, Payment Details
Step three icon, Review Information
Step four icon, Payment Receipt



Three Steps
Step one icon, Payment Details
Step two icon, Review Information
Step three icon, Payment Receipt