sandwichUI

from the team at

Last updated: 24 May 2017

Prospect cards

The prospect card is the focal point of the Simppler applications. The card acts as the digital representation of a person inside the Simppler system and is the main UI element for most of the activities that can be undertaken in the apps. With rare exception, the prospect card is central in all views inside the Simppler applications.

The card is a fully modular, multi-modal element: it changes it's configuration of modules based on where it is displayed in the system. This allows it to represent a prospect dynamically, updating the relevant information on display to cater to the hiring process stage of the prospect. This means there is no one "prospect card" design, but an array of configurations that are possible to represent a prospect at any given moment. The Card Modules that make up the card are important to understand when it comes to making design choices about how to display a prospect in an existing or new situation.

The card is designed to try and put all prospects on an equal field of play, where they are evaluated on their skills and experience. "Diverse by default" is the foundational philosophy behind this design, and where we can we always try to minimize the display of data that could lead to profiling or biasing (conscious or otherwise) a prospect.

Employee App

In the employee application the primary role of the prospect card is to remind a user who a prospect is and how they know them. This memory jogging is key to getting employees to feel comfortable making referrals of people they may have forgotten they know. It also acts as a filter on referral quality, allowing employees to identify people they may have in their digital social networks but do not actually know at all.

In the in progress and referral views, the prospect card mostly functions as a reminder to the user about interactions that are in-progress or referrals they have made.

Contacted Card

The employee application shows this configuration in it's in progress view.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

Contact history

  • Lead responded to message
    August 17th, 2016
  • Recruiter Bob sent message
    August 14th, 2016

details

 

You may know Candidate-First-Name from

  • Some Company Name

  • Some Company Name

  • Some School Name

Recommended jobs

  • Lead Biomedical Basket Weaver
    Blue team, Anytown, ST USA

Candidate-First-Name on social media

 
<div class="card">
	<!-- NOTE: the style attribute here is only for prototyping purposes. -->
	<section class="card__section prospect-id--contacted" 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>
	<section class="card__section contact-history-section">
		<h2 class="card__section-title">Contact history</h2>
		<ul class="card__two-line-list">
			<li class="list__item">
				<div class="list__item--row line-one">Lead responded to message</div>
				<div class="list__item--row line-two">August 17th, 2016</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">Recruiter Bob sent message</div>
				<div class="list__item--row line-two">August 14th, 2016</div>
			</li>
		</ul>
	</section>
	<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__messsage-button">Refer Candidate</button></li>
			<li class="list__item"><button class="button--secondary card__refer-button">Send message</button></li>
			<li class="list__item"><button class="button--secondary card__archive-button">Not a fit</button></li>
		</ul>
	</section>
	<div class="card__bottom-border--contacted">&nbsp;</div>
</div>

Reccomendation Card

The employee application shows this configuration in it's recommendation view.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

You may know Candidate-First-Name from

  • Some Company Name

  • Some Company Name

  • Some School Name

Recommended jobs

  • Lead Biomedical Basket Weaver
    Blue team, Anytown, ST USA

Candidate-First-Name on social media

 
<div class="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>
	<section class="card__section recommend-summary">
		<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>
	</section>
	<section class="card__section card-action-bar">
		<ul class="card-action-bar__button-list">
			<li class="list__item"><button class="button--primary card__messsage-button">Send message</button></li>
			<li class="list__item"><button class="button--secondary card__refer-button">Endorse</button></li>
			<li class="list__item"><button class="button--secondary card__archive-button">Not a fit</button></li>
		</ul>
	</section>
	<div class="card__bottom-border--lead">&nbsp;</div>
</div>

Referral Request Card

The employee application shows this configuration in the requests view.

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

details

 

You may know Candidate-First-Name from

  • Some Company Name

  • Some Company Name

  • Some School Name

Recommended jobs

  • Lead Biomedical Basket Weaver
    Blue team, Anytown, ST USA

Candidate-First-Name on social media

 
<div class="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">
  <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>
