Small 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="card-small-expandable js-cards-small-expandable">
<h2 class="component-title">Small Card Expandable</h2>
<div class="cards-small-expandable__header">
<div class="cards-small-expandable__header-intro">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea, eligendi!</p>
</div>
<div class="cards-small-expandable__header-actions">
<a href="#" class="btn btn-link visible-lg js-toggle-card-small-expandable-view" data-active-content="See less <i class='fa fa-minus'></i>"
>See all
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<!-- Desktop Rows -->
<div class="visible-lg-block">
<div class="cards-small-expandable__rows js-rows">
<!-- Desktop Row 1 -->
<div class="cards-small-expandable__row js-row">
<div class="cards-small-group">
<!-- Desktop Card 1 -->
<div class="card-small js-open-small-card" data-target="0">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 1 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Desktop Card 1 -->
<!-- Desktop Card 2 -->
<div class="card-small js-open-small-card" data-target="1">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 2 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Desktop Card 2 -->
<!-- Desktop Card 3 -->
<div class="card-small js-open-small-card" data-target="2">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 3 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Desktop Card 3 -->
<!-- Desktop Card 4 -->
<div class="card-small js-open-small-card" data-target="3">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 4 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Desktop Card 4 -->
<!-- Desktop Card 5 -->
<div class="card-small js-open-small-card" data-target="4">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 5 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Desktop Card 5 -->
</div>
<!-- Row 1 Desktop Panels -->
<!-- Desktop Card 1 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-0" data-panel="0">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 1 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Desktop Card 1 Panel -->
<!-- Desktop Card 2 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 2 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Desktop Card 2 Panel -->
<!-- Desktop Card 3 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 3 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Desktop Card 3 Panel -->
<!-- Desktop Card 4 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 4 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Desktop Card 4 Panel -->
<!-- Desktop Card 5 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 5 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Desktop Card 5 Panel -->
</div>
<!-- /Desktop Row 1 -->
<!-- Desktop Row 2 -->
<div class="cards-small-expandable__row js-row">
<div class="cards-small-group">
<!-- Desktop Card 6 -->
<div class="card-small js-open-small-card" data-target="5">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 6 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Desktop Card 6 -->
<!-- Desktop Card 7 -->
<div class="card-small js-open-small-card" data-target="6">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 7 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Desktop Card 7 -->
</div>
<!-- Row 2 Desktop Panels -->
<!-- Desktop Card 6 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 6 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Desktop Card 6 Panel -->
<!-- Desktop Card 7 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-6" data-panel="6">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 7 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Desktop Card 7 Panel -->
</div>
<!-- /Desktop Row 2 -->
</div>
</div>
<!-- /Desktop Rows -->
<!-- Mobile Rows -->
<div class="hidden-lg">
<div class="cards-small-expandable__rows js-rows">
<!-- Mobile Row 1 -->
<div class="cards-small-expandable__row js-row">
<div class="cards-small-group">
<!-- Mobile Card 1 -->
<div class="card-small js-open-small-card" data-target="0">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 1 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Mobile Card 1 -->
<!-- Mobile Card 2 -->
<div class="card-small js-open-small-card" data-target="1">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 2 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Mobile Card 2 -->
<!-- Mobile Card 1 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-0" data-panel="0">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 1 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Mobile Card 1 Panel -->
<!-- Mobile Card 2 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 2 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Mobile Card 2 Panel -->
</div>
</div>
<!-- Mobile Row 2 -->
<div class="cards-small-expandable__row js-row">
<div class="cards-small-group">
<!-- Mobile Card 3 -->
<div class="card-small js-open-small-card" data-target="2">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 3 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Mobile Card 3 -->
<!-- Mobile Card 4 -->
<div class="card-small js-open-small-card" data-target="3">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 4 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Mobile Card 4 -->
<!-- Mobile Card 3 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 3 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Mobile Card 3 Panel -->
<!-- Mobile Card 4 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 4 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Mobile Card 4 Panel -->
</div>
</div>
<!-- Mobile Row 3 -->
<div class="cards-small-expandable__row js-row">
<div class="cards-small-group">
<!-- Mobile Card 5 -->
<div class="card-small js-open-small-card" data-target="4">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 5 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Mobile Card 5 -->
<!-- Mobile Card 6 -->
<div class="card-small js-open-small-card" data-target="5">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 6 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Mobile Card 6 -->
<!-- Mobile Card 5 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 5 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Mobile Card 5 Panel -->
<!-- Mobile Card 6 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 6 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Mobile Card 6 Panel -->
</div>
</div>
<!-- Mobile Row 4 -->
<div class="cards-small-expandable__row js-row">
<div class="cards-small-group">
<!-- Mobile Card 7 -->
<div class="card-small js-open-small-card" data-target="6">
<div class="card-small__header">
<img src="https://via.placeholder.com/464x261" alt="" class="card-small__image" />
</div>
<div class="card-small__body">
<h4 class="card-small__title">Card 7 Title</h4>
<div class="card-small__content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, laborum quibusdam soluta dicta delectus voluptatem.</p>
</div>
</div>
</div>
<!-- /Mobile Card 7 -->
<!-- Mobile Card 6 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-6" data-panel="6">
<button class="panel__close js-close-small-card">
<i class="fa fa-close"></i>
</button>
<div class="panel-info__intro">
<p>Panel 7 - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
</div>
<div class="panel-info__container">
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--small">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
<div class="panel-info__block panel-info__block--large">
<div class="panel-info__block-title">Lorem ipsum dolor:</div>
<div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
</div>
</div>
<p>
<a href="#">
<b
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Dolorum quibusdam dignissimos
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
<p>
<a href="#">
<b
>Vol uptate ferfawef awe fawe fawef aefaw
<i class="fa fa-long-arrow-right"></i>
</b>
</a>
</p>
</div>
<!-- /Mobile Card 6 Panel -->
</div>
</div>
</div>
</div>
<!-- /Mobile Rows -->
</div>
/* Card - Small
***************/
.card-small {
position: relative;
background-color: $color-base-white;
&.is-active {
background: $color-base-blue;
color: $color-base-white;
// Triangle
&::after {
position: absolute;
z-index: 1;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
content: "";
width: 0;
height: 0;
border-left: 1.2rem solid transparent;
border-right: 1.2rem solid transparent;
border-top: 2.4rem solid $color-base-blue;
}
}
&:hover {
background: $color-base-blue;
color: $color-base-white;
cursor: pointer;
}
}
.card-small__image {
max-width: 100%;
height: auto;
display: block;
}
.card-small__body {
padding: 1.2rem;
}
.card-small__title {
@include typeHeadline(true);
margin: 0 0 1.2rem;
}
// Small Card grouping layout
.cards-small-group {
display: flex;
flex-wrap: wrap;
margin-left: -1.2rem;
@media (min-width: $breakpoint-desktop) {
margin-left: -4rem;
}
> .card-small {
flex: 0 0 calc(50% - 1.2rem);
margin-left: 1.2rem;
@media (min-width: $breakpoint-desktop) {
flex: 0 0 calc(20% - 4rem);
margin-left: 4rem;
}
}
.panel {
margin-left: 1.2rem;
}
}
/* Small Cards Expandable
*************************/
.card-small-expandable {
margin-bottom: 4.2rem;
}
.cards-small-expandable__header {
display: flex;
justify-content: space-between;
}
.cards-small-expandable__header-actions {
align-self: flex-end;
}
// Toggle see all views
.cards-small-expandable__rows {
@media (min-width: $breakpoint-desktop) {
&.is-reduced {
.cards-small-expandable__row:not(:first-child) {
display: none;
}
}
}
}
$(function () {
const $component = $(".js-cards-small-expandable");
const $cards = $(".js-open-small-card");
const $close = $(".js-close-small-card");
const $rows = $component.find(".js-rows");
const $toggleBtn = $(".js-toggle-card-small-expandable-view");
// Expand cards
$cards.on("click", function (e) {
e.preventDefault();
const $activeCard = $(this);
const $target = $component.find(
".js-panel-" + e.currentTarget.dataset.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
$row.find(".js-panel").not($target).find(".js-close-small-card").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
$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;
});
}
});
});
// 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
);
});