<div id="event-2" class="event-details-wrap">
  <div class="meta-block">
    <i class="mdi mdi-lock"></i>
    <div class="meta">
      <span>Private</span>
      <span>This is a private event</span>
    </div>
  </div>
  <div class="meta-block">
    <i class="mdi mdi-map-marker"></i>
    <div class="meta">
      <span>Where</span>
      <span>@ <a class="is-inverted">Wayne's Coffeeshop</a>, LA</span>
    </div>
  </div>
  <div class="meta-block">
    <i class="mdi mdi-progress-clock"></i>
    <div class="meta">
      <span>When</span>
      <span>11:00am - 12:30pm</span>
    </div>
  </div>
  <div class="participants-wrap">
    <label>3 Participants</label>
    <div class="participants">
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/jenna.png"
        alt=""
        data-user-popover="0"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/edward.jpeg"
        alt=""
        data-user-popover="4"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/rolf.jpg"
        alt=""
        data-user-popover="13"
      />
    </div>
  </div>
  <div class="event-description">
    <label>Description</label>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
      blanditiis commodi accusamus dolores itaque repudiandae.
    </p>
  </div>
  <hr />
  <div class="button-wrap">
    <a class="button is-bold">Participating</a>
    <a class="button is-bold">Details</a>
  </div>
</div>
