<div id="event-1" 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>@ Mom and Dad's house</span>
    </div>
  </div>
  <div class="meta-block">
    <i class="mdi mdi-progress-clock"></i>
    <div class="meta">
      <span>When</span>
      <span>02:00pm - 03:30pm</span>
    </div>
  </div>
  <div class="participants-wrap">
    <label>4 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/nelly.png"
        alt=""
        data-user-popover="9"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/stella.jpg"
        alt=""
        data-user-popover="2"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/milly.jpg"
        alt=""
        data-user-popover="7"
      />
    </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>
