Log In Form

By Rafi

form login

How do I use This?

A simple log in form that can be added inside grid columns, modals, dropdown panes, or other UI components.

HTML

<form class="log-in-form">
  <h4 class="text-center">Log in with you email account</h4>
  <label>Email
    <input type="email" placeholder="somebody@example.com">
  </label>
  <label>Password
    <input type="password" placeholder="Password">
  </label>
  <input id="show-password" type="checkbox"><label for="show-password">Show password</label>
  <p><input type="submit" class="button expanded" value="Log in"></input></p>
  <p class="text-center"><a href="#">Forgot your password?</a></p>
</form>

.log-in-form {
  border: 1px solid $medium-gray;
  padding: $form-spacing;
  border-radius: $global-radius;
}

.log-in-form {
  border: 1px solid #cacaca;
  padding: 1rem;
  border-radius: 0;
}

Log In Form

By Rafi

Multi-step checkout form

Form Input with Show Password

Simple Subscription Form

Log In Form

By Rafi

Similar Building Blocks

Multi-step checkout form

Form Input with Show Password

Simple Subscription Form