Signed-out page

Centred signed-out card that confirms the session ended and offers to sign in again.

.signedout · .signedout__card

Web Mobile 375px

novapayoperations · admin

novapay operations console

You have signed out

Your session on this browser is closed.

If you did not sign out yourself, sign in again and tell your administrator.

Managed by

Signed-out page

<div class="signedout">
  <div class="card signedout__card">
    <div class="signedout__brand"><span class="theme-novapay vlogo"><svg class="vmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6" width="17" height="12" rx="2"/><line x1="3.5" y1="9.5" x2="20.5" y2="9.5"/><rect x="6" y="12" width="3.6" height="3" rx="0.6"/></svg><span class="wm"><span class="nm">nova</span><span class="sf">pay</span></span></span><span class="muted appsuffix">operations · admin</span></div>
    <p class="signedout__workspace"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4.5" y="3.5" width="15" height="17" rx="1.5"/><path d="M9 7.5h1m4 0h1M9 11.5h1m4 0h1M9 15.5h1m4 0h1M10.5 20.5V18h3v2.5"/></svg> novapay operations console</p>
    <h2 class="signedout__title">You have signed out</h2>
    <p class="muted signedout__lead">Your session on this browser is closed.</p>
    <div class="signedout__actions"><a class="btn btn--primary" href="sign-in-page.html">Sign in again</a></div>
    <p class="signedout__note">If you did not sign out yourself, sign in again and tell your administrator.</p>
    <div class="signedout__foot"><span class="muted">Managed by</span><span class="brandmark" role="img" aria-label="Novus Technologies"></span></div>
  </div>
</div>

Usage

Sign out always lands here, never straight on the sign-in page: people need to see that the session ended.
The title states the outcome, the lead says what closed, and there is exactly one action: Sign in again.
The security note tells people what to do if they did not sign out themselves.
The page sits on the normal white ground; only the sign-in page uses the brand ground.

CSS

These rules ship in the console pattern layer, admin-kits/shared/novus-admin.css, which this site and every Admin Kit flavor load after tokens.css. Copy the whole layer, or only the sections below; every value is a token.

@pattern signed-out

.signedout { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-7) var(--gutter); }
.signedout__card { width: 100%; max-width: 28.5rem; padding: var(--space-6); text-align: center; border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }
.signedout__brand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.signedout__workspace { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.signedout__title { margin: var(--space-4) 0 0; font-size: var(--text-2xl); line-height: var(--lh-2xl); }
.signedout__lead { margin: var(--space-2) 0 0; }
.signedout__actions { margin-top: var(--space-5); }
.signedout__actions .btn { min-height: 2.75rem; padding-inline: var(--space-5); }
.signedout__note { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.signedout__foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }

‹ Sign-in page Settings layout ›