Team Status Tables
<!-- Incoming -->
<div class="team-status-table-wrap">
<div class="team-status-table-scroller">
<h2 class="team-status-table-title">Incoming Team Members</h2>
<table class="team-status-table">
<thead>
<tr>
<th>Name</th>
<th>Hire Type</th>
<th>Start Date</th>
<th class="whitespace-nowrap align-center">Days Since Joining</th>
<th class="min-width">Related Links</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">External Hire</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#external-hires">Prepare to onboard a new hire</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Incoming Transfer</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#internal-transfers">Prepare to onboard a transfer</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">External Hire</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#external-hires">Prepare to onboard a new hire</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Incoming Transfer</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#internal-transfers">Prepare to onboard a transfer</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">External Hire</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#external-hires">Prepare to onboard a new hire</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Incoming Transfer</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#internal-transfers">Prepare to onboard a transfer</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">External Hire</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#external-hires">Prepare to onboard a new hire</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Incoming Transfer</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#internal-transfers">Prepare to onboard a transfer</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">External Hire</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#external-hires">Prepare to onboard a new hire</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Incoming Transfer</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="align-center">XX</td>
<td class="min-width">
<a href="#internal-transfers">Prepare to onboard a transfer</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<a href="#" class="btn btn-link"
>Optional Link to related resource/action/system
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /Incoming -->
<!-- Departures -->
<div class="team-status-table-wrap">
<div class="team-status-table-scroller">
<h2 class="team-status-table-title">Departing Team Members</h2>
<table class="team-status-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Effective Date</th>
<th class="min-width">Related Links</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">Transfer Out</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#transfer-out">Prepare for transferring out</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Voluntary Term</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#voluntary-term">Prepare for voluntary termination</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--alert">Involuntary Term</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#involuntary-term">Prepare for involuntary termination</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">Transfer Out</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#transfer-out">Prepare for transferring out</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Voluntary Term</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#voluntary-term">Prepare for voluntary termination</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--alert">Involuntary Term</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#involuntary-term">Prepare for involuntary termination</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">Transfer Out</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#transfer-out">Prepare for transferring out</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--primary">Voluntary Term</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#voluntary-term">Prepare for voluntary termination</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge badge--alert">Involuntary Term</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#involuntary-term">Prepare for involuntary termination</a>
</td>
</tr>
<tr>
<td>
<!-- 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>
</div>
</div>
<!-- /Profile Card - Small -->
</td>
<td>
<span class="badge">Transfer Out</span>
</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
<td class="min-width">
<a href="#transfer-out">Prepare for transferring out</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">
<a href="#" class="btn btn-link"
>Optional Link to related resource/action/system
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /Departures -->
<!-- Recruiting -->
<div class="team-status-table-wrap">
<div class="team-status-table-scroller">
<h2 class="team-status-table-title">Recruiting Activities</h2>
<table class="team-status-table">
<thead>
<tr>
<th>Open Requisitions</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
<tr>
<td>Requisition Title</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
</tr>
<tr>
<td>Requisition Title</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
</tr>
<tr>
<td>Requisition Title</td>
<td class="whitespace-nowrap">MMM DD YYYY</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">
<a href="#" class="btn btn-link"
>View recruiting pipeline
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /Recruiting -->
<!-- Incoming (Empty) -->
<div class="team-status-table-wrap">
<div class="team-status-table-scroller">
<h2 class="team-status-table-title">Incoming Team Members</h2>
<table class="team-status-table">
<thead>
<tr>
<th>Name</th>
<th>Hire Type</th>
<th>Start Date</th>
<th class="whitespace-nowrap align-center">Days Since Joining</th>
<th class="min-width">Related Links</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="text-center">
<strong>This row displays only when 0 items returned - See User Story for no data text</strong>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<a href="#" class="btn btn-link"
>Optional Link to related resource/action/system
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /Incoming (Empty) -->
<!-- Departures (Empty) -->
<div class="team-status-table-wrap">
<div class="team-status-table-scroller">
<h2 class="team-status-table-title">Departing Team Members</h2>
<table class="team-status-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Effective Date</th>
<th class="min-width">Related Links</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="text-center">
<strong>This row displays only when 0 items returned - See User Story for no data text</strong>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">
<a href="#" class="btn btn-link"
>Optional Link to related resource/action/system
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link 2
<i class="fa fa-long-arrow-right"></i>
</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /Departures (Empty) -->
<!-- Recruiting (Empty) -->
<div class="team-status-table-wrap">
<div class="team-status-table-scroller">
<h2 class="team-status-table-title">Recruiting Activities</h2>
<table class="team-status-table">
<thead>
<tr>
<th>Open Requisitions</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="text-center">
<strong>This row displays only when 0 items returned - See User Story for no data text</strong>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">
<a href="#" class="btn btn-link"
>View recruiting pipeline
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link"
>Optional Link
<i class="fa fa-long-arrow-right"></i>
</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /Recruiting (Empty) -->
.team-status-table-wrap {
display: flex;
flex-direction: column;
margin: 0 -15px;
@media (min-width: $breakpoint-tablet) {
margin: 0;
}
}
.team-status-table-scroller {
display: inline-block;
width: 100%;
max-height: 41rem; // About 5 items height + title height (Mobile)
overflow: auto;
margin: 0 auto 4rem;
@media (min-width: $breakpoint-desktop) {
max-height: 43.4rem; // About 5 items height + title height (Desktop)
}
}
.team-status-table-title {
@include typeTitle(true);
text-transform: uppercase;
color: $color-blue-medium;
padding: 0 1.2rem;
margin: 0;
position: sticky;
top: 0;
left: 0;
background-color: $color-base-white;
@media (min-width: $breakpoint-desktop) {
@include typeDisplay(true);
padding-bottom: 1.2rem;
padding-left: 0;
}
}
.team-status-table {
width: auto;
table-layout: fixed;
border-collapse: separate;
@media (min-width: $breakpoint-desktop) {
width: 100%;
}
th,
td {
padding: 0.8rem;
}
thead {
position: sticky;
top: 2.8rem; // Height of the title (Mobile)
background-color: $color-base-white;
@media (min-width: $breakpoint-desktop) {
top: 5.2rem; // Height of the title (Desktop)
}
th {
border-top: 4px solid $color-blue-medium;
border-bottom: 1px solid $color-grey-medium;
vertical-align: bottom;
}
}
tfoot {
position: sticky;
bottom: 0;
background-color: $color-base-white;
> tr > th {
border-top: 1px solid $color-grey-medium;
border-bottom: 1px solid $color-grey-medium;
}
}
tbody > tr:nth-of-type(odd) {
background-color: rgba($color-base-grey, 0.5);
}
tbody td {
border-top: 1px solid $color-grey-medium;
}
a {
font-weight: bold;
}
.align-center {
text-align: center;
}
.min-width {
min-width: 16rem;
}
.whitespace-nowrap {
white-space: nowrap;
}
}