</section> -->
	<!-- <div class="disclosure-control" id="example-disclosure">
	<p class="disclosure-control__text">details</p>
	<hr class="disclosure-control__rule">
	<div class="disclosure-control__arrow disclosure-control__arrow--down">&nbsp;</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>

Referral Request Decline Card

The employee application shows this configuration in it's requests view after the employee has declined a referral request.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

Please select a reason for the decline

Any additional information (optional)

 
<div class="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>
	<section class="card__section decline-form">
		<form>
			<h3 class="card__section-title">Please select a reason for the decline </h3>
			<div class="decline-form__group">
				<div class="checkbox-group">
					<div class="checkbox">
						<input type="checkbox" name="know-candidate" id="know-pro" class="checkbox__real-checkbox">
						<label for="know-pro" class="checkbox__label">
              I don't know them well enough to refer.
            </label>
					</div>
					<div class="checkbox">
						<input type="checkbox" name="know-candidate" id="know-social" class="checkbox__real-checkbox">
						<label for="know-social" class="checkbox__label">
              I rather not work with them.
            </label>
					</div>
					<div class="checkbox">
						<input type="checkbox" name="know-candidate" id="know-academic" class="checkbox__real-checkbox">
						<label for="know-academic" class="checkbox__label">
              I don't feel like they would be a good fit.
            </label>
					</div>
					<div class="checkbox">
						<input type="checkbox" name="know-candidate" id="know-dont" class="checkbox__real-checkbox">
						<label for="know-dont" class="checkbox__label">
              Other
            </label>
					</div>
				</div>
			</div>
			<h3 class="card__section-title">Any additional information (optional)</h3>
			<div class="decline-form__group">
				<textarea class="textarea">
      </textarea>
			</div>
		</form>
	</section>
	<section class="card__section card-action-bar">
		<ul class="card-action-bar__button-list">
			<li class="list__item"><button class="button--primary card__messsage-button">Send </button></li>
			<li class="list__item"><button class="button--secondary card__archive-button">Cancel</button></li>
		</ul>
	</section>
	<div class="card__bottom-border--lead">&nbsp;</div>
</div>

Referred Card

The employee application shows this configuration in it's referrals view.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

Contact history

  • Lead responded to message
    August 17th, 2016
  • Recruiter Bob sent message
    August 14th, 2016
 
<div class="card">
	<!-- NOTE: the style attribute here is only for prototyping purposes. -->
	<section class="card__section prospect-id--referral" 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>
	<section class="card__section contact-history-section">
		<h2 class="card__section-title">Contact history</h2>
		<ul class="card__two-line-list">
			<li class="list__item">
				<div class="list__item--row line-one">Lead responded to message</div>
				<div class="list__item--row line-two">August 17th, 2016</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">Recruiter Bob sent message</div>
				<div class="list__item--row line-two">August 14th, 2016</div>
			</li>
		</ul>
	</section>
	<section class="card__section card-action-bar">
		<ul class="card-action-bar__button-list">
			<li class="list__item"><button class="button--primary card__messsage-button">Stop following</button></li>
		</ul>
	</section>
	<div class="card__bottom-border--referral">&nbsp;</div>
</div>

Recruiter App

In the recruiter application the primary role of the prospect card is to represent the prospect through all the stages of her journey to becoming a candidate. The recruiter users spend more time in the app than the employees, and the recruiter application has a much more sophisticated presentation of prospects. As recruiters move between job reqs they are working, the prospect card is designed to ease context switching by providing at-a-glance views of which stage a prospect is in and the most important information for that stage.

Contacted Card

The recruiter application shows this configuration in it's in progress view. The card is designed to primarily show off recent activity and contact methods as well as serving as a quick "response needed" reminder to the recruiter if she has missed any external notifications. The contacted stage is also the primary point for manual pushes to the ATS, when a conversation is completed with a Simppler sourced candidate.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

Most recent unseen activity log entry

by Ted Employeeson on April 13, 2017

Contact history

  • Lead responded to message
    August 17th, 2016
  • Recruiter Bob sent message
    August 14th, 2016

