Carsales UI Styleguide
UI Styleguide
2.kss-section.kss-depth-1

2Forms

Description

2.1.kss-section.kss-depth-2

2.1Inline Forms

Description

<form class="form-inline">
  <label>Name</label>
  <div class="control control-thin">
    <input type="text">
  </div>
  <label>Email</label>
  <div class="control control-thin">
    <input type="email">
  </div>
  <label class="checkbox">
    <input type="checkbox">Remember Me
  </label>
  <div class="control">
    <button>Go</button>
  </div>
</form>
2.2.kss-section.kss-depth-2

2.2Horizontal Forms

Description

<form class="form-horizontal">
  <div class="row">
    <label class="col-3">Name</label>
    <div class="control col-9">
      <input type="text">
    </div>
  </div>
  <div class="row">
    <label class="col-3">Email</label>
    <div class="control col-9">
      <input type="email">
    </div>
  </div>
  <div class="row">
    <label class="col-3">Postcode</label>
    <div class="control col-3">
      <input type="number">
    </div>
    <label class="col-3">Phone</label>
    <div class="control col-3">
      <input type="tel">
    </div>
  </div>
  <div class="row">
    <label class="col-3">Terms and conditions</label>
    <div class="control col-9">
      <label class="checkbox-inline">
        <input type="checkbox">I agree to terms and conditions
      </label>
    </div>
  </div>
  <div class="row">
    <label class="col-3">Ask a question?</label>
    <div class="control col-9">
      <label class="radio-inline">
        <input type="radio">Yes
      </label>
      <label class="radio-inline">
        <input type="radio">No
      </label>
    </div>
  </div>
  <div class="row">
    <div class="control col-9 col-offset-3">
      <button>Sign In</button>
    </div>
  </div>
</form>
2.3.kss-section.kss-depth-2

2.3Vertical Forms

Description

<form class="form-vertical">
  <label>Username</label>
  <div class="control">
    <input type="text">
  </div>
  <label>Password</label>
  <div class="control">
    <input type="password">
  </div>
  <div class="control checkbox">
    <input type="checkbox" id="remember" name="remember">
    <label for="remember">Remember Me</label>
  </div>
  <div class="control checkbox">
    <input type="checkbox" id="remember" name="remember">
    <label for="remember">Remember Me</label>
  </div>
  <div class="form-actions">
    <button>Sign In</button>
  </div>
</form>
2.4.kss-section.kss-depth-2

2.4Controls

Description

.control-thin

Small

.control-medium

Medium

.control-wide

Large

<form class="form-vertical">
  <div class="control {$modifiers}">
    <input type="text">
  </div>
</form>