People List
<!-- People List - Light -->
<div class="people-list">
<div class="people-list__inner">
<h2 class="component-title">People List</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 -->
<!-- People List - Dark -->
<div class="people-list people-list--alt">
<div class="people-list__inner">
<h2 class="component-title">People List</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 - Dark -->
.people-list {
margin-bottom: 4rem;
&.people-list--alt {
background-color: $color-base-grey;
}
}
.people-list__inner {
max-width: 1140px;
margin: 0 auto;
.people-list--alt & {
padding: 1.2rem;
@media (min-width: $breakpoint-desktop) {
padding: 3.2rem 0;
}
}
}
.people-list__grid {
display: grid;
gap: 2.4rem;
word-break: break-word;
@media (min-width: $breakpoint-tablet) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: $breakpoint-desktop) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}