Large Cards Expandable (Guidance) - Basic Panel
This component has browser resizing triggers which may affect the interactions in the embedded demo above. Open the
preview in a new tab
.
This component functions and is styled the same as
Large Cards Expandable (Guidance). The only difference in this example is a
basic panel
is swapped in for the expanded content.
<div class="cards-large-expandable-alt js-cards-large-expandable-alt">
<h2 class="component-title">Large Card Expandable Title (Optional)</h2>
<div class="cards-large-expandable__header">
<div class="cards-small-expandable__header-intro"></div>
<div class="cards-large-expandable__header-actions">
<a href="#" class="btn btn-link hidden-xs js-toggle-card-large-expandable-view" data-active-content="See less <i class='fa fa-minus'></i>"
>See all
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div class="cards-large-expandable-alt__rows js-rows">
<!-- Row 1 -->
<div class="cards-large-expandable-alt__row js-row">
<div class="cards-large-group">
<!-- Large Card 2 -->
<div class="card-large is-odd js-card-large" data-target="1">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 1</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 2 -->
<!-- Mobile Card 1 Panel -->
<div class="visible-xs-block">
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
</div>
<!-- /Mobile Card 1 Panel -->
<!-- Large Card 3 -->
<div class="card-large is-even js-card-large" data-target="2">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 2</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 3 -->
<!-- Mobile Card 2 Panel -->
<div class="visible-xs-block">
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
</div>
<!-- /Mobile Card 2 Panel -->
<!-- Large Card 4 -->
<div class="card-large is-odd js-card-large" data-target="3">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 3</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 4 -->
<!-- Mobile Card 3 Panel -->
<div class="visible-xs-block">
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
</div>
<!-- /Mobile Card 3 Panel -->
</div>
<!-- Desktop Row 1 Panels -->
<div class="hidden-xs">
<!-- Desktop Card 1 Panel -->
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
<!-- /Desktop Card 1 Panel -->
<!-- Desktop Card 2 Panel -->
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
<!-- /Desktop Card 2 Panel -->
<!-- Desktop Card 3 Panel -->
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
<!-- /Desktop Card 3 Panel -->
</div>
<!--/Desktop Row 1 Panels -->
</div>
<!-- Row 2 -->
<div class="cards-large-expandable-alt__row js-row">
<div class="cards-large-group">
<!-- Large Card 5 -->
<div class="card-large is-even js-card-large" data-target="4">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 4</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 5 -->
<!-- Mobile Card 4 Panel -->
<div class="visible-xs-block">
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
</div>
<!-- /Mobile Card 4 Panel -->
<!-- Large Card 6 -->
<div class="card-large is-odd js-card-large" data-target="5">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 5</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 6 -->
<!-- Mobile Card 5 Panel -->
<div class="visible-xs-block">
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
</div>
<!-- /Mobile Card 5 Panel -->
</div>
<!-- Desktop Row 2 Panels -->
<div class="hidden-xs">
<!-- Desktop Card 4 Panel -->
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
<!-- /Desktop Card 4 Panel -->
<!-- Desktop Card 5 Panel -->
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
<p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
<p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
</div>
</div>
</div>
</div>
<!-- /BASIC PANEL -->
<!-- /Desktop Card 5 Panel -->
</div>
<!--/Desktop Row 2 Panels -->
</div>
</div>
</div>
.cards-large-expandable-alt {
margin-bottom: 4.8rem;
}
.cards-large-expandable-alt__header {
display: flex;
justify-content: space-between;
}
.cards-large-expandable-alt__header-actions {
justify-self: flex-end;
}
// Toggle see all views
.cards-large-expandable-alt__rows {
@media (min-width: $breakpoint-tablet) {
&.is-reduced {
.cards-large-expandable-alt__row:not(:first-child) {
display: none;
}
}
}
}
$(function () {
const $component = $(".js-cards-large-expandable-alt");
const $toggleViewBtn = $component.find(".js-open-large-card");
const $close = $component.find(".js-close");
const $rows = $component.find(".js-rows");
const $seeMoreBtn = $(".js-toggle-card-large-expandable-view");
// Expand cards
$toggleViewBtn.on("click", function (e) {
e.preventDefault();
const $activeCard = $(this).closest(".js-card-large");
const $target = $component.find(".js-panel-" + $activeCard.data("target"));
const $row = $activeCard.closest(".js-row");
if ($target.length && !$activeCard.hasClass("is-active")) {
$activeCard.addClass("is-active");
$target.slideDown();
// Close other panels in row only on tablet+
if (window.matchMedia("(min-width: 768px)").matches) {
$row.find(".js-panel").not($target).find(".js-close").click();
}
}
});
// Collapse card panels
$close.on("click", function () {
const panel = $(this).closest(".js-panel").data("panel");
$component.find("[data-target=" + panel + "]").removeClass("is-active");
$(this).closest(".js-panel").slideUp();
});
// Hide all card rows but first
$rows.addClass("is-reduced");
// Toggle See More
$seeMoreBtn.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;
});
}
});
});
// Listen for resize events to close any open panels
var resizeTimeout;
window.addEventListener(
"resize",
function (event) {
if (resizeTimeout) {
window.cancelAnimationFrame(resizeTimeout);
}
resizeTimeout = window.requestAnimationFrame(function () {
$close.click();
});
},
false
);
});