Contact info

details

 

Connections at CompanyName

  • Bob Jones
    Bio-medical Basket Weaving Manager
  • Sally Longlastnamington
    Marketing Manager
  • Ima S Pacefiller
    Generic Job Title

Relevant Skills

  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill

Recommended jobs

  • Lead Biomedical Basket Weaver
    Blue team, Anytown, ST USA

Work history

  • Sr. Biomedical Basket Weaver & Basket Ops
    @ Company, 2015-current
  • Biomedical Basket Weaver
    @ Company, 2011-2015
  • Biomedical Basket Weaver
    @ Company, 2005-2011
  • Jr. Biomedical Basket Weaver
    @ Company, 2003-2005
  • Biomedical Basket Weaving Intern
    @ Company, 2001-2003
 
<div class="card">
	<!-- NOTE: the style attribute here is only for prototyping purposes. -->
	<section class="card__section prospect-id--contacted" style="margin-bottom:0;">
		<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>
	<section class="card__section last-activity">
		<h3 class="last-activity__title">Most recent unseen activity log entry</h3>
		<p class="last-activity__details">by Ted Employeeson on April 13, 2017</p>
	</section>
	<section class="card__section contact-history-section">
		<h2 class="card__section-title">Contact history</h2>
		<ul class="card__two-line-list">
			<li class="list__item">
				<div class="list__item--row line-one">Lead responded to message</div>
				<div class="list__item--row line-two">August 17th, 2016</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">Recruiter Bob sent message</div>
				<div class="list__item--row line-two">August 14th, 2016</div>
			</li>
		</ul>
	</section>
	<section class="card__section contact-details">
		<h2 class="card__section-title">Contact info</h2>
		<ul class="contact-details__social-list">
			<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>
		<ul class="contact-details__contact-list">
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/email.svg" /> contact@email.com
			</a>
			</li>
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/resume.svg" /> Resume uploaded April 25th 2017
			</a>
			</li>
		</ul>
	</section>
	<section class="card__section prospect-details">
		<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">
			<div class="prospect-details__connections">
				<h2 class="card__section-title">Connections at CompanyName</h2>
				<ul class="prospect-details__connections-list">
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-09.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Bob Jones</div>
							<div class="card-two-line-list-line-two">Bio-medical Basket Weaving Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-08.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Sally Longlastnamington</div>
							<div class="card-two-line-list-line-two">Marketing Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-10.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Ima S Pacefiller</div>
							<div class="card-two-line-list-line-two">Generic Job Title</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
				</ul>
			</div>
			<div class="prospect-details__skills">
				<h2 class="card__section-title">Relevant Skills</h2>
				<ul class="tag-list">
					<li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
      </ul>
    </div>
    <div class="prospect-details__recjobs">
      <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>
    </div>
    <div class="prospect-details__history">
      <h2 class="card__section-title">Work history</h2>
      <ul class="card__two-line-list">
        <li class="list__item">
            <div class="list__item--row line-one">Sr. Biomedical Basket Weaver &amp; Basket Ops</div>
            <div class="list__item--row line-two">@ Company, 2015-current</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2011-2015</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2005-2011</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Jr. Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2003-2005</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaving Intern</div>
            <div class="list__item--row line-two">@ Company, 2001-2003</div>
        </li>
      </ul>
    </div>
</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__messsage-button">Send message</button></li>
    <li class="list__item"><button class="button--secondary card__ats-button">Send to ATS</button></li>
    <li class="list__item"><button class="button--secondary card__archive-button">Archive</button></li>
  </ul>
</section><div class="card__bottom-border--contacted">&nbsp;</div></div>

Endorsement Card

The recruiter application shows this configuration in it's Endorsements view. The card is designed to primarily show off the results of the fitness evaluation and contact info so recruiters can quickly make a decision about moving forward with the prospect and act on it.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

Most recent unseen activity log entry

by Ted Employeeson on April 13, 2017

Survey results

