Login | Visma UX

This is a recurring cookie banner intentionally included on the demo page. In the banner we always allow the user to learn more
Light mode Dark mode
				
<body class="login-page login-page-secondary">
   <!-- Cookies consent notification -->
   <div class="alert alert-dismissible cookies-alert" role="alert">
      <span class="vismaicon vismaicon-filled vismaicon-info"></span>
      <p>Visma Online saves certain data to enhance the user experience. By using MyVisma you approve this. <a href="#">More info</a></p>
      <button class="btn btn-close" type="button" data-dismiss="alert" arie-label="Close">OK</button>
   </div>

   <div class="login-box">
      <div class="login-header">
         <img src="..." alt="Visma product logo">
         <h1>Visma Product</h1>
      </div>

      <div class="login-content">
         <form>
            <!-- Error alert when username/password entered are wrong -->
            <div class="alert alert-error hidden" role="alert">
               Your username/password is not correct. Please try again!
            </div>

            <div class="form-group required">
               <label for="inputUsername" class="control-label">Username</label>
               <input id="inputUsername" type="email" class="form-control" placeholder="Username">
            </div>

            <div class="form-group required">
               <label for="inputPassword" class="control-label">Password</label>
               <input id="inputPassword" type="email" class="form-control" placeholder="Password">
            </div>

            <div class="form-group">
               <button type="submit" class="btn btn-primary btn-lg">Sign in</button>
            </div>

            <div class="form-group">
               <div class="row">
                  <div class="col-7">
                     <div class="checkbox">
                        <input id="rememberUsername" type="checkbox">
                        <label for="rememberUsername">Remember username</label>
                     </div>
                  </div>
                  <div class="col-5">
                     <div class="text-right">
                        <a href="#">Forgot password?</a>
                     </div>
                  </div>
               </div>
            </div>
         </form>
      </div>

      <div class="form-group">
         <div class="login-divider">
            <hr> or continue with
         </div>
      </div>

      <div class="form-group">
         <a href="#" class="btn btn-google">
            <span class="vismaicon vismaicon-google vismaicon-sm mr-8"> </span> Sign in with Google
         </a>
      </div>
   </div>

   <div class="login-footer">
      <a href="#" class="logo-footer">Visma</a>
   </div>

   <!-- Footer section with usefull links -->
   <div class="alert login-footer-alert" role="alert">
      <ul
         <li> ... </li>
      </ul>
   </div>
</body>
Visma eAccounting
