Events List

PREVIEW 
<h2 class="component-title">Events List</h2>
<div class="events-list">
    <ul class="events-list__list">
        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <div class="badge">Today</div>

                    <span class="event__date-start">JUL 10</span>
                </div>

                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 11</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a href="#" class="btn btn-link event__action" data-toggle="tooltip" data-placement="top" title="Register here">
                        <i class="fa fa-pencil-square-o"></i>
                    </a>
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 12</span>
                    <span class="event__date-separator"></span>
                    <span class="event__date-end">JUL 14</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#">Event Category</a>
                    </div>
                    <a class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 12</span>
                </div>

                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 13</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a href="#" class="btn btn-link event__action" data-toggle="tooltip" data-placement="top" title="Register here">
                        <i class="fa fa-pencil-square-o"></i>
                    </a>
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 14</span>
                    <span class="event__date-separator"></span>
                    <span class="event__date-end">JUL 16</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#">Event Category</a>
                    </div>
                    <a class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 14</span>
                </div>

                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 15</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a href="#" class="btn btn-link event__action" data-toggle="tooltip" data-placement="top" title="Register here">
                        <i class="fa fa-pencil-square-o"></i>
                    </a>
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 16</span>
                    <span class="event__date-separator"></span>
                    <span class="event__date-end">JUL 18</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#">Event Category</a>
                    </div>
                    <a class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 16</span>
                </div>

                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 17</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#" class="">Event Category</a>
                    </div>
                    <a href="#" class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a href="#" class="btn btn-link event__action" data-toggle="tooltip" data-placement="top" title="Register here">
                        <i class="fa fa-pencil-square-o"></i>
                    </a>
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="events-list__item">
            <div class="event">
                <div class="event__date">
                    <span class="event__date-start">JUL 18</span>
                    <span class="event__date-separator"></span>
                    <span class="event__date-end">JUL 20</span>
                </div>
                <div class="event__body">
                    <div class="event__category">
                        <a href="#">Event Category</a>
                    </div>
                    <a class="event__title">Event title: Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                    <div class="event__details">
                        <div class="event__time">Monday, MMM DD. 00:00 AM - 00:00 AM</div>
                        <div class="event__location">Location: Virtual and in person</div>
                        <div class="event__interest">XX people interested</div>
                    </div>
                </div>
                <div class="event__actions">
                    <a role="button" class="btn btn-link event__action" data-toggle="popover" data-placement="auto" title="Add to calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">
                        <i class="fa fa-calendar"></i>
                    </a>
                </div>
            </div>
        </li>
    </ul>
    <!-- Pagination -->
    <nav class="text-center">
        <ul class="pagination pagination--vcbs">
            <li class="pagination-prev">
                <a href="#">
                    <span><i class="fa fa-chevron-left"></i></span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li class="disabled"><a>&hellip;</a></li>
            <li><a href="#">6</a></li>
            <li class="active"><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li class="disabled"><a>&hellip;</a></li>
            <li><a href="#">15</a></li>
            <li class="pagination-next">
                <a href="#">
                    <span><i class="fa fa-chevron-right"></i></span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /Pagination -->
</div>

.events-list {
  background-color: rgba($color-base-grey, 0.5);
  padding-top: 1.2rem;

  @media (min-width: $breakpoint-desktop) {
    background-color: $color-base-white;
  }
}

.events-list__list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.events-list__item {
  display: flex;
  padding: 1.2rem;

  @media (min-width: $breakpoint-desktop) {
    flex: 0 0 50%;
    padding: 2.4rem;

    &:nth-child(4n + 1),
    &:nth-child(4n + 2) {
      background-color: rgba($color-base-grey, 0.5);
    }
  }
}

.event {
  display: flex;
  width: 100%;
}

.event__body {
  flex: 1;
  padding-left: 2.4rem;
}

.event__date {
  @include typeHeadline(true);
  color: $color-base-blue;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-width: 8rem;
}

.event__date-separator {
  align-self: center;
  display: block;
  width: 1.6rem;
  height: 1px;
  margin: 1.2rem;
  background-color: $color-base-blue;
}

.event__category {
  @include typeCaption;
  color: $color-blue-medium;
  margin-bottom: 0.4rem;
}

.event__title {
  @include typeBody(true);
  display: block;
  color: $color-base-blue;
  margin-bottom: 1.2rem;

  &:hover {
    color: $color-blue-medium;
  }
}

.event__details {
  @include typeCaption;
  color: $color-grey-dark;
}

.event__actions {
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
}

.event__action {
  color: $color-grey-dark;

  &:hover {
    color: $color-blue-medium;
  }
}

// Consider adding globally
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
URL copied to clipboard!