No notes defined.

<section class="c-login js-login">
  <header class="c-login__header">
    <h2>Sign In / Sign Up</h2>
    <p class="c-login__required-field js-login__required-field" hidden>required field</p>
  </header>
  <p role="alert" class="c-login__invalid-notification js-login__invalid-notification" hidden></p>
  <form action="" class="novalidate">
    {{> @textfield }}
    {{> @button }}
  </form>
  <footer class="c-login__footer">
    <p>Problems signing in? <a href="">Contact us</a>.</p>
  </footer>
</section>
{
  "textfield": {
    "component_id": "login-email",
    "input_id": "email_1",
    "label": "Email address",
    "type": "email",
    "autocomplete": "email",
    "required": true,
    "general_description_id": "description_1",
    "general_description": "For SSO, use institutional address."
  },
  "button": {
    "type": "submit",
    "text": "Continue"
  }
}
<section class="c-login js-login">
    <header class="c-login__header">
        <h2>Sign In / Sign Up</h2>
        <p class="c-login__required-field js-login__required-field" hidden>required field</p>
    </header>
    <p role="alert" class="c-login__invalid-notification js-login__invalid-notification" hidden></p>
    <form action="" class="novalidate">
        <div id="login-email" class="c-textfield js-textfield ">
            <label for="email_1">Email address </label>
            <input id="email_1" type="email" name="" autocomplete="email" value="" list="" minlength="" maxlength="" aria-describedby="description_1" class="require-me">
            <div id="description_1" class="c-textfield__general-description">For SSO, use institutional address.</div>
            <div id="" class="c-textfield__invalid-description js-invalid-description" hidden></div>
        </div>
        <button type="submit">Continue</button>
    </form>
    <footer class="c-login__footer">
        <p>Problems signing in? <a href="">Contact us</a>.</p>
    </footer>
</section>