include ./helpers
h1.example__header Forms
.row
  .column--quarter
    .header--small Default Form
  .column--three-quarter
    label.label
    +codeExample("html").
      <form class="form">
        <h1 class="form__title">Hello</h1>
        <h3 class="form__sub-title">This is a form</h3>

        <label class="form__label">Name</label>
        <input class="form__input" value="Connor"/>

        <label class="form__label">Email</label>
        <input class="form__input--invalid"
               value="invalid email"/>

        <div class="form__button-group">
          <button class="form__button--cancel">
            Cancel
          </button>
          <button class="form__button">
            Send
          </button>
        </div>
      </form>
    label.label Result
    form.form
      h1.form__title Hello
      h3.form__sub-title This is a form

      label.form__label Name
      input.form__input(value="Connor")

      label.form__label Email
      input.form__input--invalid(value="inavlid email")

      .form__button-group
        button.form__button--cancel Cancel
        button.form__button Send