For Me
This component elements which may affect an embedded demo. Open the
preview in a new tab
.
<div class="for-me js-for-me">
<div>
<h2 class="for-me__header">For Me</h2>
</div>
<!-- Desktop -->
<div class="visible-lg-block">
<div class="for-me__list-wrap js-row">
<div class="for-me__list">
<!-- Card 1 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-1">
<span class="for-me__item-head"><span class="badge badge-info">NEW</span></span>
<span class="for-me__item-title">Pay & Time</span>
</a>
</div>
<!-- /Card 1 -->
<!-- Card 2 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-2">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Return to Work</span>
</a>
</div>
<!-- /Card 2 -->
<!-- Card 3 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-3">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Collaborate with coworkers</span>
</a>
</div>
<!-- /Card 3 -->
<!-- Card 4 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-4">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Pay & Time</span>
</a>
</div>
<!-- /Card 4 -->
</div>
<div class="for-me__panels">
<!-- Panel 1 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-1">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 1 -->
<!-- Panel 2 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-2">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 2 -->
<!-- Panel 3 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-3">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 3 -->
<!-- Panel 4 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-4">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 4 -->
</div>
<div class="for-me__list">
<!-- Card 5 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-5">
<span class="for-me__item-head"><span class="badge badge-info">NEW</span></span>
<span class="for-me__item-title">Have your check-in conversation</span>
</a>
</div>
<!-- /Card 5 -->
<!-- Card 6 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-6">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
</a>
</div>
<!-- /Card 6 -->
<!-- Card 7 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-7">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Schedule Goals</span>
</a>
</div>
<!-- /Card 7 -->
<!-- Card 8 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-8">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Return to Work</span>
</a>
</div>
<!-- /Card 8 -->
</div>
<div class="for-me__panels">
<!-- Panel 5 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-5">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 5 -->
<!-- Panel 6 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-6">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 6 -->
<!-- Panel 7 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-7">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 7 -->
<!-- Panel 8 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-8">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 8 -->
</div>
</div>
</div>
<!-- /Desktop -->
<!-- Mobile -->
<div class="hidden-lg">
<div class="for-me__list-wrap js-row">
<div class="for-me__list">
<!-- Card 1 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-1">
<span class="for-me__item-head"><span class="badge badge-info">NEW</span></span>
<span class="for-me__item-title">Pay & Time</span>
</a>
</div>
<!-- /Card 1 -->
<!-- Panel 1 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-1">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 1 -->
<!-- Card 2 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-2">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Return to Work</span>
</a>
</div>
<!-- /Card 2 -->
<!-- Panel 2 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-2">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 2 -->
<!-- Card 3 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-3">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Collaborate with coworkers</span>
</a>
</div>
<!-- /Card 3 -->
<!-- Panel 3 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-3">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 3 -->
<!-- Card 4 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-4">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Pay & Time</span>
</a>
</div>
<!-- /Card 4 -->
<!-- Panel 4 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-4">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 4 -->
<!-- Card 5 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-5">
<span class="for-me__item-head"><span class="badge badge-info">NEW</span></span>
<span class="for-me__item-title">Have your check-in conversation</span>
</a>
</div>
<!-- /Card 5 -->
<!-- Panel 5 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-5">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 5 -->
<!-- Card 6 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-6">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
</a>
</div>
<!-- /Card 6 -->
<!-- Panel 6 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-6">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 6 -->
<!-- Card 7 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-7">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Schedule Goals</span>
</a>
</div>
<!-- /Card 7 -->
<!-- Panel 7 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-7">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 7 -->
<!-- Card 8 -->
<div class="for-me__item">
<a href="#" class="for-me__link js-open" data-target="for-me-8">
<span class="for-me__item-head"></span>
<span class="for-me__item-title">Return to Work</span>
</a>
</div>
<!-- /Card 8 -->
<!-- Panel 8 -->
<div class="for-me__panel panel js-panel" data-panel="for-me-8">
<a href="#" class="panel__close js-close">
<i class="fa fa-close"></i>
</a>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
</div>
<div class="col-xs-12 col-lg-4">
<p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
<p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
</div>
</div>
</div>
<!-- /Panel 8 -->
</div>
</div>
</div>
<!-- /Mobile -->
</div>
.for-me {
display: flex;
flex-direction: column;
margin-bottom: 8rem;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
}
}
.for-me__header {
@include typeDisplay(true);
color: $color-base-white;
background-color: $color-blue-medium;
padding: 2.4rem;
padding-right: 7.6rem;
min-height: 15rem;
display: inline-block;
text-transform: uppercase;
min-width: 22.4rem;
}
.for-me__list-wrap {
flex: 1;
@media (min-width: $breakpoint-desktop) {
padding-left: 6.4rem;
background-image: repeating-linear-gradient(
to right,
rgba($color-grey-light, 0.6),
rgba($color-grey-light, 0.6) 32px,
rgba($color-grey-light, 0.3) 32px,
rgba($color-grey-light, 0.3) 64px,
rgba($color-grey-light, 0.15) 64px,
rgba($color-grey-light, 0.15)
);
background-repeat: no-repeat;
}
}
.for-me__list {
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
}
}
.for-me__item {
flex: 0 0 25%;
}
.for-me__link {
@include typeTitle(true);
position: relative;
height: 100%;
color: $color-base-white;
padding: 2.4rem;
display: flex;
flex-direction: column;
&:hover {
color: $color-blue-light;
text-decoration: none;
}
&.is-active {
color: $color-blue-medium;
text-decoration: underline;
// Triangle
&::after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 4.8rem;
width: 0;
height: 0;
border-left: 1.2rem solid transparent;
border-right: 1.2rem solid transparent;
border-bottom: 2.4rem solid $color-base-grey;
}
}
}
.for-me__item-head {
height: 2.4rem;
margin-bottom: 0.4rem;
}
.for-me__panel {
// position: relative;
// background-color: white;
// margin: 0 2.4rem;
// padding: 2.4rem 3.2rem;
}
.for-me__close {
// position: absolute;
// top: 1.2rem;
// right: 1.2rem;
}
$(function () {
const $component = $(".js-for-me");
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("[data-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 (e) {
e.preventDefault();
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
);
});