From Sally Thomsonton who's name you can use

  • A professional contact
    Relationship
  • Can teach others
    Experience
  • "I think Candidate would be a great fit for us because she was such a rockstar when I worked with her at my last job."
    Comments

Contact info

details

 

Connections at CompanyName

  • Bob Jones
    Bio-medical Basket Weaving Manager
  • Sally Longlastnamington
    Marketing Manager
  • Ima S Pacefiller
    Generic Job Title

Relevant Skills

  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill

Recommended jobs

  • Lead Biomedical Basket Weaver
    Blue team, Anytown, ST USA

Work history

  • Sr. Biomedical Basket Weaver & Basket Ops
    @ Company, 2015-current
  • Biomedical Basket Weaver
    @ Company, 2011-2015
  • Biomedical Basket Weaver
    @ Company, 2005-2011
  • Jr. Biomedical Basket Weaver
    @ Company, 2003-2005
  • Biomedical Basket Weaving Intern
    @ Company, 2001-2003
 
<div class="card">
	<!-- NOTE: the style attribute here is only for prototyping purposes. -->
	<section class="card__section prospect-id--endorsement" style="margin-bottom:0;">
		<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>
	<section class="card__section last-activity">
		<h3 class="last-activity__title">Most recent unseen activity log entry</h3>
		<p class="last-activity__details">by Ted Employeeson on April 13, 2017</p>
	</section>
	<section class="card__section fitness-results">
		<h2 class="card__section-title">Survey results</h2>
		<h3 class="fitness-results__name">From Sally Thomsonton who's name you can use</h3>
		<ul class="card__two-line-list">
			<li class="list__item">
				<div class="list__item--row line-one">A professional contact</div>
				<div class="list__item--row line-two">Relationship</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">Can teach others</div>
				<div class="list__item--row line-two">Experience</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">"I think Candidate would be a great fit for us because she was such a rockstar when I worked with her at my last job."</div>
				<div class="list__item--row line-two">Comments</div>
			</li>
		</ul>
	</section>
	<section class="card__section contact-details">
		<h2 class="card__section-title">Contact info</h2>
		<ul class="contact-details__social-list">
			<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>
		<ul class="contact-details__contact-list">
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/email.svg" /> contact@email.com
			</a>
			</li>
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/resume.svg" /> Resume uploaded April 25th 2017
			</a>
			</li>
		</ul>
	</section>
	<section class="card__section prospect-details">
		<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">
			<div class="prospect-details__connections">
				<h2 class="card__section-title">Connections at CompanyName</h2>
				<ul class="prospect-details__connections-list">
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-09.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Bob Jones</div>
							<div class="card-two-line-list-line-two">Bio-medical Basket Weaving Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-08.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Sally Longlastnamington</div>
							<div class="card-two-line-list-line-two">Marketing Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-10.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Ima S Pacefiller</div>
							<div class="card-two-line-list-line-two">Generic Job Title</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
				</ul>
			</div>
			<div class="prospect-details__skills">
				<h2 class="card__section-title">Relevant Skills</h2>
				<ul class="tag-list">
					<li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
      </ul>
    </div>
    <div class="prospect-details__recjobs">
      <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>
    </div>
    <div class="prospect-details__history">
      <h2 class="card__section-title">Work history</h2>
      <ul class="card__two-line-list">
        <li class="list__item">
            <div class="list__item--row line-one">Sr. Biomedical Basket Weaver &amp; Basket Ops</div>
            <div class="list__item--row line-two">@ Company, 2015-current</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2011-2015</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2005-2011</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Jr. Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2003-2005</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaving Intern</div>
            <div class="list__item--row line-two">@ Company, 2001-2003</div>
        </li>
      </ul>
    </div>
</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__messsage-button">Send message</button></li>
    <li class="list__item"><button class="button--secondary card__ats-button">Send to ATS</button></li>
    <li class="list__item"><button class="button--secondary card__archive-button">Archive</button></li>
  </ul>
</section><div class="card__bottom-border--endorsement">&nbsp;</div></div>

Lead Card

