People List Accordion
<div class="people-list-accordion">
<h2 class="component-title">People List Accordion</h2>
<!-- Accordion 1 -->
<div class="accordion">
<div class="accordion__header accordion__control" role="button" data-toggle="collapse" data-target="#accordion-1" aria-expanded="false" aria-controls="accordion-1">
<div class="accordion__title">Category</div>
<div class="accordion__icon"></div>
</div>
<div class="collapse" id="accordion-1">
<div class="accordion__panel">
<div class="people-list-accordion__group">
<div class="people-list-accordion__subtitle">Subcategory</div>
<!-- People List - Light -->
<div class="people-list">
<div class="people-list__inner">
<h2 class="component-title"></h2>
<div class="people-list__grid">
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
</div>
</div>
<!-- /People List - Light -->
<div class="people-list-accordion__actions">
<a href="#" class="btn btn-link"
>Optional Link 1
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 3
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<div class="people-list-accordion__group">
<div class="people-list-accordion__subtitle">Subcategory</div>
<!-- People List - Light -->
<div class="people-list">
<div class="people-list__inner">
<h2 class="component-title"></h2>
<div class="people-list__grid">
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
</div>
</div>
<!-- /People List - Light -->
<div class="people-list-accordion__actions">
<a href="#" class="btn btn-link"
>Optional Link 1
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 3
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion 1 -->
<!-- Accordion 2 -->
<div class="accordion">
<div class="accordion__header accordion__control" role="button" data-toggle="collapse" data-target="#accordion-2" aria-expanded="false" aria-controls="accordion-2">
<div class="accordion__title">Category</div>
<div class="accordion__icon"></div>
</div>
<div class="collapse" id="accordion-2">
<div class="accordion__panel">
<div class="people-list-accordion__group">
<div class="people-list-accordion__subtitle">Subcategory</div>
<!-- People List - Light -->
<div class="people-list">
<div class="people-list__inner">
<h2 class="component-title"></h2>
<div class="people-list__grid">
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
</div>
</div>
<!-- /People List - Light -->
<div class="people-list-accordion__actions">
<a href="#" class="btn btn-link"
>Optional Link 1
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 3
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<div class="people-list-accordion__group">
<div class="people-list-accordion__subtitle">Subcategory</div>
<!-- People List - Light -->
<div class="people-list">
<div class="people-list__inner">
<h2 class="component-title"></h2>
<div class="people-list__grid">
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
</div>
</div>
<!-- /People List - Light -->
<div class="people-list-accordion__actions">
<a href="#" class="btn btn-link"
>Optional Link 1
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 3
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion 2 -->
<!-- Accordion 3 -->
<div class="accordion">
<div class="accordion__header accordion__control" role="button" data-toggle="collapse" data-target="#accordion-3" aria-expanded="false" aria-controls="accordion-3">
<div class="accordion__title">Category</div>
<div class="accordion__icon"></div>
</div>
<div class="collapse" id="accordion-3">
<div class="accordion__panel">
<div class="people-list-accordion__group">
<div class="people-list-accordion__subtitle">Subcategory</div>
<!-- People List - Light -->
<div class="people-list">
<div class="people-list__inner">
<h2 class="component-title"></h2>
<div class="people-list__grid">
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
</div>
</div>
<!-- /People List - Light -->
<div class="people-list-accordion__actions">
<a href="#" class="btn btn-link"
>Optional Link 1
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 3
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<div class="people-list-accordion__group">
<div class="people-list-accordion__subtitle">Subcategory</div>
<!-- People List - Light -->
<div class="people-list">
<div class="people-list__inner">
<h2 class="component-title"></h2>
<div class="people-list__grid">
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
<div class="profile-card__media">
<img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
</div>
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">
<a href="#" data-toggle="modal" data-target="#public-profile">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
</div>
</div>
<!-- /People List - Light -->
<div class="people-list-accordion__actions">
<a href="#" class="btn btn-link"
>Optional Link 1
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 3
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion 3 -->
</div>
.people-list-accordion {
margin-bottom: 4rem;
.people-list {
margin-bottom: 1.2rem;
}
.people-list__inner {
padding: 1.2rem 0;
}
}
.people-list-accordion__subtitle {
@include typeSubheader(true);
}
.people-list-accordion__group {
margin-top: 2.4rem;
margin-bottom: 4rem;
}
.people-list-accordion__actions {
display: flex;
flex-direction: column;
text-align: left;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
}
.btn {
display: inline-block;
white-space: normal;
word-wrap: break-word;
text-align: left;
@media (min-width: $breakpoint-desktop) {
margin-right: 2.4rem;
}
}
}