Timeout

Used to communicate a situation where the user has remained idle for a certain amount of time. Their current session will end when the system logs them out unless they preempt the system by clicking the Continue button.

Show Timeout

Notes

Click or tap this button to see the timeout example

html

<div class="timeout">
  <div class="text center md">
    <h1>Timeout Warning</h1>
    <p>Due to inactivity, your session will end in <b>{time}</b>, and any unsaved changes will be lost. To remain logged in, please click the  <b>Continue</b> button to keep working.</p>
  </div>
  <div class="button-box">
    <button class="button color-one continue"><span class="button-label">Continue</span></button>
  </div>
</div>