The recruiter application shows this configuration in it's Leads view. The card is designed to quickly show the top information recruiters look for in a resume to answer the questions: "Do they have enough experience?", "Are they a job hopper?", and "Where did they go to school?" and offer contact and social media information for a quicker deep dive. While we do provide a full profile (as much of it as we have), because our data can be out of date offering easy access to LinkedIn gives recruiters fast access to the most up to date information.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

Most recent unseen activity log entry

by Ted Employeeson on April 13, 2017

Continuity

  • 1 yrs
    Sr. Biomedical Basket Weaver & Basket Ops
  • 4 yrs
    Biomedical Basket Weaver

Experience

15 yrs

Education

  • Stanford
    2012 M.S. Biomedical Basket Weaving
  • University of Illinois Urbana-Champaign
    2010 B.S. Biomedical Basket Weaving

Contact info

details

 

Connections at CompanyName

  • Bob Jones
    Bio-medical Basket Weaving Manager
  • Sally Longlastnamington
    Marketing Manager
  • Ima S Pacefiller
    Generic Job Title

Relevant Skills

  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill

Recommended jobs

  • Lead Biomedical Basket Weaver
    Blue team, Anytown, ST USA

Work history

  • Sr. Biomedical Basket Weaver & Basket Ops
    @ Company, 2015-current
  • Biomedical Basket Weaver
    @ Company, 2011-2015
  • Biomedical Basket Weaver
    @ Company, 2005-2011
  • Jr. Biomedical Basket Weaver
    @ Company, 2003-2005
  • Biomedical Basket Weaving Intern
    @ Company, 2001-2003
 
<div class="card">
	<!-- NOTE: the style attribute here is only for prototyping purposes. -->
	<section class="card__section prospect-id--lead" style="margin-bottom:0;">
		<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>
	<section class="card__section last-activity">
		<h3 class="last-activity__title">Most recent unseen activity log entry</h3>
		<p class="last-activity__details">by Ted Employeeson on April 13, 2017</p>
	</section>
	<section class="card__section talent-summary">
		<div class="talent-summary__continuity">
			<h2 class="card__section-title">Continuity</h2>
			<ul class="talent-summary__continuity-list">
				<li class="list__item">
					<div class="list__item__col continuity-list__time-at-job">
						1 <span class="card__sm-yrs">yrs</span>
					</div>
					<div class="list__item__col continuity-list__job-title">
						Sr. Biomedical Basket Weaver &amp; Basket Ops
					</div>
				</li>
				<li class="list__item">
					<div class="list__item__col continuity-list__time-at-job">
						4 <span class="card__sm-yrs">yrs</span>
					</div>
					<div class="list__item__col continuity-list__job-title">
						Biomedical Basket Weaver
					</div>
				</li>
			</ul>
		</div>
		<div class="talent-summary__experience">
			<h2 class="card__section-title">Experience</h2>
			<p>15 <span class="card__sm-yrs">yrs</span></p>
		</div>
		<div class="talent-summary__education">
			<h2 class="card__section-title">Education</h2>
			<ul class="card__two-line-list education__list">
				<li class="list__item">
					<div class="list__item--row line-one">
						Stanford
					</div>
					<div class="list__item--row line-two">
						2012 M.S. Biomedical Basket Weaving
					</div>
				</li>
				<li class="">
					<div class="list__item--row line-one">
						University of Illinois Urbana-Champaign
					</div>
					<div class="list__item--row line-two">
						2010 B.S. Biomedical Basket Weaving
					</div>
				</li>
			</ul>
		</div>
	</section>
	<section class="card__section contact-details">
		<h2 class="card__section-title">Contact info</h2>
		<ul class="contact-details__social-list">
			<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>
		<ul class="contact-details__contact-list">
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/email.svg" /> contact@email.com
			</a>
			</li>
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/resume.svg" /> Resume uploaded April 25th 2017
			</a>
			</li>
		</ul>
	</section>
	<section class="card__section prospect-details">
		<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">
			<div class="prospect-details__connections">
				<h2 class="card__section-title">Connections at CompanyName</h2>
				<ul class="prospect-details__connections-list">
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-09.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Bob Jones</div>
							<div class="card-two-line-list-line-two">Bio-medical Basket Weaving Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-08.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Sally Longlastnamington</div>
							<div class="card-two-line-list-line-two">Marketing Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-10.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Ima S Pacefiller</div>
							<div class="card-two-line-list-line-two">Generic Job Title</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
				</ul>
			</div>
			<div class="prospect-details__skills">
				<h2 class="card__section-title">Relevant Skills</h2>
				<ul class="tag-list">
					<li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
      </ul>
    </div>
    <div class="prospect-details__recjobs">
      <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>
    </div>
    <div class="prospect-details__history">
      <h2 class="card__section-title">Work history</h2>
      <ul class="card__two-line-list">
        <li class="list__item">
            <div class="list__item--row line-one">Sr. Biomedical Basket Weaver &amp; Basket Ops</div>
            <div class="list__item--row line-two">@ Company, 2015-current</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2011-2015</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2005-2011</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Jr. Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2003-2005</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaving Intern</div>
            <div class="list__item--row line-two">@ Company, 2001-2003</div>
        </li>
      </ul>
    </div>
