🍷 Digital Wine Cellar – Pattern Library

Login 

<div id="layout">

    <header id="header">
        <div class="header-content">
            <p class="main-title">
                <svg class="icon " height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#logo-badge" />
                </svg>
                Fine Wine Club
            </p>
        </div>
    </header>

    <main id="main-content">

        <form action="#" method="post" class="onboarding-form">

            <h1>Log in</h1>

            <div class="form-item ">
                <label for="email-address">
                    E-mail address

                </label>
                <input type="text" id="email-address" value="user@domain.com">
            </div>

            <div class="form-item ">
                <label for="password">
                    Password

                </label>
                <input type="password" id="password" value="supersecurepassword">
            </div>

            <div class="status-message status-error">
                <h3 class="status-message-title">Username or password error</h3>
                <p>Either that user doesn’t exist or the password was wrong.</p>
                <svg class="icon info-icon" height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#status-error" />
                </svg>
            </div>

            <div class="submit-area ">
                <button type="button" data-prototype-url="../preview/dashboard.html">
                    <span>
                        <span>Log in</span>
                    </span>
                </button>
            </div>

            <ul class="flat-list">
                <li>
                    <svg class="icon " height="20" width="20" aria-hidden="true">
                        <use xlink:href="../../sprite.svg#help" />
                    </svg>
                    <a href="../preview/forgot-password.html">Having trouble signing in?</a>
                </li>
                <li>
                    <svg class="icon " height="20" width="20" aria-hidden="true">
                        <use xlink:href="../../sprite.svg#user-add" />
                    </svg>
                    <a href="../preview/register.html">Sign up for an account.</a>
                </li>
            </ul>

        </form>

    </main>

</div>
 
{{#> @regular-page}}

  {{#> @onboarding-form}}

    <h1>Log in</h1>

    {{> @form-item-input email}}

    {{> @form-item-input password}}

    {{#> @status-message error}}
      <p>Either that user doesn’t exist or the password was wrong.</p>
    {{/ @status-message}}

    {{> @submit-area}}

    <ul class="flat-list">
      <li>
        {{> @svg icon="help"}}
        <a href="{{ path '/components/preview/forgot-password' }}">Having trouble signing in?</a>
      </li>
      <li>
        {{> @svg icon="user-add"}}
        <a href="{{ path '/components/preview/register' }}">Sign up for an account.</a>
      </li>
    </ul>

  {{/ @onboarding-form}}

{{/ @regular-page}}
 
{
  "header-type": "logged-out",
  "email": {
    "label": "E-mail address",
    "id": "email-address",
    "value": "user@domain.com"
  },
  "password": {
    "label": "Password",
    "id": "password",
    "type": "password",
    "value": "supersecurepassword"
  },
  "error": {
    "type": "error",
    "title": "Username or password error",
    "icon": "status-error"
  },
  "submit-button": {
    "text": "Log in",
    "prototype-url": "/components/preview/dashboard"
  }
}

No notes defined.