Provider List

<div class="provider-list js-provider-list">
    <div class="provider-list__header">
        <h2 class="component-subtitle">Provider List</h2>
        <div class="provider-list__header-actions">
            <a href="#" class="btn btn-link js-toggle-provider-list-view visible-lg" data-active-content="See less <i class='fa fa-minus'></i>"
                >See all
                <i class="fa fa-plus"></i>
            </a>
        </div>
    </div>

    <div class="provider-list__rows js-rows">
        <div class="provider-list__row">
            <div class="provider-list__item">
                <div class="provider-list__media">
                    <img src="/images/placeholder/48x48.png" alt="" class="img-responsive" />
                </div>
                <div class="provider-list__content">
                    <h4 class="provider-list__title">
                        <a href="#">Provider Name</a>
                    </h4>
                    <div class="provider-list__desc">Lorem ipsum dolor sit amet.</div>
                    <div class="provider-list__contacts">
                        <div class="provider-list__field">
                            <i class="fa fa-envelope text-primary"></i>
                            <a href="#">name@email.com</a>
                        </div>
                        <div class="provider-list__field">
                            <i class="fa fa-phone text-primary"></i>
                            555-555-5555
                        </div>
                    </div>
                </div>
            </div>

            <div class="provider-list__item">
                <div class="provider-list__media">
                    <img src="/images/placeholder/48x48.png" alt="" class="img-responsive" />
                </div>
                <div class="provider-list__content">
                    <h4 class="provider-list__title">
                        <a href="#">Provider Name</a>
                    </h4>
                    <div class="provider-list__desc">Lorem ipsum dolor sit amet.</div>
                    <div class="provider-list__contacts">
                        <div class="provider-list__field">
                            <i class="fa fa-envelope text-primary"></i>
                            <a href="#">name@email.com</a>
                        </div>
                        <div class="provider-list__field">
                            <i class="fa fa-phone text-primary"></i>
                            555-555-5555
                        </div>
                    </div>
                </div>
            </div>

            <div class="provider-list__item">
                <div class="provider-list__media">
                    <img src="/images/placeholder/48x48.png" alt="" class="img-responsive" />
                </div>
                <div class="provider-list__content">
                    <h4 class="provider-list__title">
                        <a href="#">Provider Name</a>
                    </h4>
                    <div class="provider-list__desc">Lorem ipsum dolor sit amet.</div>
                    <div class="provider-list__contacts">
                        <div class="provider-list__field">
                            <i class="fa fa-envelope text-primary"></i>
                            <a href="#">name@email.com</a>
                        </div>
                        <div class="provider-list__field">
                            <i class="fa fa-phone text-primary"></i>
                            555-555-5555
                        </div>
                    </div>
                </div>
            </div>

            <div class="provider-list__item">
                <div class="provider-list__media">
                    <img src="/images/placeholder/48x48.png" alt="" class="img-responsive" />
                </div>
                <div class="provider-list__content">
                    <h4 class="provider-list__title">
                        <a href="#">Provider Name</a>
                    </h4>
                    <div class="provider-list__desc">Lorem ipsum dolor sit amet.</div>
                    <div class="provider-list__contacts">
                        <div class="provider-list__field">
                            <i class="fa fa-envelope text-primary"></i>
                            <a href="#">name@email.com</a>
                        </div>
                        <div class="provider-list__field">
                            <i class="fa fa-phone text-primary"></i>
                            555-555-5555
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="provider-list__row">
            <div class="provider-list__item">
                <div class="provider-list__media">
                    <img src="/images/placeholder/48x48.png" alt="" class="img-responsive" />
                </div>
                <div class="provider-list__content">
                    <h4 class="provider-list__title">
                        <a href="#">Provider Name</a>
                    </h4>
                    <div class="provider-list__desc">Lorem ipsum dolor sit amet.</div>
                    <div class="provider-list__contacts">
                        <div class="provider-list__field">
                            <i class="fa fa-envelope text-primary"></i>
                            <a href="#">name@email.com</a>
                        </div>
                        <div class="provider-list__field">
                            <i class="fa fa-phone text-primary"></i>
                            555-555-5555
                        </div>
                    </div>
                </div>
            </div>

            <div class="provider-list__item">
                <div class="provider-list__media">
                    <img src="/images/placeholder/48x48.png" alt="" class="img-responsive" />
                </div>
                <div class="provider-list__content">
                    <h4 class="provider-list__title">
                        <a href="#">Provider Name</a>
                    </h4>
                    <div class="provider-list__desc">Lorem ipsum dolor sit amet.</div>
                    <div class="provider-list__contacts">
                        <div class="provider-list__field">
                            <i class="fa fa-envelope text-primary"></i>
                            <a href="#">name@email.com</a>
                        </div>
                        <div class="provider-list__field">
                            <i class="fa fa-phone text-primary"></i>
                            555-555-5555
                        </div>
                    </div>
                </div>
            </div>

            <div class="provider-list__item">
                <div class="provider-list__media">
                    <img src="/images/placeholder/48x48.png" alt="" class="img-responsive" />
                </div>
                <div class="provider-list__content">
                    <h4 class="provider-list__title">
                        <a href="#">Provider Name</a>
                    </h4>
                    <div class="provider-list__desc">Lorem ipsum dolor sit amet.</div>
                    <div class="provider-list__contacts">
                        <div class="provider-list__field">
                            <i class="fa fa-envelope text-primary"></i>
                            <a href="#">name@email.com</a>
                        </div>
                        <div class="provider-list__field">
                            <i class="fa fa-phone text-primary"></i>
                            555-555-5555
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.provider-list {
  margin-bottom: 4.2rem;
}

.provider-list__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.provider-list__header-actions {
  align-self: flex-end;
}

// Toggle see all views
.provider-list__rows {
  @media (min-width: $breakpoint-desktop) {
    &.is-reduced {
      .provider-list__row:not(:first-child) {
        display: none;
      }
    }
  }
}

.provider-list__row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.2rem;
}

.provider-list__item {
  display: inline-flex;
  margin-bottom: 2.4rem;
  margin-left: 1.2rem;
  flex: 0 0 100%;

  @media (min-width: $breakpoint-tablet) {
    flex-basis: calc(50% - 1.2rem);
  }

  @media (min-width: $breakpoint-desktop) {
    flex-basis: calc(25% - 1.2rem);
  }
}

.provider-list__media {
  margin-right: 1.2rem;
  width: 4.8rem;
}

.provider-list__title {
  @include typeBody(true);
  margin: 0;
}

.provider-list__desc {
  @include typeCaption;
  margin-bottom: 0.4rem;
}

.provider-list__field {
  @include typeSmall;
  margin-bottom: 0.4rem;
}

$(function () {
  const $component = $(".js-provider-list");
  const $rows = $component.find(".js-rows");
  const $toggleBtn = $component.find(".js-toggle-provider-list-view");

  // Hide all rows but first
  $rows.addClass("is-reduced");

  // Toggle See More
  $toggleBtn.each(function () {
    const $link = $(this);
    const activeContent = $link.data("active-content");
    const inactiveContent = $link.html();

    $link.on("click", function (e) {
      e.preventDefault();
      $link.toggleClass("is-active");
      $rows.toggleClass("is-reduced");

      // Toggle link text
      if (activeContent) {
        $link.html(function () {
          return $link.hasClass("is-active") ? activeContent : inactiveContent;
        });
      }
    });
  });
});