Sign In | Crossroads Digital Design Kit

Sign In Example

Below you can see the layout for the standard sign-in form on crossroads.net and it's related properties. Implementation details for the form (submission and validation) are not included here; any related business logic should be handled by the application in which it is implemented.

For a working example in NG2, look at crds-embed's authentication component. For an example in NG1.5 see crds-angular login form template and controller.

<header class="page-header">
  <h2>Sign In</h2>
</header>
<form novalidate="">
  <div class="form-group">
    <label class="sr-only" for="email">Email</label>
    <input class="form-control" name="email" placeholder="Email" autocomplete="off" type="email">
  </div>

  <div class="form-group">
    <label class="sr-only" for="password">Password</label>
    <input class="form-control" name="password" placeholder="Password" autocomplete="off" type="password">
  </div>

  <div class="row">
    <div class="col-sm-12">
      <p class="pull-right text-left text-block">
        <a href="#" target="_blank">Forgot password?</a><br>
        <a href="#" target="_blank">Need help?</a>
      </p>
    </div>
  </div>

  <hr>

  <p class="text-block">Or <a href="#">register for an account</a></p>
  <footer class="clearfix">
    <input class="btn btn-primary pull-right" value="Sign In" type="submit">
  </footer>
</form>