Team Status Cards
<div class="team-status-cards">
<!-- Happening on my team -->
<div class="team-status-cards__inner">
<div class="team-status-cards__title">
<h2 class="component-title">Happening on my team</h2>
</div>
<div class="status-cards">
<!-- Leaves of Absence -->
<div class="status-card">
<div class="status-card__header">
<div class="status-card__count">5</div>
<h3 class="status-card__title">Leaves of absence</h3>
</div>
<div class="status-card__body">
<div class="status-card__colleagues">
<ul class="status-card__colleagues-list">
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Scheduled:: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Returning:: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Scheduled:: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Returning:: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Scheduled:: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="status-card__footer"></div>
</div>
<!-- /Leaves of Absence -->
<!-- Work Anniversaries -->
<div class="status-card">
<div class="status-card__header">
<div class="status-card__count">5</div>
<h3 class="status-card__title">Work anniversaries</h3>
</div>
<div class="status-card__body">
<div class="status-card__colleagues">
<ul class="status-card__colleagues-list">
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">MMM DD YYYY (XX years)</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">MMM DD YYYY (XX years)</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">MMM DD YYYY (XX years)</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">MMM DD YYYY (XX years)</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">MMM DD YYYY (XX years)</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- /Work Anniversaries -->
</div>
</div>
<!-- Changes to my team -->
<div class="team-status-cards__inner">
<div class="team-status-cards__title">
<h2 class="component-title">Changes to my team</h2>
</div>
<div class="status-cards">
<!-- Incoming Team Members -->
<div class="status-card">
<div class="status-card__header">
<div class="status-card__count">4</div>
<h3 class="status-card__title">Incoming team members</h3>
</div>
<div class="status-card__body">
<div class="status-card__colleagues">
<ul class="status-card__colleagues-list">
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Starting: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Starting: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Starting: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Starting: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>View onboarding guidance
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- /Incoming Team Members -->
<!-- Team Departures -->
<div class="status-card">
<div class="status-card__header">
<div class="status-card__count">5</div>
<h3 class="status-card__title">Departing team members</h3>
</div>
<div class="status-card__body">
<div class="status-card__colleagues">
<ul class="status-card__colleagues-list">
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Leaving: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Leaving: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Leaving: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Leaving: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<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">
<a href="#" onClick="alert('Open Public Profile'); return false;">Name Surname</a>
</div>
<div class="profile-card__field">Leaving: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>View departures guidance
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- Recruiting Activity -->
<div class="status-card">
<div class="status-card__header">
<div class="status-card__count">4</div>
<h3 class="status-card__title">Recruiting activity</h3>
</div>
<div class="status-card__body">
<div class="status-card__colleagues">
<ul class="status-card__colleagues-list">
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Requisition Name</div>
<div class="profile-card__field">Created: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Requisition Name</div>
<div class="profile-card__field">Created: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Requisition Name</div>
<div class="profile-card__field">Created: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
<li class="status-card__colleagues-item">
<div class="profile-card profile-card--small">
<div class="profile-card__content">
<div class="profile-card__group">
<div class="profile-card__field profile-card__field--large">Requisition Name</div>
<div class="profile-card__field">Created: MMM DD YYYY</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>Go to Headcount Planning & Hiring
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- /Recruiting Activity -->
</div>
</div>
</div>
<hr />
<!-- EMPTY CARD VIEW -->
<div class="team-status-cards">
<!-- Happening on my team -->
<div class="team-status-cards__inner">
<div class="team-status-cards__title">
<h2 class="component-title">Happening on my team</h2>
</div>
<div class="status-cards">
<!-- Leaves of Absence -->
<div class="status-card is-empty">
<div class="status-card__header">
<div class="status-card__count">0</div>
<h3 class="status-card__title">Leaves of absence</h3>
</div>
<div class="status-card__footer"></div>
</div>
<!-- /Leaves of Absence -->
<!-- Work Anniversaries -->
<div class="status-card is-empty">
<div class="status-card__header">
<div class="status-card__count">0</div>
<h3 class="status-card__title">Work anniversaries</h3>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- /Work Anniversaries -->
</div>
</div>
<!-- Changes to my team -->
<div class="team-status-cards__inner">
<div class="team-status-cards__title">
<h2 class="component-title">Changes to my team</h2>
</div>
<div class="status-cards">
<!-- Incoming Team Members -->
<div class="status-card is-empty">
<div class="status-card__header">
<div class="status-card__count">0</div>
<h3 class="status-card__title">Incoming team members</h3>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>View onboarding guidance
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- /Incoming Team Members -->
<!-- Team Departures -->
<div class="status-card is-empty">
<div class="status-card__header">
<div class="status-card__count">0</div>
<h3 class="status-card__title">Departing team members</h3>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>View departures guidance
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- Recruiting Activity -->
<div class="status-card is-empty">
<div class="status-card__header">
<div class="status-card__count">0</div>
<h3 class="status-card__title">Recruiting activity</h3>
</div>
<div class="status-card__footer">
<a href="#" class="btn btn-link"
>Go to Headcount Planning & Hiring
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<!-- /Recruiting Activity -->
</div>
</div>
</div>
.team-status-cards {
background-color: rgba($color-base-grey, 0.5);
padding-top: 2.4rem;
margin-bottom: 4rem;
@media (min-width: $breakpoint-desktop) {
.team-status-cards-title {
flex: 1 0 25%;
}
.status-cards {
flex: 1 0 75%;
}
}
}
.team-status-cards__inner {
max-width: 1170px;
margin: 0 auto;
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
}
}
.team-status-cards__title {
padding: 0 1.6rem;
@media (min-width: $breakpoint-desktop) {
padding: 2.4rem;
}
}
.status-cards {
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-desktop) {
align-items: flex-start;
flex-direction: row;
margin-bottom: 2.4rem;
}
}
.status-card {
flex: 0 0 calc(33% - 2.4rem);
border: 1px solid $color-base-grey;
background-color: $color-base-white;
margin: 0 1.2rem 2.4rem;
a {
text-decoration: none;
}
}
.status-card__header {
border-top: 4px solid $color-blue-medium;
padding: 1.6rem;
}
.status-card__body {
border-top: 1px solid $color-base-grey;
max-height: 20rem;
}
.status-card__footer {
padding: 0.8rem;
text-align: right;
font-weight: bold;
min-height: 5.6rem;
}
.status-card__title {
@include typeTitle(true);
margin: 0;
min-height: 5.6rem;
}
.status-card__count {
@include typeCaption(true);
line-height: 1;
color: $color-base-white;
float: right;
display: flex;
justify-content: center;
align-items: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background-color: $color-blue-medium;
margin-left: 1.6rem;
.status-card.is-empty & {
background-color: $color-grey-medium;
}
}
.status-card__colleagues {
max-height: 13rem;
overflow-y: auto;
border-bottom: 1px solid $color-grey-light;
}
.status-card__colleagues-list {
list-style: none;
padding-left: 0;
}
.status-card__colleagues-item {
padding: 0.8rem 1.6rem;
&:nth-child(odd) {
background-color: $color-base-grey;
}
}