Help Footer

Example

Usage

<!-- Help Footer -->
<div class="ui-help-footer">

  <!-- Top section - contains icon, title and text -->
  <div class="ui-help-footer__top">
    <div class="ui-help-footer__title"><i class="ui-icon ui-icon--light ui-icon--call"></i>...</div>
    <div class="ui-help-footer__text">...</div>
  </div>

  <!-- Body section - contains form and contact numbers -->
  <div class="ui-help-footer__body">

    <div class="ui-help-footer__form">

      <!-- Refer to form documentation for markup examples -->
      <form class="ui-form">
        <fieldset>
          <div class="ui-row">
            <div class="ui-col ui-col--medium">
              <div class="ui-form__group">...</div>
            </div>
            <div class="ui-col ui-col--medium">
              <div class="ui-form__group">...</div>
            </div>
          </div>
        </fieldset>
      </form>
    </div>

    <div class="ui-row">
      <!-- Repeat as many times as necessary -->
      <div class="ui-col ui-col--medium--1-2">
        <div class="ui-help-footer__contact">
          <div class="ui-help-footer__contact__name ui-eyebrow">...</div>
          <div class="ui-help-footer__contact__number">...</div>
        </div>
      </div>
      <div class="ui-col ui-col--medium--1-2">
        <div class="ui-help-footer__contact">
          <div class="ui-help-footer__contact__name ui-eyebrow">...</div>
          <div class="ui-help-footer__contact__number">...</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bottom section - links and copyright -->
  <!-- Exactly the same structure as Global Footer -->
  <div class="ui-help-footer__bottom">
    <ul class="ui-help-footer__list">
      <li class="ui-help-footer__item"><a href="#">...</a></li>
      <li class="ui-help-footer__item"><a href="#">...</a></li>
      <li class="ui-help-footer__item"><a href="#">...</a></li>
    </ul>
    <div class="ui-help-footer__copyright">...</div>
  </div>
</div>