My Team

PREVIEW
<div class="archive_my-team">
    <div class="archive_my-team__inner">
        <div class="archive_my-team-title">
            <h2 class="component-title">Get to know your team</h2>
        </div>

        <div class="archive_my-team-org">
            <div class="archive_my-team-org__mgr">
                <!-- Profile Card - Large -->
                <div class="profile-card">
                    <div class="profile-card__media">
                        <img src="https://via.placeholder.com/72x72" 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">Name Surname</div>
                            <div class="profile-card__field">Title</div>
                            <div class="profile-card__field">BU/Division</div>
                        </div>
                        <div class="profile-card__group profile-card__contacts">
                            <div class="profile-card__field profile-card__field--small">
                                <i class="fa fa-envelope text-primary"></i>
                                <a href="#">name@email.com</a>
                            </div>
                            <div class="profile-card__field profile-card__field--small">
                                <i class="fa fa-phone text-primary"></i>
                                555-555-5555
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Profile Card - Large -->
            </div>

            <div class="archive_my-team-org__colleagues">
                <ul class="archive_my-team-org__colleagues-list">
                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>

                    <li class="archive_my-team-org__colleagues-item">
                        <!-- 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 class="profile-card__group profile-card__contacts">
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-envelope text-primary"></i>
                                        <a href="#">name@email.com</a>
                                    </div>
                                    <div class="profile-card__field profile-card__field--small">
                                        <i class="fa fa-phone text-primary"></i>
                                        555-555-5555
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Profile Card - Small -->
                    </li>
                </ul>
            </div>

            <div class="archive_my-team-org__actions">
                <a href="#" class="btn btn-link">
                    See Org Chart
                    <i class="fa fa-long-arrow-right"></i>
                </a>
            </div>
        </div>

        <div class="archive_my-team-msgs">
            <div class="archive_my-team-msgs-team">
                <div class="archive_my-team-msgs-team__header">
                    <h3 class="archive_my-team-msgs-team__title">Messages from archive_my team</h3>
                    <a href="#" class="btn btn-link js-control" data-toggle="collapse" data-target="#msgs" aria-expanded="false" aria-controls="msgs">
                        <i class="fa fa-minus js-icon"></i>
                    </a>
                </div>

                <div class="collapse in js-msgs-container" id="msgs">
                    <div class="archive_my-team-msgs-team__body msgs-carousel carousel carousel--minimal js-carousel">
                        <div class="js-msgs">
                            <div class="archive_my-team-msgs-team__msg">
                                <!-- 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 class="profile-card__group profile-card__contacts">
                                            <div class="profile-card__field profile-card__field--small">
                                                <i class="fa fa-envelope text-primary"></i>
                                                <a href="#">name@email.com</a>
                                            </div>
                                            <div class="profile-card__field profile-card__field--small">
                                                <i class="fa fa-phone text-primary"></i>
                                                555-555-5555
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /Profile Card - Small -->

                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A ratione aut quisquam, dolorum accusamus exercitationem iusto facere.</p>
                            </div>

                            <div class="archive_my-team-msgs-team__msg">
                                <!-- 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 class="profile-card__group profile-card__contacts">
                                            <div class="profile-card__field profile-card__field--small">
                                                <i class="fa fa-envelope text-primary"></i>
                                                <a href="#">name@email.com</a>
                                            </div>
                                            <div class="profile-card__field profile-card__field--small">
                                                <i class="fa fa-phone text-primary"></i>
                                                555-555-5555
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /Profile Card - Small -->

                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A ratione aut quisquam, dolorum accusamus exercitationem iusto facere.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="archive_my-team-msgs-buddy">
                <h3 class="archive_my-team-msgs-buddy__title">Your onboarding buddy</h3>
                <div class="archive_my-team-msgs-buddy__body">
                    <!-- Profile Card - Large -->
                    <div class="profile-card">
                        <div class="profile-card__media">
                            <img src="https://via.placeholder.com/72x72" 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">Name Surname</div>
                                <div class="profile-card__field">Title</div>
                                <div class="profile-card__field">BU/Division</div>
                            </div>
                            <div class="profile-card__group profile-card__contacts">
                                <div class="profile-card__field profile-card__field--small">
                                    <i class="fa fa-envelope text-primary"></i>
                                    <a href="#">name@email.com</a>
                                </div>
                                <div class="profile-card__field profile-card__field--small">
                                    <i class="fa fa-phone text-primary"></i>
                                    555-555-5555
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Profile Card - Large -->

                    <div class="archive_my-team-msgs-buddy__msg">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ut provident exercitationem adipisci quisquam totam reiciendis quaerat!</p>
                    </div>
                    <div class="archive_my-team-msgs-buddy__actions">
                        <a href="" class="btn btn-link"
                            >How can archive_my buddy help?
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
.archive_my-team {
  background-color: $color-base-grey;
  margin-bottom: 4.8rem;

  @media (min-width: $breakpoint-desktop) {
    .archive_my-team-title {
      width: 25%;
    }

    .archive_my-team-org {
      width: 40%;
    }

    .archive_my-team-msgs {
      width: 35%;
    }
  }

  .archive_my-team__inner {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    @media (min-width: $breakpoint-desktop) {
      flex-direction: row;
    }
  }

  .archive_my-team-title {
    padding: 0 1.6rem;

    @media (min-width: $breakpoint-desktop) {
      padding: 2.4rem;
    }
  }

  .archive_my-team-org {
    @include boxShadow(2);
    border-top: 4px solid $color-blue-medium;
    background-color: $color-base-white;
  }

  .archive_my-team-org__mgr {
    padding: 2.4rem 1.6rem;

    @media (min-width: $breakpoint-desktop) {
      padding: 3.2rem 1.6rem 3.2rem 5.6rem;
    }
  }

  .archive_my-team-org__colleagues {
    max-height: 32rem;
    overflow-y: auto;
    border-bottom: 1px solid $color-grey-light;
  }

  .archive_my-team-org__colleagues-list {
    list-style: none;
    padding-left: 0;
  }

  .archive_my-team-org__colleagues-item {
    padding: 0.8rem 1.6rem;

    @media (min-width: $breakpoint-desktop) {
      padding: 0.8rem 5.6rem;
    }

    &:nth-child(odd) {
      background-color: $color-base-grey;
    }
  }

  .archive_my-team-org__actions {
    padding: 0.8rem 4.8rem;
  }

  .archive_my-team-msgs {
    padding: 1.2rem;

    @media (min-width: $breakpoint-desktop) {
      padding: 2.4rem;
    }
  }

  .archive_my-team-msgs-team {
    margin-bottom: 2.4rem;
  }

  .archive_my-team-msgs-team__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .archive_my-team-msgs-team__title {
    @include typeSubheader(true);
  }

  .archive_my-team-msgs-team__body {
    padding: 2.4rem;

    .profile-card {
      margin-bottom: 1.6rem;
    }
  }

  .archive_my-team-msgs-buddy__title {
    @include typeSubheader(true);
  }

  .archive_my-team-msgs-buddy__body {
    @include boxShadow(2);
    background-color: $color-base-white;
    padding: 1.6rem;
  }

  .archive_my-team-msgs-buddy__msg {
    @include typeCaption;
    padding-top: 2.4rem;
  }

  .msgs-carousel {
    position: relative;
    overflow: hidden;
  }
}
$(document).ready(function () {
  $(".js-carousel").each(function (index, elem) {
    $carousel = $(this);
    $msgs = $carousel.find(".js-msgs");
    $msgs.slick();
  });
});

$(".js-control").on("click", function (e) {
  e.preventDefault();
  $(this).find(".js-icon").toggleClass("fa-plus fa-minus");
});
URL copied to clipboard!