People List

PREVIEW 
<!-- 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));
  }
}
URL copied to clipboard!