UI Style Guide

iPro / Dividers


We use the <hr> tag with a class of "margin-bottom-30" when we use the hr tag throughout iPro. We try not to use "border-top" in our css to illustrate the divider betweeb elements. Dividers are very light in color and should never stand out in any layout.

Login


Example used below: <div class="dropdown-divider"></div>

<div class="row">
  <div class="col-sm-4">
	<div class="divider-form-example">
	  <form class="padding-top-15 padding-right-30 padding-left-30">
		<h3 class="margin-bottom-15">Login</h3>
		<label>Email Address:
		<input type="email" placeholder="[email protected]">
		</label>
		<label>Password:
		<input type="password" placeholder="Password">
		</label>
		<label><input type="checkbox" checked=""> Remember me</label>
		<button type="submit" class="btn btn-primary margin-top-15">Sign in</button>
	  </form>
	  <div class="dropdown-divider"></div>
	  <div class="padding-30">
		<a class="link" href="#">New around here? Sign up</a><br><br>
		<a class="link" href="#">Forgot password?</a>
	  </div>
	</div>
  </div>
</div>

Pane Title