Search & Filter Form

View

<form class="util-background-light-gray util-pad-all-sm util-pad-all-md@sm util-pad-all-lg@md util-display-none@print">

  <fieldset>
    <legend class="cmp-heading-4 util-margin-bottom-sm util-text-center util-full-width">Search Filter Title</legend>

    <div class="cmp-form-field">

      <label for="Search-field" class="cmp-form-label">
        Search
      </label>
      <div class="">
        <div class="util-position-relative">
          <input id="Search-field" class="cmp-form-field__input" type="search" placeholder="Search Degrees &amp; Certificates" />
        </div>
      </div>
    </div>

    <p class="util-margin-vert-none util-color-light-gray util-text-italic">
      Searches are NOT case sensitive, and boolean searching is supported.
    </p>

    <div class="obj-grid obj-grid--gap-md@sm util-margin-vert-lg">
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="subject-select" class="cmp-form-label">
            Subject
          </label>
          <div class="">
            <select id="subject-select" class="cmp-form-select__dropdown" name="Search and Filter">
              <option value="1">All Subjects</option>
              <option value="2">Education</option>
              <option value="3">Business</option>
            </select>
          </div>
        </div>
      </div>
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="colleges-select" class="cmp-form-label">
            Colleges
          </label>
          <div class="">
            <select id="colleges-select" class="cmp-form-select__dropdown" name="Search and Filter">
              <option value="1">All Colleges</option>
              <option value="2">College of Education</option>
              <option value="3">College of Engineering</option>
            </select>
          </div>
        </div>
      </div>
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="degree-select" class="cmp-form-label">
            Degree Type
          </label>
          <div class="">
            <select id="degree-select" class="cmp-form-select__dropdown" name="Search and Filter">
              <option value="1">Any</option>
              <option value="2">Undergraduate</option>
              <option value="3">Graduate</option>
              <option value="4">Post Baccalaureate</option>
            </select>
          </div>
        </div>
      </div>
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="degree-type-select" class="cmp-form-label">
            Degree Type
          </label>
          <div class="">
            <select id="degree-type-select" class="cmp-form-select__dropdown" name="Search and Filter">
              <option value="1">Any</option>
              <option value="2">Certificate</option>
              <option value="3">Degree</option>
            </select>
          </div>
        </div>
      </div>
    </div>

  </fieldset>

  <div class="obj-grid obj-grid--gap-md@sm">
    <div class="obj-grid__full obj-grid__quarter@md">
      <button class="cmp-button
           cmp-button--full-width" type="submit">
        Search
      </button>
    </div>
  </div>
</form>