Card Expandable List
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-expandable-list js-cards-expandable-list">
<h2 class="component-title">Component Title</h2>
<div class="card-expandable-list__header">
<div class="card-expandable-list__header-intro">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea, eligendi!</p>
</div>
</div>
<!-- Desktop Row -->
<div class="visible-lg-block">
<div class="card-expandable-list__rows js-rows">
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Desktop Card 1 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-0">
<div class="card__header">
<h3 class="card__title">Card 1 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 1 -->
<!-- Desktop Card 2 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-1">
<div class="card__header">
<h3 class="card__title">Card 2 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 2 -->
<!-- Desktop Card 3 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-2">
<div class="card__header">
<h3 class="card__title">Card 3 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 3 -->
<!-- Desktop Card 4 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-3">
<div class="card__header">
<h3 class="card__title">Card 4 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 4 -->
</div>
<!-- Desktop Row Panels -->
<!-- Desktop Card 1 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList0-0" data-panel="cardExpandableList0-0">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 1 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 1 Panel -->
<!-- Desktop Card 2 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList0-1" data-panel="cardExpandableList0-1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 2 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 2 Panel -->
<!-- Desktop Card 3 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList0-2" data-panel="cardExpandableList0-2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 3 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 3 Panel -->
<!-- Desktop Card 4 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList0-3" data-panel="cardExpandableList0-3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 4 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 4 Panel -->
<!-- /Desktop Row Panels -->
</div>
</div>
</div>
<!-- /Desktop Row -->
<!-- Mobile Rows -->
<div class="hidden-lg">
<div class="card-expandable-list__rows js-rows">
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 1 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-0">
<div class="card__header">
<h3 class="card__title">Card 1 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 1 -->
<!-- Mobile Card 1 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList0-0" data-panel="cardExpandableList0-0">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 1 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 1 Panel -->
</div>
</div>
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 2 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-1">
<div class="card__header">
<h3 class="card__title">Card 2 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 2 -->
<!-- Mobile Card 2 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList0-1" data-panel="cardExpandableList0-1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 2 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 2 Panel -->
</div>
</div>
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 3 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-2">
<div class="card__header">
<h3 class="card__title">Card 3 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 3 -->
<!-- Mobile Card 3 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList0-2" data-panel="cardExpandableList0-2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 3 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 3 Panel -->
</div>
</div>
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 4 -->
<a href="#" class="card js-open" data-target="cardExpandableList0-3">
<div class="card__header">
<h3 class="card__title">Card 4 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 4 -->
<!-- Mobile Card 4 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList0-3" data-panel="cardExpandableList0-3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 4 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 4 Panel -->
</div>
</div>
</div>
</div>
<!-- /Mobile Rows -->
</div>
<hr />
<div class="card-expandable-list js-cards-expandable-list">
<h2 class="component-title">Component Title (5 Card per row)</h2>
<div class="card-expandable-list__header">
<div class="card-expandable-list__header-intro">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea, eligendi!</p>
</div>
</div>
<!-- Desktop Row -->
<div class="visible-lg-block">
<div class="card-expandable-list__rows js-rows">
<div class="card-expandable-list__row js-row">
<div class="card-group card-group--5-items">
<!-- Desktop Card 1 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-0">
<div class="card__header">
<h3 class="card__title">Card 1 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 1 -->
<!-- Desktop Card 2 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-1">
<div class="card__header">
<h3 class="card__title">Card 2 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 2 -->
<!-- Desktop Card 3 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-2">
<div class="card__header">
<h3 class="card__title">Card 3 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 3 -->
<!-- Desktop Card 4 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-3">
<div class="card__header">
<h3 class="card__title">Card 4 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 4 -->
<!-- Desktop Card 5 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-4">
<div class="card__header">
<h3 class="card__title">Card 5 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Desktop Card 5 -->
</div>
<!-- Desktop Row Panels -->
<!-- Desktop Card 1 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList1-0" data-panel="cardExpandableList1-0">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 1 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 1 Panel -->
<!-- Desktop Card 2 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList1-1" data-panel="cardExpandableList1-1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 2 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 2 Panel -->
<!-- Desktop Card 3 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList1-2" data-panel="cardExpandableList1-2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 3 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 3 Panel -->
<!-- Desktop Card 4 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList1-3" data-panel="cardExpandableList1-3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 4 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 4 Panel -->
<!-- Desktop Card 5 Panel -->
<div class="panel panel-info panel-info-desktop js-panel js-panel-cardExpandableList1-4" data-panel="cardExpandableList1-4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 5 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Desktop Card 5 Panel -->
<!-- /Desktop Row Panels -->
</div>
</div>
</div>
<!-- /Desktop Row -->
<!-- Mobile Rows -->
<div class="hidden-lg">
<div class="card-expandable-list__rows js-rows">
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 1 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-0">
<div class="card__header">
<h3 class="card__title">Card 1 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 1 -->
<!-- Mobile Card 1 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList1-0" data-panel="cardExpandableList1-0">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 1 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 1 Panel -->
</div>
</div>
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 2 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-1">
<div class="card__header">
<h3 class="card__title">Card 2 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 2 -->
<!-- Mobile Card 2 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList1-1" data-panel="cardExpandableList1-1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 2 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 2 Panel -->
</div>
</div>
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 3 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-2">
<div class="card__header">
<h3 class="card__title">Card 3 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 3 -->
<!-- Mobile Card 3 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList1-2" data-panel="cardExpandableList1-2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 3 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 3 Panel -->
</div>
</div>
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 4 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-3">
<div class="card__header">
<h3 class="card__title">Card 4 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 4 -->
<!-- Mobile Card 4 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList1-3" data-panel="cardExpandableList1-3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 4 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 4 Panel -->
</div>
</div>
<div class="card-expandable-list__row js-row">
<div class="card-group">
<!-- Mobile Card 5 -->
<a href="#" class="card js-open" data-target="cardExpandableList1-4">
<div class="card__header">
<h3 class="card__title">Card 5 Title lorem ipsum dolor sit amet</h3>
</div>
<div class="card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat modi ullam nam?</div>
<div class="card__footer">
<span class="card__action card__toggle">
Learn More
<i class="fa fa-plus"></i>
</span>
</div>
</a>
<!-- /Mobile Card 5 -->
<!-- Mobile Card 5 Panel -->
<div class="panel panel-info panel-info-mobile js-panel js-panel-cardExpandableList1-4" data-panel="cardExpandableList1-4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<p><b>Panel 5 Rich Text Area</b></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit harum quod laudantium voluptates sunt doloremque? Repellendus deserunt, commodi suscipit, iste, quisquam natus amet sint cumque incidunt magnam quibusdam architecto accusamus.</p>
<p>Autem maxime dolor est possimus, placeat accusantium officiis provident natus eos eaque! Tempora necessitatibus modi porro harum cum. Animi aspernatur exercitationem ipsam fugit repellat nihil et voluptatibus itaque, dolores vitae.</p>
<p>Provident iure nemo minus beatae quasi nulla commodi. Eum totam quos vel magni possimus reiciendis dignissimos ipsum? Dolorem sapiente, nemo obcaecati error modi ab? Magni, quos dicta! Voluptates, voluptatem ducimus!</p>
</div>
<!-- /Mobile Card 5 Panel -->
</div>
</div>
</div>
</div>
<!-- /Mobile Rows -->
</div>
.card-expandable-list {
margin-bottom: 4rem;
}
.card-expandable-list__row {
margin-bottom: 2.4rem;
}
.card {
display: flex;
flex-direction: column;
background-color: $color-base-white;
border: 1px solid $color-grey-dark;
border-top: 4px solid $color-blue-medium;
color: $color-blue-dark;
padding: 1.2rem;
position: relative;
&:hover,
&:focus {
outline: 0;
text-decoration: none;
color: $color-blue-medium;
}
&.is-active {
background-color: $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;
}
}
}
.card__header {
margin-bottom: 1.2rem;
}
.card__title {
@include typeHeadline(true);
overflow-wrap: break-word;
}
.card__desc {
flex: 1;
margin-bottom: 2.4rem;
overflow-wrap: break-word;
}
.card__action {
@include typeCaption(true);
color: $color-blue-medium;
}
.card__toggle {
.card.is-active & {
display: none;
}
}
// Card grouping layout
.card-group {
display: flex;
flex-wrap: wrap;
@media (min-width: $breakpoint-desktop) {
margin-left: -3.2rem;
}
> .card {
flex: 1 0 100%;
@media (min-width: $breakpoint-desktop) {
flex: 0 0 calc(25% - 3.2rem);
max-width: calc(25% - 3.2rem);
margin-left: 3.2rem;
}
}
&.card-group--5-items {
> .card {
@media (min-width: $breakpoint-desktop) {
flex: 0 0 calc(20% - 3.2rem);
max-width: calc(20% - 3.2rem);
}
}
}
}
$(function () {
const $component = $(".js-cards-expandable-list");
const $cards = $component.find(".js-open");
const $close = $component.find(".js-close");
// 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").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();
});
// 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
);
});