<section class="people-card-grid" aria-labelledby="peopleCardGridHeading">
<h2 class="people-card-grid__heading" id="peopleCardGridHeading">
Leadership Cards
</h2>
<div class="people-card-grid__people-content-grid" data-module="peopleCard">
<!-- if modal exist add the data attributes and add the class people-card-grid__person--modal-->
<a class="people-card-grid__person people-card-grid__person--modal " role="button" tabindex="0" href="#" data-name="Firstname Lastname" data-position="Position/Title" data-bio="
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.
Nullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.
Proin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.
Fusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.
Sed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio." data-micromodal-trigger="modal-people-card-grid">
<!-- Display people-card-grid__image if image exists -->
<div class="people-card-grid__image">
<img src="http://via.placeholder.com/150" alt="Firstname Lastname" />
</div>
<div class="people-card-grid__content">
<h3 class="people-card-grid__name">Firstname Lastname</h3>
<div class="people-card-grid__position">Position/Title</div>
<span class="people-card-grid__link">Call to Action</span>
</div>
</a>
<!-- if modal exist add the data attributes and add the class people-card-grid__person--modal-->
<a class="people-card-grid__person people-card-grid__person--modal " role="button" tabindex="0" href="#" data-name="Firstname Lastname" data-position="Position/Title" data-bio="
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.
Nullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.
Proin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.
Fusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.
Sed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio." data-micromodal-trigger="modal-people-card-grid">
<!-- Display people-card-grid__image if image exists -->
<div class="people-card-grid__image">
<img src="http://via.placeholder.com/150" alt="Firstname Lastname" />
</div>
<div class="people-card-grid__content">
<h3 class="people-card-grid__name">Firstname Lastname</h3>
<div class="people-card-grid__position">Position/Title</div>
<span class="people-card-grid__link">Call to Action</span>
</div>
</a>
<!-- if modal exist add the data attributes and add the class people-card-grid__person--modal-->
<a class="people-card-grid__person people-card-grid__person--modal " role="button" tabindex="0" href="#" data-name="Firstname Lastname1" data-position="Position/Title" data-bio="
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.
<br><br><br>
Nullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.
Proin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.
Fusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.
Sed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio." data-micromodal-trigger="modal-people-card-grid">
<!-- Display people-card-grid__image if image exists -->
<div class="people-card-grid__image">
<img src="http://via.placeholder.com/150" alt="Firstname Lastname1" />
</div>
<div class="people-card-grid__content">
<h3 class="people-card-grid__name">Firstname Lastname1</h3>
<div class="people-card-grid__position">Position/Title</div>
<span class="people-card-grid__link">Call to Action</span>
</div>
</a>
<!-- if modal exist add the data attributes and add the class people-card-grid__person--modal-->
<a class="people-card-grid__person " role="button" tabindex="0" href="#" target="_blank">
<!-- Display people-card-grid__image if image exists -->
<div class="people-card-grid__image">
<img src="http://via.placeholder.com/150" alt="Firstname Lastname" />
</div>
<div class="people-card-grid__content">
<h3 class="people-card-grid__name">Firstname Lastname</h3>
<div class="people-card-grid__position">Position/Title</div>
<span class="people-card-grid__link">Call to Action</span>
</div>
</a>
<!-- if modal exist add the data attributes and add the class people-card-grid__person--modal-->
<a class="people-card-grid__person " role="button" tabindex="0" href="#" target="_blank">
<!-- Display people-card-grid__image if image exists -->
<div class="people-card-grid__image">
<img src="http://via.placeholder.com/150" alt="Firstname Lastname" />
</div>
<div class="people-card-grid__content">
<h3 class="people-card-grid__name">Firstname Lastname</h3>
<div class="people-card-grid__position">Position/Title</div>
<span class="people-card-grid__link">Call to Action</span>
</div>
</a>
</div>
<!-- Add modal if exist -->
<div class="modal micromodal-slide" id="modal-people-card-grid" aria-hidden="true">
<div class="modal-people-grid__overlay" tabindex="-1" data-micromodal-close>
<div class="modal-people-grid__container" role="dialog" aria-modal="true" aria-labelledby="modal-people-card-grid-name">
<header class="modal-people-grid__header">
<h2 class="modal-people-grid__title" id="modal-people-card-grid-name">
Micromodal
</h2>
<div class="modal-people-grid__position" id="modal-people-card-grid-position"></div>
<button class="modal-people-grid__close" aria-label="Close modal" data-micromodal-close></button>
</header>
<main class="modal-people-grid__bio" id="modal-people-card-grid-bio">
</main>
<button type="button" class="btn btn--primary modal-people-grid__show-more">Show More</button>
</div>
</div>
</div>
</section>
<section class="people-card-grid" aria-labelledby="peopleCardGridHeading">
<h2 class="people-card-grid__heading" id="peopleCardGridHeading">
{{heading}}
</h2>
<div class="people-card-grid__people-content-grid" data-module="peopleCard">
{{#json personCards}}
{{#each this}}
<!-- if modal exist add the data attributes and add the class people-card-grid__person--modal-->
<a
class="people-card-grid__person {{#unless link}} people-card-grid__person--modal {{/unless}}"
role="button"
tabindex="0"
{{#if link }}
href="{{link}}"
target="_blank"
{{else}}
href="#"
data-name="{{name}}"
data-position="{{position}}"
data-bio="{{bio}}"
data-micromodal-trigger="modal-people-card-grid"
{{/if}}
>
<!-- Display people-card-grid__image if image exists -->
<div class="people-card-grid__image">
<img src="{{image}}" alt="{{name}}" />
</div>
<div class="people-card-grid__content">
<h3 class="people-card-grid__name">{{name}}</h3>
<div class="people-card-grid__position">{{position}}</div>
<span class="people-card-grid__link">{{linkLabel}}</span>
</div>
</a>
{{/each}}
{{/json}}
</div>
<!-- Add modal if exist -->
<div class="modal micromodal-slide" id="modal-people-card-grid" aria-hidden="true">
<div class="modal-people-grid__overlay" tabindex="-1" data-micromodal-close>
<div
class="modal-people-grid__container"
role="dialog"
aria-modal="true"
aria-labelledby="modal-people-card-grid-name"
>
<header class="modal-people-grid__header">
<h2 class="modal-people-grid__title" id="modal-people-card-grid-name">
Micromodal
</h2>
<div class="modal-people-grid__position" id="modal-people-card-grid-position"></div>
<button
class="modal-people-grid__close"
aria-label="Close modal"
data-micromodal-close
></button>
</header>
<main class="modal-people-grid__bio" id="modal-people-card-grid-bio">
</main>
<button type="button" class="btn btn--primary modal-people-grid__show-more">Show More</button>
</div>
</div>
</div>
</section>
{
"heading": "Leadership Cards",
"personCards": [
{
"image": "http://via.placeholder.com/150",
"name": "Firstname Lastname",
"position": "Position/Title",
"linkLabel": "Call to Action",
"link": "",
"bio": "\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.\n\nNullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.\n\nProin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.\n\nFusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.\n\nSed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio."
},
{
"image": "http://via.placeholder.com/150",
"name": "Firstname Lastname",
"position": "Position/Title",
"linkLabel": "Call to Action",
"link": "",
"bio": "\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.\n\nNullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.\n\nProin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.\n\nFusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.\n\nSed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio."
},
{
"image": "http://via.placeholder.com/150",
"name": "Firstname Lastname1",
"position": "Position/Title",
"linkLabel": "Call to Action",
"link": "",
"bio": "\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.\n<br><br><br>\nNullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.\n\nProin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.\n\nFusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.\n\nSed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio."
},
{
"image": "http://via.placeholder.com/150",
"name": "Firstname Lastname",
"position": "Position/Title",
"linkLabel": "Call to Action",
"link": "#",
"bio": "\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.\n\nNullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.\n\nProin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.\n\nFusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.\n\nSed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio."
},
{
"image": "http://via.placeholder.com/150",
"name": "Firstname Lastname",
"position": "Position/Title",
"linkLabel": "Call to Action",
"link": "#",
"bio": "\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante ac arcu blandit feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit velit vitae enim porta, sit amet tincidunt mauris luctus. Maecenas consequat libero a felis sodales, id feugiat lectus vestibulum. Mauris non ipsum ullamcorper, finibus turpis id, aliquet magna. Cras justo leo, finibus vel metus sollicitudin, pulvinar convallis elit. Donec in nulla ut diam lobortis ornare. Morbi lacinia faucibus erat, quis iaculis dui commodo sed. Nam elementum enim sed justo vehicula varius. Vestibulum aliquet metus non urna blandit auctor. Donec porttitor iaculis euismod. Phasellus vitae dolor libero. Nulla eget tellus ultrices, vulputate sem eu, vehicula arcu.\n\nNullam eu diam sed sapien venenatis pharetra id eget felis. Vivamus ac luctus justo, a semper erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim scelerisque posuere. Ut ultrices volutpat euismod. Quisque finibus dui purus, in lacinia lectus laoreet nec. Nullam condimentum gravida mi, at facilisis tellus imperdiet et. Integer ut nunc porttitor, consequat turpis non, rutrum purus. Sed rhoncus, ipsum at egestas commodo, justo ex vestibulum metus, nec viverra mauris odio eu ex. Vivamus tortor est, viverra in sapien rhoncus, porttitor rhoncus enim. In sit amet dapibus eros, vel eleifend leo. Mauris fermentum turpis eu massa auctor, nec molestie ligula semper. Integer non ipsum eu dolor ultrices dignissim. Sed lacinia laoreet nisi, quis consectetur nibh vulputate non. Quisque lacinia nulla erat, non hendrerit nibh tempus ut.\n\nProin cursus nisi at neque posuere consequat. Donec ut magna lorem. Morbi laoreet orci justo, id gravida erat pretium ut. Vestibulum interdum accumsan ligula, et sagittis odio lacinia id. Vivamus quis dignissim orci. Mauris at sapien nisi. In vestibulum lorem ac urna blandit, vitae scelerisque lacus faucibus. Sed efficitur erat dapibus est iaculis, sit amet finibus elit vulputate. Sed vitae justo ac ipsum facilisis tempus. Vivamus erat nunc, ornare sed ante vitae, ultricies convallis metus.\n\nFusce ultrices mi et magna finibus, eu ornare urna egestas. Suspendisse rhoncus rhoncus efficitur. Sed eu tincidunt nibh, sed malesuada lorem. Nullam tincidunt pellentesque lorem, ut mollis eros viverra id. Suspendisse in iaculis risus. Nulla venenatis porta orci sed dapibus. Nulla eu elit et ipsum fringilla porttitor. Vestibulum malesuada eros vel tellus tempus efficitur.\n\nSed finibus semper nunc. Donec lobortis tellus eros, eu bibendum dui gravida sit amet. Curabitur lacinia imperdiet sagittis. Sed tristique pretium ornare. Praesent nec suscipit enim. Curabitur faucibus tempus augue. Aenean ac ultricies odio."
}
]
}
import { Component } from '@verndale/core'
import MicroModal from 'micromodal'
class PeopleCardGrid extends Component {
constructor(el) {
super(el)
}
setupDefaults() {
this.dom = {
cards: [...this.el.querySelectorAll('.people-card-grid__person--modal')],
modalTitle: document.getElementById('modal-people-card-grid-name'),
modalPosition: document.getElementById('modal-people-card-grid-position'),
modalBio: document.getElementById('modal-people-card-grid-bio'),
modal: document.getElementById('modal-people-card-grid'),
modalShowMore: document.querySelector('.modal-people-grid__show-more')
}
this.showMoreActive = 'modal-people-grid__bio--expanded'
this.showMoreExpandedBtn = 'btn--outline'
this.showMoreLabel = 'Show More'
this.showLessLabel = 'Show Less'
}
addListeners() {
this.dom.cards.forEach((card) => {
card.addEventListener('click', this.handleClick.bind(this))
card.addEventListener('keyup', this.handleEnter.bind(this))
})
this.dom.modalShowMore.addEventListener(
'click',
this.handleShowMore.bind(this)
)
MicroModal.init({
disableScroll: true,
onClose: () => this.resetModalBtnLabel() // [2]
})
}
openModal(e) {
MicroModal.show('modal-people-card-grid')
this.dom.modalTitle.innerHTML = e.currentTarget.dataset.name
this.dom.modalPosition.innerHTML = e.currentTarget.dataset.position
this.dom.modalBio.innerHTML = e.currentTarget.dataset.bio
}
resetModalBtnLabel() {
this.dom.modalBio.classList.remove(this.showMoreActive)
this.dom.modalShowMore.classList.remove(this.showMoreExpandedBtn)
this.changeShowMoreBtnLabel()
}
addToggleClass(element, className) {
element.classList.toggle(className)
}
changeShowMoreBtnLabel() {
if (this.dom.modalShowMore.classList.contains(this.showMoreExpandedBtn)) {
this.dom.modalShowMore.innerHTML = this.showLessLabel
return
}
this.dom.modalShowMore.innerHTML = this.showMoreLabel
}
handleShowMore() {
this.addToggleClass(this.dom.modalBio, this.showMoreActive)
this.addToggleClass(this.dom.modalShowMore, this.showMoreExpandedBtn)
this.changeShowMoreBtnLabel()
}
handleEnter(e) {
if (e.keyCode === 13) {
this.openModal(e)
}
}
handleClick(e) {
this.openModal(e)
}
}
export default PeopleCardGrid
@import '../theme', 'variables';
.people-card-grid__heading {
color: $primary-color;
margin-bottom: 1.875rem;
font-size: 2.75rem;
line-height: 1.09;
@include mq(tablet) {
margin-bottom: 3.75rem;
max-width: calc(66% - 3.1875rem);
}
}
.people-card-grid__people-content-grid {
display: flex;
gap: 44px;
flex-wrap: wrap;
justify-content: center;
@include mq(tablet) {
grid-template-columns: repeat(2, 1fr);
}
@include mq(desktop) {
grid-template-columns: repeat(3, 1fr);
}
}
.people-card-grid__person {
display: flex;
flex-direction: row;
cursor: pointer;
padding: 30px 40px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
text-decoration: none;
justify-content: center;
@include mq(tablet) {
width: calc(50% - 22px);
}
@include mq(desktop) {
width: calc(33.33% - 29.33px);
}
&:hover {
box-shadow: 0 0.9375rem 3.125rem 0 rgba(0, 0, 0, 0.2);
transform: translateY(-3px);
.people-card-grid__link {
text-decoration: underline;
}
}
}
.people-card-grid__image {
width: 80px;
height: 80px;
margin-right: 25px;
@include mq(desktop) {
width: 150px;
height: 150px;
}
img {
border-radius: 50%;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
display: block;
flex-shrink: 0;
min-height: 5rem;
min-width: 5rem;
object-fit: cover;
@include mq(desktop) {
min-height: 9.375rem;
min-width: 9.375rem;
}
}
}
.people-card-grid__name {
font-size: 24px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: $primary-color;
}
.people-card-grid__position {
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.78;
letter-spacing: normal;
color: $primary-color;
}
.people-card-grid__link {
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $link-color;
}
.people-card-grid-modal {
position: fixed;
background-color: rgba(255, 255, 255, 0.8);
height: 100vh;
width: 100vw;
top: 0;
left: 0;
z-index: 9999;
padding: 5.5625rem;
overflow: auto;
}
.people-card-grid-modal__inner {
background-color: #fff;
border-radius: 0.25rem;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
padding: 1.875rem 1.875rem 1.5625rem;
position: relative;
@include mq(tablet) {
padding: 7.1875rem 8.5625rem 7.9375rem;
}
}
/**************************\
Basic Modal Styles
\**************************/
.modal {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}
.modal-people-grid__overlay {
background-color: rgba(255, 255, 255, 0.8);
height: 100vh;
left: 0;
overflow: auto;
padding: 4.3125rem 1.25rem;
position: fixed;
top: 0;
width: 100vw;
z-index: 99999;
@include mq(tablet) {
padding: 5.5625rem;
}
@include mq(desktop) {
padding-top: 8.75rem;
}
}
.modal-people-grid__container {
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.2);
padding: 1.875rem 1.875rem 1.5625rem;
@include mq(tablet) {
padding: 5.5625rem;
}
@include mq(desktop) {
padding: 7.1875rem 8.5625rem 7.9375rem;
}
}
.modal-people-grid__header {
display: flex;
flex-direction: column;
}
.modal-people-grid__title {
margin-top: 0;
font-weight: 600;
line-height: 1.25;
color: $primary-color;
box-sizing: border-box;
font-size: 1.875rem;
font-weight: 600;
line-height: 1.13;
margin-bottom: 0.5rem;
@include mq(desktop) {
font-size: 1.25rem;
font-size: 2.75rem;
line-height: 1.25;
margin-bottom: 0.625rem;
}
}
.modal-people-grid__position {
font-size: 1.125rem;
color: $primary-color;
margin: 0 0 0.375rem;
@include mq(desktop) {
margin-bottom: 2.25rem;
}
}
.modal-people-grid__bio {
font-size: 1.125rem;
line-height: 1.78;
color: $modal-content-color;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
@include mq(desktop) {
-webkit-line-clamp: unset;
}
}
.modal-people-grid__bio--expanded {
-webkit-line-clamp: unset;
}
.modal-people-grid__close {
background: transparent;
border: 0;
position: absolute;
right: 0.78125rem;
top: 0.78125rem;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
font-size: 15px;
color: $primary-color;
transition: background-color 0.2s ease-in-out;
@include mq(tablet) {
font-size: 20px;
right: 24px;
top: 1.875rem;
}
&:hover {
background-color: rgba(6, 132, 123, 0.6);
}
}
.modal-people-grid__show-more {
align-items: center;
appearance: none;
background-color: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
font-size: 1.125rem;
font-weight: 600;
justify-content: center;
line-height: normal;
min-height: 3.75rem;
min-width: 16.25rem;
padding: 1.0625rem 1.875rem 1.125rem;
position: relative;
text-align: center;
text-decoration: none;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
width: 100%;
margin-top: 1.25rem;
@include mq(desktop) {
display: none;
}
}
.modal-people-grid__header .modal-people-grid__close:before {
content: '\2715';
}
/**************************\
Demo Animation Style
\**************************/
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.micromodal-slide {
display: none;
}
.micromodal-slide.is-open {
display: block;
}
.micromodal-slide[aria-hidden='false'] .modal-people-grid__overlay {
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden='false'] .modal-people-grid__container {
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden='true'] .modal-people-grid__overlay {
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden='true'] .modal-people-grid__container {
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide .modal-people-grid__container,
.micromodal-slide .modal-people-grid__overlay {
will-change: transform;
}
$primary-color: map-get($theme-colors, "primary") !default;
$modal-content-color: map-get($theme-colors, "primary-gray") !default;
$link-color: map-get($theme-colors, "critical") !default;
This component is has a required link that can be an anchor or a modal. To use like a modal you must add the data attributes: data-name, data-position and data-bio. For a link you need to add a src to the anchor and changes the attributes in the anchor
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import "../../node_modules/@verndale/front-end-components/lib/people-card-grid/styles";Copy and paste to your project any of the markup in the people-card-grid variations - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. The people-card-grid has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$primary-color
$modal-content-color
$link-color
***You always need to set your overrides before the import of you component - for example:***
```scss
$primary-color: #808080;
$modal-content-color: #808080;
$link-color: #101010;
@import "../../node_modules/@verndale/front-end-components/lib/people-card-grid/styles";