JAR Pay - doku

Dokumentaiton

Form - Input

Preview

Text Inputt

Code

<div class="from"> <div class="form-group"> <input id="name" type="text" placeholder=" "> <label for="name">Text Inputt</label> </div> </div>

Form - Radio / Checkbox

Single Line

Preview

Monatliche Zahlung

Code

<div class="from"> <div class="form-group radio"> <input type="radio" name="radio-button" id="radio-button"> <label for="radio-button">Radio Button</label> </div> </div>

Multi Line

Preview

Klarna
25,99 EUR p.M

Code

<div class="from"> <div class="form-group radio has-icon"> <input type="radio" name="payment-method" id="klarna"> <label for="klarna"> <img src="images/icons/klarna.png" alt="klarna logo"> <span> Klarna<br> <small>25,99 EUR p.M</small> </span> </label> </div> </div>

Multi Line with info

Preview

PayPal
25,99 EUR p.M

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, est?

Code

<div class="from"> <div class="form-group radio has-icon"> <input type="radio" name="payment-method" id="paypal2"> <label for="paypal2"> <img src="images/icons/paypal.png" alt="paypal logo"> <span> PayPal<br> <small>25,99 EUR p.M</small> </span> </label> <div class="info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, est? </div> </div> </div>

Alert Boxen

Preview

Main / Primary alert box

Secondary alert box

Success alert box

Info alert box

Warning alert box

Danger alert box

Code

<div class="alert alert-primary"> <span>Main / Primary alert box</span> </div> <div class="alert alert-secondary"> <span>Secondary alert box</span> </div> <div class="alert alert-success"> <span>Success alert box</span> </div> <div class="alert alert-info"> <span>Info alert box</span> </div> <div class="alert alert-warning"> <span>Warning alert box</span> </div> <div class="alert alert-danger"> <span>Danger alert box</span> </div>

Popup

Preview

Code

<button class="btn btn-main" data-fancybox data-src="#dialog-content"> HTML element </button> <div id="dialog-content" style="display:none;"> <h3>Lorem Ipsum</h3> <p> lorem200 </p> </div>

Buttons

Preview

Main / Primary Button Secondary Button Success Button Info Button Warning Button Danger Button

Code

<a href="#" class="btn btn-primary"> <span>Main / Primary Button</span> </a> <a href="#" class="btn btn-secondary"> <span>Secondary Button</span> </a> <a href="#" class="btn btn-success"> <span>Success Button</span> </a> <a href="#" class="btn btn-info"> <span>Info Button</span> </a> <a href="#" class="btn btn-warning"> <span>Warning Button</span> </a> <a href="#" class="btn btn-danger"> <span>Danger Button</span> </a>