Large Cards Expandable (Guidance)
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-alt js-cards-large-expandable-alt">
<h2 class="component-title">Large Card Expandable Title (Optional)</h2>
<div class="cards-large-expandable__header">
<div class="cards-small-expandable__header-intro"></div>
<div class="cards-large-expandable__header-actions">
<a href="#" class="btn btn-link hidden-xs js-toggle-card-large-expandable-view" data-active-content="See less <i class='fa fa-minus'></i>"
>See all
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div class="cards-large-expandable-alt__rows js-rows">
<!-- Row 1 -->
<div class="cards-large-expandable-alt__row js-row">
<div class="cards-large-group">
<!-- Large Card 2 -->
<div class="card-large is-odd js-card-large" data-target="1">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 1</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 2 -->
<!-- Mobile Card 1 Panel -->
<div class="visible-xs-block">
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 1 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
</div>
<!-- /Mobile Card 1 Panel -->
<!-- Large Card 3 -->
<div class="card-large is-even js-card-large" data-target="2">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 2</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 3 -->
<!-- Mobile Card 2 Panel -->
<div class="visible-xs-block">
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 2 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
</div>
<!-- /Mobile Card 2 Panel -->
<!-- Large Card 4 -->
<div class="card-large is-odd js-card-large" data-target="3">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 3</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 4 -->
<!-- Mobile Card 3 Panel -->
<div class="visible-xs-block">
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 3 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
</div>
<!-- /Mobile Card 3 Panel -->
</div>
<!-- Desktop Row 1 Panels -->
<div class="hidden-xs">
<!-- Desktop Card 1 Panel -->
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-1" data-panel="1">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 1 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
<!-- /Desktop Card 1 Panel -->
<!-- Desktop Card 2 Panel -->
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-2" data-panel="2">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 2 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
<!-- /Desktop Card 2 Panel -->
<!-- Desktop Card 3 Panel -->
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-3" data-panel="3">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 3 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
<!-- /Desktop Card 3 Panel -->
</div>
<!--/Desktop Row 1 Panels -->
</div>
<!-- Row 2 -->
<div class="cards-large-expandable-alt__row js-row">
<div class="cards-large-group">
<!-- Large Card 5 -->
<div class="card-large is-even js-card-large" data-target="4">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 4</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 5 -->
<!-- Mobile Card 4 Panel -->
<div class="visible-xs-block">
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 4 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
</div>
<!-- /Mobile Card 4 Panel -->
<!-- Large Card 6 -->
<div class="card-large is-odd js-card-large" data-target="5">
<div class="card-large__badge">
<span class="badge badge--alert">Optional Badge</span>
</div>
<div class="card-large__media">
<img src="https://via.placeholder.com/720x405" alt="" class="card-large__image" />
</div>
<div class="card-large__body">
<h2 class="card-large__title">Large Card 5</h2>
<div class="card-large__desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit expedita nostrum quas dolorum.</p>
</div>
<div class="card-large__actions"></div>
</div>
<div class="card-large__footer">
<p>
<a href="#" class="card-large__action btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<button class="card-large__action card-large__toggle btn btn-link js-open-large-card">
Learn More
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- /Large Card 6 -->
<!-- Mobile Card 5 Panel -->
<div class="visible-xs-block">
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 5 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
</div>
<!-- /Mobile Card 5 Panel -->
</div>
<!-- Desktop Row 2 Panels -->
<div class="hidden-xs">
<!-- Desktop Card 4 Panel -->
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-4" data-panel="4">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 4 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
<!-- /Desktop Card 4 Panel -->
<!-- Desktop Card 5 Panel -->
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-5" data-panel="5">
<button class="panel__close js-close">
<i class="fa fa-close"></i>
</button>
<div class="panel-compound__wrap">
<div class="panel-compound__header">
<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner is-active">
<div class="banner-notification__inner">
<div class="banner-notification__body">
<span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>
</div>
</div>
<!-- /Emergency Banner -->
</div>
<div class="panel-compound__body">
<div class="panel-compound__main">
<p>Panel 5 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
<ul class="step-list">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
<li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
<li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
</ul>
<p>
<a href="#" class="btn btn-secondary btn-link"
>Lorem Ipsum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
<div class="panel-compound__sidebar">
<div>
<p>
<a href="#" class="btn btn-primary">Lorem Ipsum</a>
</p>
<br />
<p>
<b>Useful Resources</b>
</p>
<p>
<a href="#" class="btn btn-link"
>Lorem ipsum dolor
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
<p>
<a href="#" class="btn btn-link"
>Et magnam dolorum
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /COMPOUND PANEL -->
<!-- /Desktop Card 5 Panel -->
</div>
<!--/Desktop Row 2 Panels -->
</div>
</div>
</div>
.cards-large-expandable-alt {
margin-bottom: 4.8rem;
}
.cards-large-expandable-alt__header {
display: flex;
justify-content: space-between;
}
.cards-large-expandable-alt__header-actions {
justify-self: flex-end;
}
// Toggle see all views
.cards-large-expandable-alt__rows {
@media (min-width: $breakpoint-tablet) {
&.is-reduced {
.cards-large-expandable-alt__row:not(:first-child) {
display: none;
}
}
}
}
$(function () {
const $component = $(".js-cards-large-expandable-alt");
const $toggleViewBtn = $component.find(".js-open-large-card");
const $close = $component.find(".js-close");
const $rows = $component.find(".js-rows");
const $seeMoreBtn = $(".js-toggle-card-large-expandable-view");
// Expand cards
$toggleViewBtn.on("click", function (e) {
e.preventDefault();
const $activeCard = $(this).closest(".js-card-large");
const $target = $component.find(".js-panel-" + $activeCard.data("target"));
const $row = $activeCard.closest(".js-row");
if ($target.length && !$activeCard.hasClass("is-active")) {
$activeCard.addClass("is-active");
$target.slideDown();
// Close other panels in row only on tablet+
if (window.matchMedia("(min-width: 768px)").matches) {
$row.find(".js-panel").not($target).find(".js-close").click();
}
}
});
// Collapse card panels
$close.on("click", function () {
const panel = $(this).closest(".js-panel").data("panel");
$component.find("[data-target=" + panel + "]").removeClass("is-active");
$(this).closest(".js-panel").slideUp();
});
// Hide all card rows but first
$rows.addClass("is-reduced");
// Toggle See More
$seeMoreBtn.each(function () {
const $link = $(this);
const activeContent = $link.data("active-content");
const inactiveContent = $link.html();
$link.on("click", function (e) {
e.preventDefault();
$link.toggleClass("is-active");
$rows.toggleClass("is-reduced");
// Toggle link text
if (activeContent) {
$link.html(function () {
return $link.hasClass("is-active") ? activeContent : inactiveContent;
});
}
});
});
// Listen for resize events to close any open panels
var resizeTimeout;
window.addEventListener(
"resize",
function (event) {
if (resizeTimeout) {
window.cancelAnimationFrame(resizeTimeout);
}
resizeTimeout = window.requestAnimationFrame(function () {
$close.click();
});
},
false
);
});