The accordion controls appear within the “In Progress” section of the Recruiter Application. This section contains all the cards the recruiter has taken action on that have not progressed to a referral. The “In Progress cards” are grouped into accordion sections based on their time since last activity to allow for easy and clear navigation between recent activity cards and older cards.
<section class="accordion-container">
<!-- ACTIVE TODAY -->
<div class="in-progress-accordion">
<ul class="accordion-list">
<li class="accordion-list-item">
<a class="accordion-arrows">
</a>
</li>
<li class="accordion-list-item">
<h3 class="accordion-title">
Active Today
</h3>
</li>
</ul>
<div class="accordion-viewport open-accordion">
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
</div>
</div>
<!-- ACTIVE THIS WEEK -->
<div class="in-progress-accordion">
<ul class="accordion-list">
<li class="accordion-list-item">
<a class="accordion-arrows"></a>
</li>
<li class="accordion-list-item">
<h3 class="accordion-title">
Active this Week
</li>
</ul>
<div class="accordion-viewport">
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
</div>
</div>
<!-- ACTIVE LAST WEEK -->
<div class="in-progress-accordion">
<ul class="accordion-list">
<li class="accordion-list-item">
<a class="accordion-arrows"></a>
</li>
<li class="accordion-list-item">
<h3 class="accordion-title">
Active last Week
</li>
</ul>
<div class="accordion-viewport">
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
</div>
</div>
<!-- OLDER -->
<div class="in-progress-accordion">
<ul class="accordion-list">
<li class="accordion-list-item">
<a class="accordion-arrows"></a>
</li>
<li class="accordion-list-item">
<h3 class="accordion-title">
Older
</li>
</ul>
<div class="accordion-viewport">
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
<div class="demo-card">
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>
<!-- --------------------------------------->
<div class="referral-request-container">
<div class="referral-request">
<h2 class="card__section-title">
Referral Request
</h2>
<p></p>
<p class="referral-request__details">
Hey Megan,
</p>
<p class="referral-request__details">
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
</p>
<p class="referral-request__details">
Thanks!
</p>
<p class="referral-request__recruiter-name">
Recruiter Jim
</p>
</div>
</div>
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>
<section class="card__section card-action-bar">
<ul class="card-action-bar__button-list">
<li class="list__item"><button class="button--primary card__refer-button">Refer</button></li>
<li class="list__item"><button class="button--secondary card__decline-button">Decline</button></li>
</ul>
</section>
<div class="card__bottom-border--lead"> </div>
</div>
</div>
</div>
</section>
The filter title is a combination of the dropdown and page-title elements. The filter title is used on pages where the main information on the page is filterable content. It functions as a more descriptive page title than a page title with a filter control bar next to or under it. Because it's a page title all of the stylistic rules around page titles apply.
<div class="filter-title">
<div class="filter-title__dropdown">
<div class="dropdown-container">
<p class="dropdown-button">Open</p>
<ul class="dropdown-menu">
<li class="dropdown-menu__item">Open</li>
<li class="dropdown-menu__item">Hot</li>
<li class="dropdown-menu__item">Closed <span class="small-dropdown-text">(on Simppler)</span></li>
<li class="dropdown-menu__item">Closed <span class="small-dropdown-text">(on Greenhouse)</span></li>
</ul>
</div>
</div>
<span class="filter-title__label"> jobs for </span>
<div class="filter-title__dropdown">
<div class="dropdown-container">
<p class="dropdown-button">All Teams</p>
<ul class="dropdown-menu dropdown-select">
<li class="dropdown-menu__item">All Teams</li>
<li class="dropdown-menu__item">Engineering</li>
<li class="dropdown-menu__item">Product</li>
<li class="dropdown-menu__item">Sales</li>
<li class="dropdown-menu__item">HR</li>
<li class="dropdown-menu__item">Customer Support</li>
<li class="dropdown-menu__item">Marketing</li>
</ul>
</div>
</div>
<span class="filter-title__label"> in </span>
<div class="filter-title__dropdown">
<div class="dropdown-container">
<p class="dropdown-button">All Locations</p>
<ul class="dropdown-menu dropdown-select">
<li class="dropdown-menu__item">All Locations</li>
<li class="dropdown-menu__item">San Francisco, CA USA</li>
<li class="dropdown-menu__item">Los Angeles, CA USA</li>
<li class="dropdown-menu__item">Boston, MA USA</li>
<li class="dropdown-menu__item">London, England, UK</li>
</ul>
</div>
</div>
</div>
The pagination controls should be used on any element that is displaying multiple pages of data. The pagination control should always be used in pairs, one on top and another on the bottom, if the data has the possibility of being long enough to require scrolling.
<div class="pagination">
<ul class="pagination__main-list">
<li class="list__item"><a class="link--prev-next" href="#">Prev</a></li>
<li class="list__item"><a class="link--selected" href="#">1</a></li>
<li class="list__item"><a class="link" href="#">2</a></li>
<li class="list__item"><a class="link" href="#">3</a></li>
<li class="list__item"><a class="link" href="#">4</a></li>
<li class="list__item"><a class="link" href="#">5</a></li>
<li class="list__item"><a class="link" href="#">6</a></li>
<li class="list__item"><a class="link" href="#">7</a></li>
<li class="list__item"><a class="link--prev-next" href="#">Next</a></li>
</ul>
</div>
Recruiters can build powerful search queries using the boolean operators they know by typing them into the search field or by building the query with the advanced filtering controls. The search field and the advanced filtering controls are always kept in sync so the recruiter can switch between the two as needed.
<!-- Recruiter Search Bar --------------------------------------->
<div class="recruiter-search-box">
<input class="recruiter-search-field-input" type="search">
<div class="search-field-button-container">
<img class="recruiter-search-icon" src="/assets/toolkit/img/ui-icons/search-nobg.svg">
<img class="recruiter-cancel-search-icon" src="/assets/toolkit/img/ui-icons/archive.svg">
</div>
</div>
<!-- Graphic Search Builder --------------------------------------->
<div class="graphic-search-builder-container">
<!-- ROW ONE ------------------------------------------------------------------------------------------>
<div class="filtering-controls-container-rowOne">
<!-- ______________________________________________________________ -->
<div class="filtering-control-container">
<div class="search-input-group">
<div class="textfield textfield--floating-label">
<input class="textfield__input" type="text" id="text-field">
<label class="textfield__label" for="text-field">
Job Req.
</label>
</div>
<div class="segmented-control-container">
<ul class="segmented-control">
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="1" name="job-segment" id="option-1" checked="true">
<label class="segmented-control__label" for="option-1">
And
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="job-segment" id="option-2">
<label class="segmented-control__label" for="option-2">
Or
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="job-segment" id="option-3">
<label class="segmented-control__label" for="option-3">
Not
</label>
</a>
</li>
</ul>
</div>
</div>
<ul class="tag-list">
<li class="tag-item--interactive">
Software Engineer
</li>
</ul>
</div>
<!-- ______________________________________________________________ -->
<div class="filtering-control-container">
<div class="search-input-group">
<div class="textfield textfield--floating-label">
<input class="textfield__input" type="text" id="text-field">
<label class="textfield__label" for="text-field">
Skills
</label>
</div>
<div class="segmented-control-container">
<ul class="segmented-control">
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="1" name="skills-segment" id="option-4" checked>
<label class="segmented-control__label" for="option-4">
And
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="skills-segment" id="option-5">
<label class="segmented-control__label" for="option-5">
Or
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="skills-segment" id="option-6">
<label class="segmented-control__label" for="option-6">
Not
</label>
</a>
</li>
</ul>
</div>
</div>
<ul class="tag-list">
<li class="tag-item--interactive">
Python
</li>
<li class="tag-item--interactive">
Django
</li>
<li class="tag-item--interactive">
Front-end
</li>
<li class="tag-item--interactive">
Git
</li>
<li class="tag-item--interactive">
Linux
</li>
</ul>
</div>
<!-- ______________________________________________________________ -->
<div class="filtering-control-container">
<div class="search-input-group">
<div class="textfield textfield--floating-label">
<input class="textfield__input" type="text" id="text-field">
<label class="textfield__label" for="text-field">
Employer(s)
</label>
</div>
<div class="segmented-control-container">
<ul class="segmented-control">
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="1" name="employers-segment" id="option-7" checked>
<label class="segmented-control__label" for="option-7">
And
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="employers-segment" id="option-8">
<label class="segmented-control__label" for="option-8">
Or
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="employers-segment" id="option-9">
<label class="segmented-control__label" for="option-9">
Not
</label>
</a>
</li>
</ul>
</div>
</div>
<ul class="tag-list">
<li class="tag-item--interactive">
Google
</li>
<div class="checkbox">
<input type="checkbox" id="checkbox01" class="checkbox__real-checkbox">
<label for="checkbox01" class="checkbox__label">
Only show current employer
</label>
</div>
</ul>
</div>
</div>
<!-- ROW TWO ------------------------------------------------------------------------------------------>
<div class="filtering-controls-container-rowTwo">
<!-- ______________________________________________________________ -->
<div class="filtering-control-container">
<div class="search-input-group">
<div class="textfield textfield--floating-label">
<input class="textfield__input" type="text" id="text-field">
<label class="textfield__label" for="text-field">
Education
</label>
</div>
<div class="segmented-control-container">
<ul class="segmented-control">
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="1" name="education-segment" id="option-10" checked>
<label class="segmented-control__label" for="option-10">
And
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="education-segment" id="option-11">
<label class="segmented-control__label" for="option-11">
Or
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="education-segment" id="option-12">
<label class="segmented-control__label" for="option-12">
Not
</label>
</a>
</li>
</ul>
</div>
</div>
<ul class="tag-list">
<li class="tag-item--interactive">
Georgia Institute of Technology
</li>
</ul>
</div>
<!-- ______________________________________________________________ -->
<div class="filtering-control-container">
<div class="search-input-group">
<div class="textfield textfield--floating-label">
<input class="textfield__input" type="text" id="text-field">
<label class="textfield__label" for="text-field">
Connected to
</label>
</div>
<div class="segmented-control-container">
<ul class="segmented-control">
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="1" name="connected-to-segment" id="option-13" checked>
<label class="segmented-control__label" for="option-13">
And
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="connected-to-segment" id="option-14">
<label class="segmented-control__label" for="option-14">
Or
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="connected-to-segment" id="option-15">
<label class="segmented-control__label" for="option-15">
Not
</label>
</a>
</li>
</ul>
</div>
</div>
<ul class="tag-list">
<li class="tag-item--interactive">
Micheal Smith - ID#321
</li>
</ul>
</div>
<!-- ______________________________________________________________ -->
<div class="filtering-control-container">
<div class="search-input-group">
<div class="textfield textfield--floating-label">
<input class="textfield__input" type="text" id="text-field">
<label class="textfield__label" for="text-field">
Location
</label>
</div>
<div class="segmented-control-container">
<ul class="segmented-control">
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="1" name="location-segment" id="option-16" checked>
<label class="segmented-control__label" for="option-16">
And
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="location-segment" id="option-17">
<label class="segmented-control__label" for="option-17">
Or
</label>
</a>
</li>
<li class="segmented-control__item">
<a href="#">
<input class="segmented-control__input" type="radio" value="2" name="location-segment" id="option-18">
<label class="segmented-control__label" for="option-18">
Not
</label>
</a>
</li>
</ul>
</div>
</div>
<ul class="tag-list">
<li class="tag-item--interactive">
San Francisco, California
</li>
</ul>
</div>
</div>
<!-- ROW THREE ------------------------------------------------------------------------------------------>
<div class="filtering-controls-container-rowThree">
<!-- ______________________________________________________________ -->
<div class="seniority-checkbox-group">
<h2 class="card__section-title">
Seniority
</h2>
<div class="checkbox-group">
<div class="checkbox">
<input type="checkbox" id="checkbox01" class="checkbox__real-checkbox">
<label for="checkbox01" class="checkbox__label">
Director
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox02" class="checkbox__real-checkbox">
<label for="checkbox02" class="checkbox__label">
Manager
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox03" class="checkbox__real-checkbox">
<label for="checkbox02" class="checkbox__label">
Student
</label>
</div>
</div>
</div>
<!-- ______________________________________________________________ -->
<div class="additional-filtering-checkbox-group">
<h2 class="card__section-title">
Additional Filters
</h2>
<div class="checkbox-group">
<div class="checkbox">
<input type="checkbox" id="checkbox01" class="checkbox__real-checkbox">
<label for="checkbox01" class="checkbox__label">
Only fits followed jobs
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox02" class="checkbox__real-checkbox">
<label for="checkbox02" class="checkbox__label">
Only fits campaign jobs
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox02" class="checkbox__real-checkbox">
<label for="checkbox02" class="checkbox__label">
Only show people in my network
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox02" class="checkbox__real-checkbox">
<label for="checkbox02" class="checkbox__label">
Only show women
</label>
</div>
</div>
</div>
<div class="reset-button-container">
<button class="button--primary">
Reset
</button>
</div>
</div>
</div>
The tab bar functions as both the page's title and a tab control, so the tab names should make it clear what the function of the page is. In smaller viewports, the page tab bar collapses into a standard dropdown element. Because it's a page title all of the stylistic rules around page titles apply.
<ul class="tab-bar">
<li class="tab-bar__tab"><a href="#" class="link--selected">Tab 1</a></li>
<li class="tab-bar__tab"><a href="#" class="link">Tab 2</a></li>
<li class="tab-bar__tab"><a href="#" class="link">Tab 3</a></li>
<li class="tab-bar__tab"><a href="#" class="link">Tab 4</a></li>
</ul>