My Team
<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");
});