News List

<div class="news-list">
    <h2 class="component-title">Latest News</h2>
    <ul class="news-list__list">
        <li class="news-list__item">
            <div class="news-item">
                <div class="news-item__media">
                    <a href="#" class="">
                        <img src="/images/placeholder/672x378.png" alt="" class="news-item__img img-responsive" />
                    </a>
                </div>
                <div class="news-item__body">
                    <a href="#" class="news-item__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, explicabo!</a>
                    <div class="news-item__meta">
                        <span class="news-item__age">MMM DD YYYY</span>
                        in
                        <a href="#" class="news-item__category">category</a>
                    </div>
                </div>
            </div>
        </li>

        <li class="news-list__item">
            <div class="news-item">
                <div class="news-item__media">
                    <a href="#" class="">
                        <img src="/images/placeholder/672x378.png" alt="" class="news-item__img img-responsive" />
                    </a>
                </div>
                <div class="news-item__body">
                    <a href="#" class="news-item__title">Short title</a>
                    <div class="news-item__meta">
                        <span class="news-item__age">MMM DD YYYY</span>
                        in
                        <a href="#" class="news-item__category">category</a>
                    </div>
                </div>
            </div>
        </li>

        <li class="news-list__item">
            <div class="news-item">
                <div class="news-item__media">
                    <a href="#" class="">
                        <img src="/images/placeholder/672x378.png" alt="" class="news-item__img img-responsive" />
                    </a>
                </div>
                <div class="news-item__body">
                    <a href="#" class="news-item__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, explicabo!</a>
                    <div class="news-item__meta">
                        <span class="news-item__age">MMM DD YYYY</span>
                        in
                        <a href="#" class="news-item__category">category</a>
                    </div>
                </div>
            </div>
        </li>

        <li class="news-list__item">
            <div class="news-item">
                <div class="news-item__media">
                    <a href="#" class="">
                        <img src="/images/placeholder/672x378.png" alt="" class="news-item__img img-responsive" />
                    </a>
                </div>
                <div class="news-item__body">
                    <a href="#" class="news-item__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, explicabo!</a>
                    <div class="news-item__meta">
                        <span class="news-item__age">MMM DD YYYY</span>
                        in
                        <a href="#" class="news-item__category">category</a>
                    </div>
                </div>
            </div>
        </li>

        <li class="news-list__item">
            <div class="news-item">
                <div class="news-item__media">
                    <a href="#" class="">
                        <img src="/images/placeholder/672x378.png" alt="" class="news-item__img img-responsive" />
                    </a>
                </div>
                <div class="news-item__body">
                    <a href="#" class="news-item__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, explicabo!</a>
                    <div class="news-item__meta">
                        <span class="news-item__age">MMM DD YYYY</span>
                        in
                        <a href="#" class="news-item__category">category</a>
                    </div>
                </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>

.news-list {
  margin-bottom: 4.8rem;
}

.news-list__list {
  list-style: none;
  padding-left: 0;
}

.news-list__item {
  margin-top: 2.4rem;

  @media (min-width: $breakpoint-desktop) {
    margin-top: 4.8rem;
  }

  &:first-child {
    margin-top: 0;
  }
}

.news-item {
  display: flex;
  min-height: 7.2rem;
}

.news-item__media {
  flex: 1 0 12.8rem;
}

.news-item__body {
  flex-basis: 100%;
  margin-left: 2.4rem;
}

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

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