Dependencies
This layout uses the following components as 'atoms' to create the full UI.
Extends: Layouts: Uses: Components:Sign Up UI
Example of the Sign Up UI on Listers.
<div class="c-hero c-hero--horizontal c-hero--overlay c-hero--mylisters">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/content/sign-up/half_hero--mobile.avif" media="(max-width: 414px)" type="image/avif">
<source srcset="/assets/img/content/sign-up/half_hero--mobile-lg.avif" media="(min-width: 415px) and (max-width: 582px)" type="image/avif">
<source srcset="/assets/img/content/sign-up/half_hero--tablet.avif" media="(min-width: 582px) and (max-width: 834px)" type="image/avif">
<source srcset="/assets/img/content/sign-up/half_hero--tablet-lg.avif" media="(min-width: 835px) and (max-width: 1024px)" type="image/avif">
<source srcset="/assets/img/content/sign-up/half_hero--laptop.avif" media="(min-width: 1024px) and (max-width: 1264px)" type="image/avif">
<source srcset="/assets/img/content/sign-up/half_hero--desktop.avif" media="(min-width: 1265px)" type="image/avif">
<img class="c-hero__img c-img | o-fit" src="/assets/img/content/sign-up/half_hero--mobile.avif" width="800" height="1024" alt>
</picture>
</div>
<div class="c-hero__media-body">
<div class="c-hero__media-content">
<a class="c-logo c-logo--white | u-w-5 u-my" href="/web/">
<span class="u-hidden">Listers</span>
<svg class="c-logo__img | u-w-100%" width="72" height="21" viewBox="0 0 185 56" aria-hidden="true">
<g class="c-logo__type" id="type_paths">
<path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
<path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
<path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
<path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
<path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
<path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
<path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
</g>
<g class="c-logo__swoosh" id="swoosh">
<path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
</g>
</svg>
</a>
</div>
</div>
<div class="c-hero__body">
<div class="c-hero__body-header">
<a class="c-logo | u-w-5 u-my" href="/web/">
<span class="u-hidden">Listers</span>
<svg class="c-logo__img | u-w-100%" width="72" height="21" viewBox="0 0 185 56" aria-hidden="true">
<g class="c-logo__type" id="type_paths">
<path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
<path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
<path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
<path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
<path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
<path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
<path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
</g>
<g class="c-logo__swoosh" id="swoosh">
<path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
</g>
</svg>
</a>
</div>
<div class="c-hero__body-description | u-max-30">
<div class="o-flow">
<div class="c-sub-header | t-sub-header--primary | u-mb-lg">
<div class="c-sub-header__description">
<span class="c-sub-header__heading">
<h1 class="c-hero-heading u-heading u-alpha">Sign Up</h1>
</span>
</div>
</div>
<form class="o-grid">
<label class="c-label | o-grid__item | u-col-12" for="email">
<span class="c-label__text | u-epsilon">Email</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="email" type="email" name="email" autocomplete="username" required>
</span>
</label>
<label class="c-label | o-grid__item | u-col-12" for="new-password" x-data="show_password($refs.input, $refs.btn)">
<span class="c-label__text | u-epsilon">Password</span>
<span class="c-label__input">
<input class="c-input c-input--password" id="new-password" type="password" autocomplete="new-password" required x-ref="input">
<button class="c-label__btn | u-tc-blue-600 u-tc:hover-blue-800" type="button" x-bind="trigger" x-ref="btn" aria-label="Warning: this will display your password on screen.">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" x-show.important="show == false">
<path fill-rule="nonzero" d="M8 3.002a8.43 8.43 0 0 1 3.559.739c.862.4 1.636.953 2.28 1.63a7.456 7.456 0 0 1 1.585 2.404l.075.226-.08.226C14.245 11.143 11.28 13.05 8 13 4.76 13 1.472 11.07.576 8.227L.501 8l.08-.226a7.57 7.57 0 0 1 1.58-2.404 7.534 7.534 0 0 1 2.28-1.63A8.429 8.429 0 0 1 8 3ZM8 4.43C5.447 4.354 3.104 5.77 2.089 8 3.104 10.234 5.447 11.649 8 11.573c2.553.076 4.895-1.34 5.911-3.571C12.897 5.768 10.553 4.352 8 4.43ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
</svg>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" x-show.important="show" style="display: none !important;">
<path fill-rule="nonzero" d="m4.177.249 1.585 2.44A9.038 9.038 0 0 1 8 2.437a8.993 8.993 0 0 1 3.797.789 8.038 8.038 0 0 1 2.433 1.738 7.955 7.955 0 0 1 1.69 2.566l.08.24-.084.241c-.75 1.862-2.184 3.338-3.964 4.212l1.362 2.098a.5.5 0 0 1-.147.692l-.652.423a.5.5 0 0 1-.692-.147L2.686 1.218a.5.5 0 0 1 .147-.692l.652-.424a.5.5 0 0 1 .692.147ZM2.9 3.984l.837 1.287A6.375 6.375 0 0 0 1.694 7.77c1.06 2.333 3.481 3.83 6.14 3.813l.973 1.496c-.266.02-.536.029-.807.025-3.456 0-6.965-2.06-7.92-5.093L0 7.77l.084-.241a8.076 8.076 0 0 1 1.687-2.566 8.01 8.01 0 0 1 1.13-.98ZM8 3.96a6.974 6.974 0 0 0-1.355.091l1.262 1.943L8 5.991c.933 0 1.698.718 1.772 1.632l.006.146c0 .29-.07.565-.194.808l1.536 2.365c1.396-.648 2.542-1.756 3.186-3.173C13.224 5.387 10.724 3.877 8 3.96Z"></path>
</svg>
</button>
</span>
</label>
<div class="c-label | o-grid__item | u-col-12">
<label class="c-label c-label--checkbox" for="agree">
<input class="c-input c-input--checkbox | u-mr-sm" id="agree" type="checkbox">
<span class="c-label__text | u-balance">I agree with the Listers Terms and Conditions and Privacy Policy.</span>
</label>
<p class="c-note | u-fs-xs u-ml-md u-mt-0">
<svg class="c-icon c-icon--natural | u-nml-xxs u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.987 8.857 1.01-1.01a3.426 3.426 0 0 0 0-4.844h0a3.426 3.426 0 0 0-4.845 0l-1.01 1.01m-3.129 3.13-1.01 1.01a3.426 3.426 0 0 0 0 4.844h0a3.426 3.426 0 0 0 4.845 0l1.01-1.01m1.107-5.879L6.108 9.965"></path>
</g>
</svg>
<a href="/web/terms/">Terms and Conditions</a>, <a href="/web/privacy-policy/">Privacy Policy</a>
</p>
</div>
<div class="o-grid__item | u-col-12">
<button class="c-btn c-btn--positive c-btn--lg" @click="logged = true">
Create Account
</button>
</div>
</form>
</div>
<p class="u-fs-sm u-mt-sm">Already a member? <a href="/web/login/">Login</a></p>
</div>
</div>
</div> Notes:
Good practise checklist for sign up forms.
- Use meaningful HTML elements:
<form>,<input>,<label>, and<button>. - Each input uses a label.
- Element attributes such as
<type>,<name>,<autocomplete>,<required>. - Use the form element.
- Use
autocomplete="new-password"andid="new-password"for password inputs. - Show/Hide password input functionality. Remove the need for duplicate password entry.
- Use
aria-labelandaria-describedbyfor password inputs, to describe any constraints. - Ensure touch targets are large enough and have adequate spacing between other hit areas.