Content Grid

PREVIEW 
<div class="content-grid js-content-grid">
    <div class="content-grid__title-group">
        <div class="content-grid__title-group-main">
            <h2 class="component-subtitle">Content Grid</h2>

            <p>Optional intro - Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsum suscipit maxime voluptatum.</p>
        </div>
        <div class="content-grid__title-group-actions">
            <a href="#" class="btn btn-link js-toggle-content-grid-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="content-grid__rows js-rows">
        <div class="card-wide-group content-grid__row">
            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 1</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->

            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 2</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->

            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 3</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->

            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 4</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->
        </div>
        <div class="card-wide-group content-grid__row">
            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 5</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->

            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 6</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->

            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 7</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->

            <!-- Card - Wide -->
            <div class="card-wide">
                <h3 class="card-wide__title"><a href="#">Card 8</a></h3>
                <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
                <div class="card-wide__actions">
                    <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <!-- /Card - Wide -->
        </div>
    </div>
</div>

.content-grid {
  margin-bottom: 4.2rem;
}

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

.content-grid__header-actions {
  align-self: flex-end;
}

.content-grid__title-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.content-grid__title-group-main {
  flex: 1;
}

.content-grid__title-group-actions {
  align-self: flex-end;
}

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

$(function () {
  const $component = $(".js-content-grid");
  const $rows = $component.find(".js-rows");
  const $toggleBtn = $component.find(".js-toggle-content-grid-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;
        });
      }
    });
  });
});
URL copied to clipboard!