Large Cards Expandable
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="cards-large-expandable js-cards-large-expandable">
<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__rows js-rows">
<!-- Row 1 -->
<div class="cards-large-expandable__row js-row">
<div class="cards-large-group">
<!-- Large Card 1 -->
<div class="card-large card-large--decoration is-odd js-card-large" data-target="1">
<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 1 -->
<!-- Mobile Card 1 Panel -->
<div class="visible-xs-block">
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 1-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-1 -->
<!-- Simple Card 1-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-2 -->
<!-- Simple Card 1-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-3 -->
<!-- Simple Card 1-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
</div>
<!-- /Mobile Card 1 Panel -->
<!-- Large Card 2 -->
<div class="card-large card-large--decoration is-even js-card-large" data-target="2">
<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. Nostrum perspiciatis itaque, aspernatur sapiente dolor molestias quas. Vitae, autem. Voluptas, quod asperiores vitae, qui a accusantium eveniet maxime voluptatem assumenda ea fugit, iste facere. Iusto, sunt unde!</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 2 Panel -->
<div class="visible-xs-block">
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 2-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-1 -->
<!-- Simple Card 2-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-2 -->
<!-- Simple Card 2-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-3 -->
<!-- Simple Card 2-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
</div>
<!-- /Mobile Card 2 Panel -->
<!-- Large Card 3 -->
<div class="card-large card-large--decoration is-odd js-card-large" data-target="3">
<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 3 -->
<!-- Mobile Card 3 Panel -->
<div class="visible-xs-block">
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 3-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-1 -->
<!-- Simple Card 3-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-2 -->
<!-- Simple Card 3-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-3 -->
<!-- Simple Card 3-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
</div>
<!-- /Mobile Card 3 Panel -->
</div>
<!-- Desktop Row 1 Panels -->
<div class="hidden-xs">
<!-- Desktop Card 1 Panel -->
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 1-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-1 -->
<!-- Simple Card 1-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-2 -->
<!-- Simple Card 1-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-3 -->
<!-- Simple Card 1-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 1-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 1-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
<!-- /Desktop Card 1 Panel -->
<!-- Desktop Card 2 Panel -->
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 2-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-1 -->
<!-- Simple Card 2-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-2 -->
<!-- Simple Card 2-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-3 -->
<!-- Simple Card 2-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 2-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 2-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
<!-- /Desktop Card 2 Panel -->
<!-- Desktop Card 3 Panel -->
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 3-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-1 -->
<!-- Simple Card 3-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-2 -->
<!-- Simple Card 3-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-3 -->
<!-- Simple Card 3-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 3-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 3-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
<!-- /Desktop Card 3 Panel -->
</div>
<!--/Desktop Row 1 Panels -->
</div>
<!-- Row 2 -->
<div class="cards-large-expandable__row js-row">
<div class="cards-large-group">
<!-- Large Card 4 -->
<div class="card-large card-large--decoration is-even js-card-large" data-target="4">
<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 4 -->
<!-- Mobile Card 4 Panel -->
<div class="visible-xs-block">
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 4-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-1 -->
<!-- Simple Card 4-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-2 -->
<!-- Simple Card 4-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-3 -->
<!-- Simple Card 4-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
</div>
<!-- /Mobile Card 4 Panel -->
<!-- Large Card 5 -->
<div class="card-large card-large--decoration is-odd js-card-large" data-target="5">
<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 5 -->
<!-- Mobile Card 5 Panel -->
<div class="visible-xs-block">
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 5-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-1 -->
<!-- Simple Card 5-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-2 -->
<!-- Simple Card 5-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-3 -->
<!-- Simple Card 5-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
</div>
<!-- /Mobile Card 5 Panel -->
</div>
<!-- Desktop Row 2 Panels -->
<div class="hidden-xs">
<!-- Desktop Card 4 Panel -->
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 4-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-1 -->
<!-- Simple Card 4-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-2 -->
<!-- Simple Card 4-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-3 -->
<!-- Simple Card 4-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 4-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 4-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
<!-- /Desktop Card 4 Panel -->
<!-- Desktop Card 5 Panel -->
<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-links__container">
<div class="panel-links__block panel-links__block--main">
<div class="card-simple-group">
<!-- Simple Card 5-1 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-1 -->
<!-- Simple Card 5-2 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-2 -->
<!-- Simple Card 5-3 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-3</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-3 -->
<!-- Simple Card 5-4 -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Simple Card 5-4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- /Simple Card 5-4 -->
</div>
</div>
<div class="panel-links__block panel-links__block--sidebar">
<!-- Promo Card -->
<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
<div class="promo-card__media"></div>
<div class="promo-card__body">
<div class="promo-card__title">Promo Card</div>
<div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
</div>
<div class="promo-card__footer">
<button class="btn btn-primary">
Lorem ipsum
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
</a>
<!-- /Promo Card - Dark -->
<!-- /Promo Card -->
</div>
</div>
</div>
<!-- /LINKS PANEL -->
<!-- /Desktop Card 5 Panel -->
</div>
<!--/Desktop Row 2 Panels -->
</div>
</div>
</div>
<div class="text-center u-m-2xl">
<a href="#" class="btn btn-default">
Optional Button
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
.cards-large-expandable {
margin-bottom: 2.4rem;
}
.cards-large-expandable__header {
display: flex;
justify-content: space-between;
}
.cards-large-expandable__header-actions {
justify-self: flex-end;
}
// Toggle see all views
.cards-large-expandable__rows {
@media (min-width: $breakpoint-tablet) {
&.is-reduced {
.cards-large-expandable__row:not(:first-child) {
display: none;
}
}
}
}
$(function () {
const $component = $(".js-cards-large-expandable");
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
);
});