Skip to content
STYLESCAPE

Auth

Examples for the ss-c-auth module, the layout of the sign-in, sign-up, password and activation pages in src/templates/stylescape/auth/. ss-c-auth fills the viewport and centres __panel; here it is shown at a fixed height.

Sign in

Stylescape Demo

Sign in

HTML 
<div class="ss-c-auth" style="min-block-size: 32rem">
            <div class="ss-c-auth__panel">
                <p class="ss-c-auth__brand"><a href="#home">Stylescape Demo</a></p>
                <h3 class="ss-c-auth__title">Sign in</h3>
                <form class="ss-c-form" action="#" method="post">
                    <div class="ss-c-form__field">
                        <label class="ss-c-form__label" for="auth-user">Username</label>
                        <input class="ss-c-input" id="auth-user" name="username" autocomplete="username" />
                    </div>
                    <div class="ss-c-form__field">
                        <label class="ss-c-form__label" for="auth-pass">Password</label>
                        <input class="ss-c-input" id="auth-pass" name="password" type="password" autocomplete="current-password" />
                    </div>
                    <div class="ss-c-form__actions">
                        <button class="ss-c-button ss-c-button--primary" type="submit">Sign in</button>
                    </div>
                </form>
                <ul class="ss-c-auth__links">
                    <li><a href="#reset">Forgot your password?</a></li>
                    <li><a href="#register">Create an account</a></li>
                </ul>
            </div>
        </div>

Status page

Account activated

Your account is ready. You can sign in now.

Sign in
HTML 
<div class="ss-c-auth" style="min-block-size: 22rem">
            <div class="ss-c-auth__panel">
                <h3 class="ss-c-auth__title">Account activated</h3>
                <p class="ss-c-auth__lead">Your account is ready. You can sign in now.</p>
                <span class="ss-c-auth__icon" aria-hidden="true">✓</span>
                <a class="ss-c-button ss-c-button--primary" href="#login">Sign in</a>
            </div>
        </div>