Sign In

Best Practices

• MyLa should be used to sign users into your application. If not, use this form.
• Put the form into a column to size as necessary.
• Change the heading level when appropriate.

Usage

<div class="card mb-6">
  <div class="card-body">
    <div class="row">
    <div class="col-12">
      <h3 class="form-title">
      <span class="icon fas fa-sign-in-alt fa-fw text-primary-10 me-1" aria-hidden="true"></span>Sign In
      </h3>
    </div>
    </div>
    <div class="row">
    <div class="col-12">
      <div class="form-group">
      <label for="SignInUsername" class="label">User ID</label>
      <input class="form-control" id="SignInUsername" type="text">
      </div>
    </div>
    <div class="col-12">
      <div class="form-group">
      <label for="SignInPassword" class="label">Password</label>
      <input class="form-control" id="SignInPassword" type="password">
      <div class="custom-control custom-switch form-check form-switch mt-2">
        <input type="checkbox" class="custom-control-input form-check-input" id="SignInShowPassword">
        <label class="custom-control-label form-check-label" for="SignInShowPassword">Show Password</label>
      </div>
      </div>
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-primary">
        <span class="icon fas fa-sign-in-alt me-1" aria-hidden="true"></span>Sign In
      </button>
    </div>
    </div>
  </div>
</div>
<div class="card mb-0">
  <div class="card-body">
    <p class="mb-0">Don&rsquo;t have an account? <br class="d-block d-lg-none">
    <a href="#" title="Go to MyLa to create a login account.">Create your own MyLa Account.</a>
    </p>
  </div>
</div>
<div class="p-4">
  <p class="mb-0">Need help? <br class="d-block d-lg-none">
    <a href="#" title="Get help for sign in problems.">Get help signing in.</a>
  </p>
</div>