Accordion

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.

Active Today

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Active this Week

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Active last Week

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Older

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

Candidate Name

Sr. Biomedical Basket Weaver & Basket Ops @ Initech

Anytown, USA

Referral Request

Hey Megan,

Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.

Thanks!

Recruiter Jim

<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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</div>
			</div>
		</div>
	</div>


</section>

Employee Second Nav

The secondary navigation bar appears within the top level Recommendations section of the Employee Application. The navigation provides a clear view into all facets, campaigns, and an unfiltered list of all recommendations. When a facet within the secondary navigation bar is selected, a collapsable "table of contents" section with corresponding subsections is displayed. The search icon expands to a single line search box and the accordion control opens and closes the accordion section.

High Priority Hires

<!-- sub nav bar--------------------------------------------------------->
<section class="blue-block">
	<nav class="facet-navbar-container">
		<ul class="facet-list">
			<li class="facets">
				<a href=#>
			  All Recommendations
		  </a>
			</li>
			<li class="facets">
				<a href=#>
			  High Priority Hires
		  </a>
			</li>
			<li class="facets">
				<a href=#>
			  Best Work Connections
		  </a>
			</li>
			<li class="facets">
				<a href=#>
			  Best School Connections
		  </a>
			</li>
			<li class="facets">
				<a href=#>
			  Refer Someone
		  </a>
			</li>
			<li class="search-control">
				<a class="search-icon-container">
					<img class="search-icon" src="/assets/toolkit/img/ui-icons/search-nobg.svg" alt="search_icon">
				</a>
			</li>
		</ul>
		<!-- search icon for tablet--------------------------------------------------------->
		<div class="mobile-search-icon-container">
			<img class="search-icon" src="/assets/toolkit/img/ui-icons/search-nobg.svg" alt="search_icon">
		</div>
		<!-- search box--------------------------------------------------------->
		<div class="search-box">
			<div class="search-field-container">
				<input type="text" />
			</div>
			<div class="cancel-icon-container">
				<img class="cancel-icon" src="/assets/toolkit/img/ui-icons/archive.svg" alt="cancel_icon">
			</div>
		</div>
	</nav>
	<!-- page title--------------------------------------------------------->
	<h1 class="page-title">
		High Priority Hires
	</h1>
</section>
<!-- tertiary accordion navigation--------------------------------------------------------->
<section class="facet-viewport">
	<h3 class="facet-title">
		Jobs in Hire a Designer (2)
	</h3>
</section>
<section class="high-priority-hires-container">
	<ul class="facet-list-left">
		<li class="facet-item">
			<a href=#>
        All Jobs
      </a>
		</li>
		<li class="facet-item">
			<a href=#>
        Jobs in Hire an Engineer (3)
      </a>
		</li>
		<li class="facet-item">
			<a class="active-facet" href=#>
        Jobs in Hire a Designer (2)
      </a>
		</li>
	</ul>
	<ul class="facet-list-right">
		<li class="facet-item">
			<a href=#>
        Jobs in Hires a Data Scientist (4)
      </a>
		</li>
	</ul>
</section>
<section class="accordion-control">
	<a></a>
</section>

Filter Title

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>

Nav Bar

The nav bar appears on all pages at the top of the page. The nav bar component enforces a large bottom margin to create separation from the rest of the UI.

<div class="flex-nav-bar">
	<div class="flex-nav-bar__logo">
		<img class="image" src="/assets/toolkit/img/logo.svg" />
	</div>
	<ul class="flex-nav-bar__main-list">
		<li class="list__item"><a class="link--selected" href="#">Talent</a></li>
		<li class="list__item"><a class="link" href="#">Jobs</a></li>
		<li class="list__item"><a class="link" href="#">Referrals</a></li>
		<li class="list__item"><a class="link" href="#">Reports</a></li>
	</ul>
	<div class="dropdown--nav-bar">
		<div class="dropdown-container">
			<p class="dropdown-button">user@emailthatislong.com</p>
			<ul class="dropdown-menu">
				<li class="dropdown-menu__item">Your profile</li>
				<li class="dropdown-menu__item">Settings</li>
				<li class="dropdown-menu__item">Admin settings</li>
				<li class="dropdown-menu__item">Help</li>
				<li class="dropdown-menu__item--separator">
					<hr class="dropdown-separator"></hr>
				</li>
				<li class="dropdown-menu__item">Import contacts</li>
				<li class="dropdown-menu__item">Invite Users</li>
				<li class="dropdown-menu__item--separator">
					<hr class="dropdown-separator"></hr>
				</li>
				<li class="dropdown-menu__item">Logout</li>
			</ul>
		</div>
	</div>
</div>

Pagination Controls

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.

Prev
1
2
3
4
5
6
7
Next

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

Recruiter Search Filter

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>

Tab Bar

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>

Modules

Accordion

Active Today

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Active this Week

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Active last Week

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Older

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Referral Request

You may know Candidate-First-Name from

Recommended jobs

Candidate-First-Name on social media

Employee Second Nav

High Priority Hires

Jobs in Hire a Designer (2)

Filter Title

Nav Bar

Pagination Controls

Recruiter Search Filter

Seniority

Additional Filters

Tab Bar