Forms

Form Spacing

Form heading

A paragraph talking about the content of the form.

Info to accompany the input field

Small details to accompany the button

<div class="mzp-l-content mzp-t-narrow">
  <form class="mzp-c-form">
    <header class="mzp-c-form-header">
      <h2 class="mzp-c-form-heading">Form heading</h2>
      <p>A paragraph talking about the content of the form.
      </p>
    </header>
    <div class="mzp-c-field mzp-l-stretch">
      <label class="mzp-c-field-label"
       for="fxa-email-field">Field label</label>
      <input class="mzp-c-field-control " type="email"
       id="fxa-email-field">

      <p class="mzp-c-field-info">Info to accompany the
        input field</p>
    </div>
    <footer class="mzp-c-form-footer">
      <div class="mzp-c-button-container">
        <button type="submit"
         class="mzp-c-button mzp-t-primary mzp-t-product"
         id="fxa-email-form-submit" data-cta-type="fxa-sync"
         data-cta-text="Register"
         data-cta-position="primary">
          Button
        </button>
        <p class="mzp-c-button-info">
          Small details to accompany the button
        </p>
      </div>
    </footer>
  </form>
</div>