</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__messsage-button">Send message</button></li>
    <li class="list__item"><button class="button--secondary card__archive-button">Archive</button></li>
  </ul>
</section><div class="card__bottom-border--lead">&nbsp;</div></div>

Referral Card

The recruiter application shows this configuration in it's Referrals view. The most common case for referrals is they are automatically pushed into the user's ATS, which means the primary purpose of the referrals card is being a record of completed activity. The card features status updated from the ATS as well as information from the referring employee to give a quick view of the overall referral.

Candidate Name
Sr. Biomedical Basket Weaver & Basket Ops @ Initech
Anytown, USA

Most recent unseen activity log entry

by Ted Employeeson on April 13, 2017

Contact history

  • Lead responded to message
    August 17th, 2016
  • Recruiter Bob sent message
    August 14th, 2016

Referred by

  • Sally Thompsonton
    sallythomp@somecompanyname.com
    on July 12, 2017 for Big Data Engineer(#11223)

Survey results

From Sally Thomsonton who's name you can use

  • A professional contact
    Relationship
  • Can teach others
    Experience
  • "I think Candidate would be a great fit for us because she was such a rockstar when I worked with her at my last job."
    Comments

Contact info

details

 

Connections at CompanyName

  • Bob Jones
    Bio-medical Basket Weaving Manager
  • Sally Longlastnamington
    Marketing Manager
  • Ima S Pacefiller
    Generic Job Title

Relevant Skills

  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill
  • Foo Skill

Recommended jobs

  • Lead Biomedical Basket Weaver
    Blue team, Anytown, ST USA

Work history

  • Sr. Biomedical Basket Weaver & Basket Ops
    @ Company, 2015-current
  • Biomedical Basket Weaver
    @ Company, 2011-2015
  • Biomedical Basket Weaver
    @ Company, 2005-2011
  • Jr. Biomedical Basket Weaver
    @ Company, 2003-2005
  • Biomedical Basket Weaving Intern
    @ Company, 2001-2003
 
<div class="card">
	<!-- NOTE: the style attribute here is only for prototyping purposes. -->
	<section class="card__section prospect-id--referral" style="margin-bottom:0;">
		<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>
	<section class="card__section last-activity">
		<h3 class="last-activity__title">Most recent unseen activity log entry</h3>
		<p class="last-activity__details">by Ted Employeeson on April 13, 2017</p>
	</section>
	<section class="card__section contact-history-section">
		<h2 class="card__section-title">Contact history</h2>
		<ul class="card__two-line-list">
			<li class="list__item">
				<div class="list__item--row line-one">Lead responded to message</div>
				<div class="list__item--row line-two">August 17th, 2016</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">Recruiter Bob sent message</div>
				<div class="list__item--row line-two">August 14th, 2016</div>
			</li>
		</ul>
	</section>
	<section class="card__section referred-by">
		<h3 class="card__section-title">Referred by </h3>
		<ul class="card__two-line-list">
			<li class="list__item--row">
				<div class="line-one">Sally Thompsonton</div>
				<div class="disambiguation">sallythomp@somecompanyname.com</div>
				<div class="line-two">on July 12, 2017 for Big Data Engineer(#11223)</div>
		</ul>
	</section>
	<section class="card__section fitness-results">
		<h2 class="card__section-title">Survey results</h2>
		<h3 class="fitness-results__name">From Sally Thomsonton who's name you can use</h3>
		<ul class="card__two-line-list">
			<li class="list__item">
				<div class="list__item--row line-one">A professional contact</div>
				<div class="list__item--row line-two">Relationship</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">Can teach others</div>
				<div class="list__item--row line-two">Experience</div>
			</li>
			<li class="list__item">
				<div class="list__item--row line-one">"I think Candidate would be a great fit for us because she was such a rockstar when I worked with her at my last job."</div>
				<div class="list__item--row line-two">Comments</div>
			</li>
		</ul>
	</section>
	<section class="card__section contact-details">
		<h2 class="card__section-title">Contact info</h2>
		<ul class="contact-details__social-list">
			<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>
		<ul class="contact-details__contact-list">
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/email.svg" /> contact@email.com
			</a>
			</li>
			<li class="list__item">
				<a href="" class="link">
				<img class="icon" src="../assets/toolkit/img/social-icons/resume.svg" /> Resume uploaded April 25th 2017
			</a>
			</li>
		</ul>
	</section>
	<section class="card__section prospect-details">
		<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">
			<div class="prospect-details__connections">
				<h2 class="card__section-title">Connections at CompanyName</h2>
				<ul class="prospect-details__connections-list">
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-09.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Bob Jones</div>
							<div class="card-two-line-list-line-two">Bio-medical Basket Weaving Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-08.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Sally Longlastnamington</div>
							<div class="card-two-line-list-line-two">Marketing Manager</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
					<li class="list__item">
						<div class="list__item__col prospect-details__role-icon">
							<img class="" src="../assets/toolkit/img/ui-icons/smile-10.svg" />
						</div>
						<div class="list__item__col prospect-details__name-title">
							<div class="card-two-line-list-line-one">Ima S Pacefiller</div>
							<div class="card-two-line-list-line-two">Generic Job Title</div>
						</div>
						<div class="list__item__col prospect-details__request-referral">
							<a href="#"><img src="../assets/toolkit/img/ui-icons/ask-for-referral.svg" /></a>
						</div>
					</li>
				</ul>
			</div>
			<div class="prospect-details__skills">
				<h2 class="card__section-title">Relevant Skills</h2>
				<ul class="tag-list">
					<li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
        <li class="list__item"> <span class="tag">Foo Skill</tag></li>
      </ul>
    </div>
    <div class="prospect-details__recjobs">
      <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>
    </div>
    <div class="prospect-details__history">
      <h2 class="card__section-title">Work history</h2>
      <ul class="card__two-line-list">
        <li class="list__item">
            <div class="list__item--row line-one">Sr. Biomedical Basket Weaver &amp; Basket Ops</div>
            <div class="list__item--row line-two">@ Company, 2015-current</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2011-2015</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2005-2011</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Jr. Biomedical Basket Weaver</div>
            <div class="list__item--row line-two">@ Company, 2003-2005</div>
        </li>
        <li class="card__work-history-list__item">
            <div class="list__item--row line-one">Biomedical Basket Weaving Intern</div>
            <div class="list__item--row line-two">@ Company, 2001-2003</div>
        </li>
      </ul>
    </div>
</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__messsage-button">Send message</button></li>
    <li class="list__item"><button class="button--secondary card__ats-button">Send to ATS</button></li>
    <li class="list__item"><button class="button--secondary card__archive-button">Archive</button></li>
  </ul>
</section><div class="card__bottom-border--referral">&nbsp;</div></div>