My Team (Homepage)

<div class="my-team-archive js-my-team-archive-carousel">
    <div class="my-team-archive__inner">
        <div>
            <h2 class="my-team-archive__header">My Team</h2>
        </div>

        <div class="my-team-archive__carousel carousel carousel--dark carousel--minimal carousel--equal-height-slides">
            <div class="my-team-archive__items js-items">
                <div class="my-team-archive__item">
                    <a href="#" class="my-team-archive__link js-item" data-target="team-panel-1">
                        <div class="my-team-archive__number">01</div>
                        <div class="my-team-archive__title">Team Dashboard</div>
                    </a>
                </div>

                <div class="my-team-archive__item">
                    <a href="#" class="my-team-archive__link js-item" data-target="team-panel-2">
                        <div class="my-team-archive__number">02</div>
                        <div class="my-team-archive__title">Provide Effective Feedback</div>
                    </a>
                </div>

                <div class="my-team-archive__item">
                    <a href="#" class="my-team-archive__link js-item" data-target="team-panel-3">
                        <div class="my-team-archive__number">03</div>
                        <div class="my-team-archive__title">Engagement Survey</div>
                    </a>
                </div>

                <div class="my-team-archive__item">
                    <a href="#" class="my-team-archive__link js-item" data-target="team-panel-4">
                        <div class="my-team-archive__number">04</div>
                        <div class="my-team-archive__title">Employee Onboarding</div>
                    </a>
                </div>

                <div class="my-team-archive__item">
                    <a href="#" class="my-team-archive__link js-item" data-target="team-panel-5">
                        <div class="my-team-archive__number">05</div>
                        <div class="my-team-archive__title">Team Check-in</div>
                    </a>
                </div>

                <div class="my-team-archive__item">
                    <a href="#" class="my-team-archive__link js-item" data-target="team-panel-6">
                        <div class="my-team-archive__number">06</div>
                        <div class="my-team-archive__title">Long title Lorem ipsum dolor sit amet consectetur adipisicing</div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="my-team-archive__panels">
        <!-- Panel 1: Team Status Cards -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-1" data-panel="team-panel-1">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- 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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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>

            <!-- /Team Status Cards -->
        </div>
        <!-- /Panel 1: Team Status Cards -->

        <!-- Panel 2: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-2" data-panel="team-panel-2">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 2: Simple Content -->

        <!-- Panel 3: Promotion Banner -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-3" data-panel="team-panel-3">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Promo Banner -->
            <!-- Default Version -->
            <div class="promo-banner">
                <div class="promo-banner__media">
                    <img src="https://via.placeholder.com/480x270" alt="" class="promo-banner__image" />
                </div>
                <div class="promo-banner__content">
                    <h3 class="promo-banner__title">Promotion Title</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa qui veritatis aliquid. Nesciunt possimus fugit sapiente voluptatibus dolorum dolore et culpa odio.</p>
                </div>
                <div class="promo-banner__actions">
                    <a href="#" class="btn btn-primary"
                        >Lorem ipsum dolor
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>

            <!-- Dark Version -->

            <!-- Promo Banner -->
        </div>
        <!-- /Panel 3: Promotion Banner -->

        <!-- Panel 4: Incoming People -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-4" data-panel="team-panel-4">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Team Status Table: Incoming -->

            <!-- 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 -->

            <!-- /Team Status Table: Incoming -->
        </div>
        <!-- /Panel 4: Incoming People -->

        <!-- Panel 5: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-5" data-panel="team-panel-5">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 5: Simple Content -->

        <!-- Panel 6: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-6" data-panel="team-panel-6">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 6: Simple Content -->

        <!-- Panel 1: Team Status Cards -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-1" data-panel="team-panel-1">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- 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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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>

            <!-- /Team Status Cards -->
        </div>
        <!-- /Panel 1: Team Status Cards -->

        <!-- Panel 2: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-2" data-panel="team-panel-2">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 2: Simple Content -->

        <!-- Panel 3: Promotion Banner -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-3" data-panel="team-panel-3">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Promo Banner -->
            <!-- Default Version -->
            <div class="promo-banner">
                <div class="promo-banner__media">
                    <img src="https://via.placeholder.com/480x270" alt="" class="promo-banner__image" />
                </div>
                <div class="promo-banner__content">
                    <h3 class="promo-banner__title">Promotion Title</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa qui veritatis aliquid. Nesciunt possimus fugit sapiente voluptatibus dolorum dolore et culpa odio.</p>
                </div>
                <div class="promo-banner__actions">
                    <a href="#" class="btn btn-primary"
                        >Lorem ipsum dolor
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>

            <!-- Dark Version -->

            <!-- Promo Banner -->
        </div>
        <!-- /Panel 3: Promotion Banner -->

        <!-- Panel 4: Incoming People -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-4" data-panel="team-panel-4">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Team Status Table: Incoming -->

            <!-- 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 -->

            <!-- /Team Status Table: Incoming -->
        </div>
        <!-- /Panel 4: Incoming People -->

        <!-- Panel 5: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-5" data-panel="team-panel-5">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 5: Simple Content -->

        <!-- Panel 6: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-6" data-panel="team-panel-6">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 6: Simple Content -->

        <!-- Panel 1: Team Status Cards -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-1" data-panel="team-panel-1">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- 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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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>

            <!-- /Team Status Cards -->
        </div>
        <!-- /Panel 1: Team Status Cards -->

        <!-- Panel 2: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-2" data-panel="team-panel-2">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 2: Simple Content -->

        <!-- Panel 3: Promotion Banner -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-3" data-panel="team-panel-3">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Promo Banner -->
            <!-- Default Version -->
            <div class="promo-banner">
                <div class="promo-banner__media">
                    <img src="https://via.placeholder.com/480x270" alt="" class="promo-banner__image" />
                </div>
                <div class="promo-banner__content">
                    <h3 class="promo-banner__title">Promotion Title</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa qui veritatis aliquid. Nesciunt possimus fugit sapiente voluptatibus dolorum dolore et culpa odio.</p>
                </div>
                <div class="promo-banner__actions">
                    <a href="#" class="btn btn-primary"
                        >Lorem ipsum dolor
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>

            <!-- Dark Version -->

            <!-- Promo Banner -->
        </div>
        <!-- /Panel 3: Promotion Banner -->

        <!-- Panel 4: Incoming People -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-4" data-panel="team-panel-4">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Team Status Table: Incoming -->

            <!-- 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 -->

            <!-- /Team Status Table: Incoming -->
        </div>
        <!-- /Panel 4: Incoming People -->

        <!-- Panel 5: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-5" data-panel="team-panel-5">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 5: Simple Content -->

        <!-- Panel 6: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-6" data-panel="team-panel-6">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 6: Simple Content -->

        <!-- Panel 1: Team Status Cards -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-1" data-panel="team-panel-1">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- 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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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>

            <!-- /Team Status Cards -->
        </div>
        <!-- /Panel 1: Team Status Cards -->

        <!-- Panel 2: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-2" data-panel="team-panel-2">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 2: Simple Content -->

        <!-- Panel 3: Promotion Banner -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-3" data-panel="team-panel-3">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Promo Banner -->
            <!-- Default Version -->
            <div class="promo-banner">
                <div class="promo-banner__media">
                    <img src="https://via.placeholder.com/480x270" alt="" class="promo-banner__image" />
                </div>
                <div class="promo-banner__content">
                    <h3 class="promo-banner__title">Promotion Title</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa qui veritatis aliquid. Nesciunt possimus fugit sapiente voluptatibus dolorum dolore et culpa odio.</p>
                </div>
                <div class="promo-banner__actions">
                    <a href="#" class="btn btn-primary"
                        >Lorem ipsum dolor
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>

            <!-- Dark Version -->

            <!-- Promo Banner -->
        </div>
        <!-- /Panel 3: Promotion Banner -->

        <!-- Panel 4: Incoming People -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-4" data-panel="team-panel-4">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Team Status Table: Incoming -->

            <!-- 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 -->

            <!-- /Team Status Table: Incoming -->
        </div>
        <!-- /Panel 4: Incoming People -->

        <!-- Panel 5: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-5" data-panel="team-panel-5">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 5: Simple Content -->

        <!-- Panel 6: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-6" data-panel="team-panel-6">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 6: Simple Content -->

        <!-- Panel 1: Team Status Cards -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-1" data-panel="team-panel-1">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- 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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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="#" data-toggle="modal" data-target="#public-profile">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>

            <!-- /Team Status Cards -->
        </div>
        <!-- /Panel 1: Team Status Cards -->

        <!-- Panel 2: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-2" data-panel="team-panel-2">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 2: Simple Content -->

        <!-- Panel 3: Promotion Banner -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-3" data-panel="team-panel-3">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Promo Banner -->
            <!-- Default Version -->
            <div class="promo-banner">
                <div class="promo-banner__media">
                    <img src="https://via.placeholder.com/480x270" alt="" class="promo-banner__image" />
                </div>
                <div class="promo-banner__content">
                    <h3 class="promo-banner__title">Promotion Title</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa qui veritatis aliquid. Nesciunt possimus fugit sapiente voluptatibus dolorum dolore et culpa odio.</p>
                </div>
                <div class="promo-banner__actions">
                    <a href="#" class="btn btn-primary"
                        >Lorem ipsum dolor
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>

            <!-- Dark Version -->

            <!-- Promo Banner -->
        </div>
        <!-- /Panel 3: Promotion Banner -->

        <!-- Panel 4: Incoming People -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-4" data-panel="team-panel-4">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>
            <!-- Team Status Table: Incoming -->

            <!-- 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 -->

            <!-- /Team Status Table: Incoming -->
        </div>
        <!-- /Panel 4: Incoming People -->

        <!-- Panel 5: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-5" data-panel="team-panel-5">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 5: Simple Content -->

        <!-- Panel 6: Simple Content -->
        <div class="panel panel--white my-team-archive__panel js-my-team-archive-panel js-panel" id="team-panel-6" data-panel="team-panel-6">
            <a href="#" class="panel__close js-close">
                <i class="fa fa-close"></i>
            </a>

            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis rerum exercitationem eaque molestias eum repellendus laboriosam reiciendis quaerat commodi atque iure, tempore, sequi minima ipsa beatae deleniti blanditiis aut voluptatibus.</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Quam sed deserunt voluptates saepe nemo recusandae laudantium nihil explicabo maiores dolorem ipsam iste ducimus doloremque placeat ad ipsa harum, illum autem soluta sapiente quis! Ad dolore et doloremque illo!</p>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <p><img src="https://via.placeholder.com/240x135" alt="" class="img-responsive" /></p>
                    <p>Repudiandae, voluptatum similique! Laboriosam debitis quia iste placeat distinctio perspiciatis provident dignissimos porro doloribus velit culpa asperiores expedita ex, impedit, veniam aut nesciunt dolore. Necessitatibus deleniti sint quis? Consequatur, ad.</p>
                </div>
            </div>
        </div>
        <!-- /Panel 6: Simple Content -->
    </div>
</div>