Authentication Form Layouts
Component #1
Log in
Don't have an account yet? Sign up here
<!-- Content -->
<div class="bg-soft-success">
<div class="container content-space-1 content-space-t-md-3">
<div class="mx-auto" style="max-width: 30rem;">
<!-- Card -->
<div class="card card-lg zi-2">
<!-- Header -->
<div class="card-header text-center">
<h4 class="card-title">Log in</h4>
<p class="card-text">Don't have an account yet? <a class="link" href="../page-signup.html">Sign up here</a></p>
</div>
<!-- End Header -->
<!-- Card Body -->
<div class="card-body">
<form class="js-validate need-validate" novalidate>
<div class="d-grid">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Log in with Google
</span>
</a>
</div>
<span class="divider-center my-4">OR</span>
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="loginFormEmail">Your email</label>
<input type="email" class="form-control" name="loginFormEmailName" id="loginFormEmail" placeholder="[email protected]" aria-label="[email protected]" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="loginFormPassword">Password</label>
<a class="form-label-link" href="../page-reset-password.html">Forgot Password?</a>
</div>
<div class="input-group input-group-merge">
<input type="password" class="js-toggle-password form-control" name="loginFormPasswordName" id="loginFormPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
data-hs-toggle-password-options='{
"target": "#loginFormChangePassTarget",
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#changePassIcon"
}'>
<a id="loginFormChangePassTarget" class="input-group-append input-group-text" href="javascript:;">
<i id="changePassIcon" class="bi-eye"></i>
</a>
</div>
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
</div>
<!-- End Form -->
<!-- Checkbox -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="loginFormRememberMeCheck" name="loginFormRememberMeCheck">
<label class="form-check-label" for="loginFormRememberMeCheck"> Remember me</label>
</div>
<!-- End Checkbox -->
<div class="d-grid mb-4">
<button type="submit" class="btn btn-primary btn-lg">Log in</button>
</div>
</form>
</div>
<!-- End Card Body -->
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Content -->
<!-- Shape -->
<div class="shape-container">
<div class="shape shape-bottom zi-1">
<svg viewBox="0 0 3000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1000V583.723L3000 0V1000H0Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF TOGGLE PASSWORD
// =======================================================
new HSTogglePassword('.js-toggle-password')
})()
</script>
Component #2
Create your account
Already have an account? Log in here
<!-- Content -->
<div class="bg-soft-success">
<div class="container content-space-1 content-space-t-md-3">
<div class="mx-auto" style="max-width: 30rem;">
<!-- Card -->
<div class="card card-lg zi-2">
<!-- Header -->
<div class="card-header text-center">
<h4 class="card-title">Create your account</h4>
<p class="card-text">Already have an account? <a class="link" href="../page-login.html">Log in here</a></p>
</div>
<!-- End Header -->
<!-- Card Body -->
<div class="card-body">
<form class="js-validate need-validate" novalidate>
<div class="d-grid">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Sign up with Google
</span>
</a>
</div>
<span class="divider-center my-4">OR</span>
<div class="row">
<div class="col-sm-6 mb-4 mb-sm-0">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupFormFirstName">First name</label>
<input type="text" class="form-control" name="signupFormFirstName" id="signupFormFirstName" placeholder="Jacob" aria-label="Jacob" required>
<span class="invalid-feedback">Please enter your first name.</span>
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupFormLasttName">Last name</label>
<input type="text" class="form-control" name="signupFormLastName" id="signupFormLasttName" placeholder="Williams" aria-label="Williams" required>
<span class="invalid-feedback">Please enter your last name.</span>
</div>
<!-- End Form -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupFormEmail">Your email</label>
<input type="email" class="form-control" name="signupFormEmailName" id="signupFormEmail" placeholder="[email protected]" aria-label="[email protected]" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupFormPassword">Password</label>
<div class="input-group input-group-merge">
<input type="password" class="js-toggle-password form-control" name="signupFormPassword" id="signupFormPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
data-hs-toggle-password-options='{
"target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": ".js-toggle-passowrd-show-icon-1"
}'>
<a class="js-toggle-password-target-1 input-group-append input-group-text" href="javascript:;">
<i class="js-toggle-passowrd-show-icon-1 bi-eye"></i>
</a>
</div>
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupFormConfirmPassword">Confirm password</label>
<div class="input-group input-group-merge">
<input type="password" class="js-toggle-password form-control" name="signupFormPassword" id="signupFormConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" data-hs-validation-equal-field="#signupFormPassword" required
data-hs-toggle-password-options='{
"target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": ".js-toggle-passowrd-show-icon-2"
}'>
<a class="js-toggle-password-target-2 input-group-append input-group-text" href="javascript:;">
<i class="js-toggle-passowrd-show-icon-2 bi-eye"></i>
</a>
</div>
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<!-- Checkbox -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="signupFormTermsCheck" name="signupFormTermsCheck" required>
<label class="form-check-label" for="signupFormTermsCheck"> I accept the <a href=../page-terms.html>Terms and Conditions</a></label>
<span class="invalid-feedback">Please accept our Terms and Conditions.</span>
</div>
<!-- End Checkbox -->
<div class="d-grid mb-4">
<button type="submit" class="btn btn-primary btn-lg">Sign up</button>
</div>
<div class="text-center">
<a class="btn btn-link" href="../page-login.html">or Start your 30-day trial <i class="bi-chevron-right small ms-1"></i></a>
</div>
</form>
</div>
<!-- End Card Body -->
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Content -->
<!-- Shape -->
<div class="shape-container">
<div class="shape shape-bottom zi-1">
<svg viewBox="0 0 3000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1000V583.723L3000 0V1000H0Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF TOGGLE PASSWORD
// =======================================================
new HSTogglePassword('.js-toggle-password')
})()
</script>
Component #3
Forgot password?
Enter the email address you used when you joined and we'll send you instructions to reset your password.
<!-- Content -->
<div class="bg-soft-success">
<div class="container content-space-1 content-space-t-md-3">
<div class="mx-auto" style="max-width: 30rem;">
<!-- Card -->
<div class="card card-lg zi-2">
<!-- Header -->
<div class="card-header text-center">
<h4 class="card-title">Forgot password?</h4>
<p class="card-text">Enter the email address you used when you joined and we'll send you instructions to reset your password.</p>
</div>
<!-- End Header -->
<!-- Card Body -->
<div class="card-body">
<form class="js-validate need-validate" novalidate>
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="forgotPasswordFormEmail">Your email</label>
<input type="email" class="form-control" name="forgotPasswordEmailName" id="forgotPasswordFormEmail" placeholder="Enter your emaill address" aria-label="Enter your emaill address" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-4">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
<div class="text-center">
<a class="btn btn-link" href="../page-login.html">
<i class="bi-chevron-left small me-1"></i> Back to log in
</a>
</div>
</form>
</div>
<!-- End Card Body -->
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Content -->
<!-- Shape -->
<div class="shape-container">
<div class="shape shape-bottom zi-1">
<svg viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 600V350.234L3000 0V600H0Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape -->