Verify UI
Example of the verify UI on Listers. Using the same structural UI as the Sign Up page, use the content area to accommodate verification copy and details.
Get Verified
Please click the link in the verification email we have sent to you.
Didn't receive an email link? Resend verification email.
<div class="c-hero__body">
<div class="c-hero__body-header">
...
</div>
<div class="c-hero__body-description | u-max-35">
<!-- Content ... -->
<div class="c-card-@bp2 c-card--shadow-@bp2 | o-flow | u-p-md-@bp2">
<div class="c-sub-header | t-sub-header--primary | u-mb-0">
<div class="c-sub-header__description">
<span class="c-sub-header__heading">
<h1 class="c-hero-heading u-heading u-alpha">Get Verified</h1>
</span>
<p class="c-sub-header__lead">Please click the link in the verification email we have sent to you.</p> <p>Didn't receive an email link? <a class="#1">Resend verification email</a>.</p>
</div>
</div>
</div>
</div>
</div>Verified
Example of the verified page after clicking the email link.
Complete Your Sign Up
Thank you for verifying your account and primary communication method. You can change this in your account settings at any time.
A few more details
Before we log you in, we need a few more details to complete your Sign Up.
<div class="c-hero__body">
...
<div class="c-hero__body-description | u-max-35">
<div class="c-card-@bp2 c-card--shadow-@bp2 | o-flow | u-p-md-@bp2">
<div class="c-sub-header | t-sub-header--primary | u-mb-0">
<div class="c-sub-header__description | o-flow">
<span class="c-sub-header__heading">
<h1 class="c-hero-heading u-heading u-beta">Complete Your Sign Up</h1>
</span>
<p class="c-sub-header__lead">Thank you for verifying your account and primary communication method. You can change this in your account settings at any time.</p>
</div>
</div>
<div class="o-flow">
<h2 class="u-heading u-epsilon u-fw-500">A few more details</h2>
<p>Before we log you in, we need a few more details to complete your Sign Up.</p>
<form class="o-grid">
<div class="o-grid__item | u-w-8-@bp2">
<label class="c-label | u-w-100%" for="title">
<span class="c-label__text | u-zeta">Title</span>
<span class="c-label__input">
<select class="c-input c-input--select" id="title" required>
<option selected disabled>Select</option>
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="ms">Ms</option>
<option value="mx">Mx</option>
<option value="dr">Dr</option>
<option value="sir">Sir</option>
<option value="madam">Madam</option>
</select>
</span>
</label>
</div>
<div class="o-grid__item | u-col-12 u-flex u-flex-fill-@bp2">
<label class="c-label | u-w-100%" for="given_name">
<span class="c-label__text | u-zeta">Given Name</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="given_name" required>
</span>
</label>
</div>
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="middle_name">
<span class="c-label__text | u-zeta">
<span class="o-split">
<span class="o-split__title">Middle Name</span>
<span class="u-muted:50%">Optional</span>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="middle_name">
</span>
</label>
</div>
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="family_name">
<span class="c-label__text | u-zeta">Family Name</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="family_name" type="text" required>
</span>
</label>
</div>
<div class="o-grid__item | u-col-12">
<a class="c-btn c-btn--positive c-btn--lg" href="/web/session/">Continue</a>
</div>
</form>
</div>
</div>
</div>
</div>