People Grid
This component has browser resizing triggers which may affect the interactions in the embedded demo above. Open the
preview in a new tab
.
<div class="people-grid js-people-grid">
<div class="people-grid__header">
<h2 class="component-subtitle">COMPONENT TITLE</h2>
<!-- Dev Note: Do not show this link if <= 6 items -->
<div class="people-grid__header-actions">
<a href="#" class="btn btn-link js-toggle" data-active-content="See less <i class='fa fa-minus'></i>"
>See all
<i class="fa fa-plus"></i>
</a>
</div>
<!-- /Dev Note -->
</div>
<div class="people-grid__grid is-reduced">
<div class="people-grid__card js-card" data-card-index="0">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 1</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="0">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 1</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="1">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 2</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="1">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 2</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="2">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 3</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="2">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 3</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="3">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 4</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="3">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 4</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="4">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 5</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="4">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 5</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="5">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 6</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="5">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 6</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="6">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 7</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="6">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 7</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="7">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 8</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="7">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 8</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="8">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 9</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="8">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 9</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="9">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 10</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="9">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 10</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="10">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 11</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="10">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 11</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus ratione ea dolores similique eius nihil. Nihil, iure fugiat? Culpa fugit quas corrupti, debitis provident aliquid veniam quisquam repudiandae eaque inventore eius laboriosam totam iusto voluptates ratione sit itaque quod officia.</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
<div class="people-grid__card js-card" data-card-index="11">
<!-- Profile Card - Large -->
<div class="profile-card">
<div class="profile-card__media">
<img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Name Surname 12</div>
<div class="profile-card__field">Title</div>
<div class="profile-card__field">BU/Division</div>
</div>
</div>
</div>
<!-- /Profile Card - Large -->
</div>
<div class="people-grid__panel js-panel" data-panel-index="11">
<a href="#" class="people-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="people-grid__panel-body">
<div class="people-grid__title">Name Surname 12</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>
<a href="#">View Org Chart</a>
</p>
<p>
<a href="#">View Profile</a>
</p>
</div>
</div>
</div>
</div>
.people-grid {
margin: 0 auto 4rem;
max-width: 1140px;
}
.people-grid__header {
display: flex;
justify-content: space-between;
margin-bottom: 1.2rem;
}
.people-grid__header-actions {
align-self: flex-end;
}
// Toggle see all views
.people-grid.is-reduced {
// Each card/panel combo takes up two child spots
// To hide all combos after N combos, disable children (N * 2) + 1
// ex. 6 card/panel combos: (6 * 2) + 1 = 13 - Hide children starting at 13
.people-grid__card:nth-child(n + 13),
.people-grid__panel:nth-child(n + 13) {
display: none !important; // Override inline styles put in by animation
}
}
.people-grid__grid {
display: grid;
grid-auto-flow: dense;
gap: 0 2.4rem;
// Prevent long string breaking grid layout
grid-template-columns: minmax(0, 1fr);
word-break: break-all;
@media (min-width: $breakpoint-desktop) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.people-grid__card {
@include boxShadow(2);
cursor: pointer;
background-color: $color-base-white;
border-top: 0.4rem solid $color-grey-dark;
padding: 1.2rem;
margin-bottom: 2.4rem;
&:hover {
border-color: $color-blue-medium;
}
&.is-active {
border-top-color: $color-base-blue;
}
}
.people-grid__panel {
position: relative;
background-color: $color-blue-dark;
color: $color-base-white;
padding: 1.6rem 2.4rem;
grid-column: 1 / -1;
margin-bottom: 2.4rem;
display: none;
.people-grid-close {
position: absolute;
top: 0.8rem;
right: 0.8rem;
color: $color-base-white;
}
}
.people-grid__title {
@include typeSubheader(true);
}
.people-grid__panel-body {
max-width: 84rem;
a {
font-weight: bold;
color: $color-blue-light;
}
}
$(function () {
$(".js-people-grid").each(function () {
const $component = $(this);
const $cards = $component.find(".js-card");
const $close = $component.find(".js-close");
const $toggleBtn = $component.find(".js-toggle");
// Hide cards on init
$component.addClass("is-reduced");
// Expand cards
$cards.on("click", function (e) {
e.preventDefault();
const $activeCard = $(this);
const activeCardIndex = parseInt($activeCard.data("cardIndex"), 10);
const activeCardIndexInRow = parseInt(activeCardIndex, 10) % 3;
const $targetPanel = $component.find("[data-panel-index=" + activeCardIndex + "]");
let otherItemsInRow;
// Get indices of other items in the row, relative to the active index
switch (activeCardIndexInRow) {
case 0:
otherItemsInRow = [1, 2];
break;
case 1:
otherItemsInRow = [-1, 1];
break;
case 2:
otherItemsInRow = [-2, -1];
break;
default:
console.error("Card index in row not found!");
break;
}
// Deactivate cards/panels in row (at certain breakpoint)
if (window.matchMedia("(min-width: 1200px)").matches) {
otherItemsInRow.map((index) => {
const itemIndexToDeactivate = activeCardIndex + index;
// Deactivate Card
$component.find("[data-card-index=" + itemIndexToDeactivate + "]").removeClass("is-active");
// Deactivate Panel
$component
.find("[data-panel-index=" + itemIndexToDeactivate + "]")
.removeClass("is-active")
.slideUp();
});
}
// Activate card/panel
if ($targetPanel.length && !$activeCard.hasClass("is-active")) {
$activeCard.addClass("is-active");
$targetPanel.slideDown();
}
});
// Close panels
$close.on("click", function (e) {
e.preventDefault();
const panelIndex = $(this).closest(".js-panel").data("panel-index");
// Deactivate Card
$component.find("[data-card-index=" + panelIndex + "]").removeClass("is-active");
// Deactivate Panel
$(this).closest(".js-panel").slideUp();
});
// Listen for resize events to close any open panels
var resizeTimeout;
window.addEventListener(
"resize",
function () {
if (resizeTimeout) {
window.cancelAnimationFrame(resizeTimeout);
}
resizeTimeout = window.requestAnimationFrame(function () {
$close.click();
});
},
false
);
// 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");
$component.toggleClass("is-reduced");
// Toggle link text
if (activeContent) {
$link.html(function () {
return $link.hasClass("is-active") ? activeContent : inactiveContent;
});
}
});
});
});
});