HTML

<div class="directory-container directory-grid">

  <div class="form-filters--loading mb-5 text-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>

  <form class="page-top-form form-filters--top mb-5 d-none">
    <div class="row g-3">
  
      <div class="form-group col-md mb-4">
        <label class="form-label" for="directory-search-name">Search</label>
        <input type="text" class="form-control" id="directory-search-name" placeholder="Search by name">
      </div>

      <div class="form-group col-md-3 mb-4 d-none" id="directory-filter-department-wrapper">
        <label class="form-label" for="directory-filter-department">Department/Division</label>
        <select class="form-select form-control" id="directory-filter-department"></select>
      </div>

      <div class="form-group col-md-3 mb-4 d-none" id="directory-filter-classification-wrapper">
        <label class="form-label" for="directory-filter-classification">Classification</label>
        <select class="form-select form-control" id="directory-filter-classification"></select>
      </div>

      <div class="form-group col-md-3 mb-4 d-none" id="directory-filter-discipline-wrapper">
        <label class="form-label" for="directory-filter-discipline">Discipline</label>
        <select class="form-select form-control" id="directory-filter-discipline"></select>
      </div>
  
      <div class="form-group col-md-1 mb-4 sr-only">
        <button id="directory-btn-search" type="submit" class="btn btn-outline-gray-200 border text-black w-100">Search</button>
      </div>

    </div>
  </form>

  <div class="row">


    <div class="col-sm-12 col-md-6 col-lg-4 mb-5 personWrap example-division-department example-classification-classification example-discipline-discipline" data-divisions="Example Division" data-classifications="Example Classification" data-disciplines="Example Discipline" data-netid="netid">
      <div class="card card-directory text-center reveal-ignore">

        <a href="/directory/netid" class="bg-cover h-px-550 lazy-directory d-block lazy" style="background-image: url(https://www.its.msstate.edu/sites/www.its.msstate.edu/files/styles/msstatedrupal_extra_large/public/2023-08/Dak_Welcome_Celebration_2023041420230414_G5C9558.jpg);">
          <span class="sr-only">Link to profile for Firstname Lastname</span>
        </a>

        <div class="card-body text-black pb-2">

          <a href="/directory/kma48">
            <h2 id="directory--title--kevin-m-anderson" class="directory--name h3 my-3 text-maroon-300">Firstname Lastname</h2>
          </a>

          <p class="directory--department h4 my-3">Example Division</p>
          <p class="directory--classification h5 my-3">Example Classification</p>
          <p class="directory--discipline h5 my-3">Example Discipline</p>

          <ul class="directory--titles list-unstyled mt-3 mb-0 fw-light lh-sm">
            <li class="my-2">Manager</li>
          </ul>
          
        </div>

        <div class="directory--contact text-black list-group list-group-flush font-size-80">
          <a class="directory--email list-group-item list-group-item-action py-3 text-maroon-300 text-truncate local" href="mailto:kanderson@its.msstate.edu"><span class="fas fa-envelope me-2"></span>kanderson@its.msstate.edu</a>
          <a class="directory--phone list-group-item list-group-item-action py-3 text-maroon-300 local" href="tel:(662) 325-6984"><span class="fas fa-phone me-2"></span>(662) 325-6984</a>
        </div>
          
        <a class="card-footer btn btn-gray-200 font-weight-bold text-uppercase text-center py-2 local" href="/directory/kma48">
          <span class="small">View Profile<span class="sr-only"> for Kevin M. Anderson</span></span>
        </a>

      </div>
    </div>


  </div>

</div>