Patterns

Form Contact 

<form>
    <ul class="list">
        <li>
            <fieldset>
                <legend class="text-label">Gender</legend>
                <label class="form-control">
                    <input class="form-control__radio" type="radio" name="gender" value="male" />
                    <span class="form-control__visual"></span>
                    <span class="form-control__text">Male</span>
                </label>

                <label class="form-control">
                    <input class="form-control__radio" type="radio" name="gender" value="male" />
                    <span class="form-control__visual"></span>
                    <span class="form-control__text">Female</span>
                </label>

                <label class="form-control">
                    <input class="form-control__radio" type="radio" name="gender" value="male" />
                    <span class="form-control__visual"></span>
                    <span class="form-control__text">Rather not say</span>
                </label>

            </fieldset>
        </li>
        <li>
            <label>
                <span class="text-label">First name</span>
                <input type="text" class="form-input" placeholder="John" />
            </label>

        </li>
        <li>
            <label>
                <span class="text-label">Last name</span>
                <input type="text" class="form-input" placeholder="Doe" />
            </label>

        </li>
        <li>
            <label>
                <span class="text-label">Email</span>
                <input type="text" class="form-input" placeholder="john.doe@mail.com" />
            </label>

        </li>
        <li>
            <label class="form-control">
                <input class="form-control__checkbox" type="checkbox" name="food" value="" />
                <span class="form-control__visual"></span>
                <span class="form-control__text">Subscribe to our newsletter</span>
            </label>

        </li>
        <li>
            <button class="button">
                Submit <svg class="icon icon--chevron-right ml-1">
                    <use xlink:href="../../assets/icons.svg#chevron-right" />
                </svg>

            </button>
        </li>
    </ul>
</form>
 
<form>
  <ul class="list">
    <li>
      <fieldset>
        <legend class="text-label">Gender</legend>
        {% render '@form-radio', { value: 'gender', label: 'Male'} %}
        {% render '@form-radio', { value: 'gender', label: 'Female' } %}
        {% render '@form-radio', { value: 'gender', label: 'Rather not say' } %}
      </fieldset>
    </li>
    <li>
      {% render '@form-input', { label: 'First name', type: 'text', placeholder: 'John'} %}
    </li>
    <li>
      {% render '@form-input', { label: 'Last name', type: 'text', placeholder: 'Doe'} %}
    </li>
    <li>
      {% render '@form-input', { label: 'Email', type: 'email', placeholder: 'john.doe@mail.com'} %}
    </li>
    <li>
      {% render '@form-checkbox', { label: 'Subscribe to our newsletter' } %}
    </li>
    <li>
      <button class="button">
        Submit {% render '@icon', { id: 'chevron-right', class: 'ml-1' } %}
      </button>
    </li>
  </ul>
</form>
 
/* No context defined. */

No notes defined.