Users

<figure class="user">
  <a href="" class="user-photo">
    <img src="path/to/image" alt="Avatar">
  </a>
  <figcaption class="user-caption">
    <h4>John Doe</h4>
    <span>Head of Experience Design</span>
    <ul class="socials bordered">
      <li><a href="" class="icon-facebook fs-20"></a></li>
      ...
    </ul>
  </figcaption>
</figure>

<ul class="user-grid gutter-1">
  <li>
    <figure class="user">
      <div class="user-photo expand">
        <img src="path/to/image" alt="Avatar" >
      </div>
      <figcaption class="user-panel">
        <div class="container">
          <div class="row justify-content-between align-items-center">
            <div class="col-lg-8">
              <span class="eyebrow">Designer</span>
              <h4 class="h2">Valerie Doe</h4>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque debitis quos ex temporibus dicta laudantium natus quas consequatur doloribus earum, sit a dolor ipsum, officia illum suscipit neque, maxime in.</p>
            </div>
            <div class="col-lg-4 text-white text-lg-right">
              <ul class="socials bordered">
                <li><a href="" class="icon-facebook fs-20"></a></li>
                ...
              </ul>
            </div>
          </div>
        </div>
        <span class="collapse"></span>
      </figcaption>
    </figure>
  </li>
  ...
</ul>