sandwichUI
from the team at 
Last updated: 24 May 2017
sandwichUI
from the team at
Last updated: 24 May 2017
The Card Modules are the pieces that make up the Prospect Card, the representation of a person inside the Simppler system. The modules themselves are highly specialized pieces of interface to display a particular aspect of a prospect's journey through the referral process. The modules themselves are not associated with any particular view and can be used in multiple configurations, although some are so specialized as to only appear in one view.
There are currently seven different card configurations in Simppler, with some modules being shared across configurations.
The action bar is the natural ending point for a prospect card, the container where all possible actions are available to the user. Consolidating all the available actions for a specific card allows us to create a reliable place in the UI for actions and allows users to build muscle memory around interacting with prospects in the system. The action bar contains different buttons depending on where in the system the prospect card is being shown.
Prospect cards in the employee application's in progress view present this action bar configuration.
<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>Prospect cards in the employee application's recommendations view present this action bar configuration.
<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>Prospect cards in the employee application's requests view present this action bar configuration.
<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>Prospect cards in the employee application's referred view present this action bar configuration.
<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>Prospect cards in both the employee and recruiter application that have their message compose section active present this action bar configuration as long as the message compose component is active.
<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>Once a prospect has been contacted by anyone, the recruiter application presents this action bar configuration with the prospect card.
<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>Prospect cards in the recruiter application's leads view present this action bar configuration.
<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>The activity feed module allows us to show users all of the recent activity a prospect has been involved in. The activity feed shows: messages sent, messages received, when an endorsement was made, when a referral was made, and ATS status changes. The information is always shown in reverse-chronological order (newest to oldest) and if the list grows to longer than 6 entries the unit becomes expandable.
<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>The contact details module displays quick access to the contact information we have for a prospect. This module shows linked to social media profiles, email addresses we have on file, and a link to a resume if one has been uploaded. Currently the social media links that are possible are: LinkedIn, Facebook, Google+, Github, Twitter, Dribbble, AngelList, Pinterest, About.me, and Wordpress.
contact@email.com
Resume uploaded April 25th 2017
<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>The fitness evaluation form is shown to employee users when they endorse or refer a prospect.
<section class="card__section fitness-form">
<form>
<h3 class="card__section-title">Prospect_Name is </h3>
<div class="fitness-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">
A professional contact
</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">
A social contact
</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">
An academic contact
</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">
I don't know Prospect_Name
</label>
</div>
</div>
</div>
<h3 class="card__section-title">Prospect_Name's experience for this role is </h3>
<div class="fitness-form__group">
<div class="radio-group">
<div class="radio-button">
<input type="radio" name="know-candidate" id="exp-01" class="radio-button__real-radio">
<label for="exp-01" class="radio-button__label">
Ready to learn
</label>
</div>
<div class="radio-button">
<input type="radio" name="know-candidate" id="exp-02" class="radio-button__real-radio">
<label for="exp-02" class="radio-button__label">
Hit the ground running
</label>
</div>
<div class="radio-button">
<input type="radio" name="know-candidate" id="exp-03" class="radio-button__real-radio">
<label for="exp-03" class="radio-button__label">
Can teach others
</label>
</div>
</div>
</div>
<h3 class="card__section-title">Prospect_Name's resume (optional) </h3>
<div class="fitness-form__group">
<button class="button--primary ">Attach resume</button><span class="resume-label">prospectResume.pdf</span>
</div>
<h3 class="card__section-title">Anything else about Prospect_Name</h3>
<div class="fitness-form__group">
<textarea class="card__message-textarea"></textarea>
<div class="checkbox">
<input type="checkbox" id="checkbx1" class="checkbox__real-checkbox" checked="true">
<label for="checkbx1" class="checkbox__label">
Recruiting can use your name.
</label>
</div>
</div>
</form>
</section>The fitness results module shows recruiters the results of the fitness evaluation survey in the endorsement and referrals views. If a prospect has been endorsed by multiple users, the module shows each set of results in reverse chronological order(newest to oldest.)
<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>The last activity module shows the most recent unseen activity for this prospect. This allows us to quickly show recruiters which cards are "new" or have updated information in them. If there are multiple unseen activities for a card only the most recent of them is shown.
Note: When the last activity module is visible the candidate-ID section's bottom margin must be overridden to 0.
by Ted Employeeson on April 13, 2017
<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>The message compose module allows a user to compose a message to a prospect in the prospect card, keeping all the information about the card at hand. As sending a message is the end of most interactions with a prospect in Simppler, keeping the user in the same page allows her to send a message and quickly move on to other related prospect cards.
The employee message compose module is basic message box. It pulls in the template defined by the organization as a suggestion for how to compose a message. All the content from the template can be overridden by the user if she so chooses.
<div class="card">
<section class="card__section message-section--nre">
<h2 class="card__section-title">Message to Candidate Name</h2>
<!-- fake template text inside-->
<textarea class="message-section__textarea">
Hey there Candidate,
Long time no see! I've been working at SuperHappyFunCo for a year now and it's one of the best jobs I've ever had. We're currently looking for a Lead Biomedical Basket Weaver and I thought you'd be perfect, since you were so awesome in our Biomedical Basket Weaving class back at Stanford. If you're interested let me know!
Rock on,
Basket Weaver Sara
</textarea>
</section>
</div>The recruiter message compose module is a basic message box and a selector that allows the recruiter user access to her library of pre-defined templates. All content from the template can be overridden by the user if she so chooses.
<section class="card__section message-section--recruiter">
<h2 class="card__section-title">Message to Candidate Name</h2>
<div class="dropdown--left">
<div class="dropdown-container">
<p class="dropdown-button">Template Name 01</p>
<ul class="dropdown-menu dropdown-select">
<li class="dropdown-menu__item">Template Name 01</li>
<li class="dropdown-menu__item">Template Name 02</li>
<li class="dropdown-menu__item">Template Name 03</li>
<li class="dropdown-menu__item">Template Name 04</li>
</ul>
</div>
</div>
<!-- fake template text inside-->
<textarea class="message-section__textarea">
Hey there Candidate,
How does your current job make you feel? Like a winner? Like someone who is going to change the world by disrupting the universe-denters? If you didn't answer yes to all of these questions, then we need to talk. Here at SuperHappyFun Co. we are a rocket ship on the way to not just making a dent in the universe, we're going to take a chunk out of the whole damn thing.
Sound interesting? Let's grab a coffee and talk about how you can be a great fit for [JOB TITLE] here at SupperHappyFun Co.
Rock on,
Recruiter Jim
</textarea>
</section>All prospect cards in the recruiter application include the prospect details module. This module is always closed by default because it contains the most comprehensive information we display about a prospect, an overwhelming amount of information to present before a recruiter asks for it.
Prospect details includes: connections at the user's company, a list of relevant skills, the two highest scored recommendations we have for the prospect, and their work history.
details
<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"> </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 & 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>The prospect ID module is the natural starting point for a prospect card, the summary representation of who this person is in the context of being considered for a open position at a company. This module subtly signals which part of the process the prospect is in with it's background image.
This is the place in most applications where a big picture of the prospect would be featured more prominently than any other piece of information. Despite the widespread use of this pattern, even in HR applications, we choose to remove this potentially biasing piece of information in an attempt to improve the diversity of the referrals pool for a given job opening.
Prospect cards in both the applications' contacted views present this prospect ID configuration.
<!-- 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 & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>Prospect cards in the recruiter application's endorsement view present this prospect ID configuration.
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--endorsement" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>Prospect cards in the recruiter application's leads view and and the employee application's recommendations view present this prospect ID configuration.
<!-- NOTE: the style attribute here is only for prototyping purposes. -->
<section class="card__section prospect-id--lead" style="">
<div class="prospect-id__name">
<span class="card__blockbg">Candidate Name</span>
</div>
<div class="prospect-id__title">
<span class="card__blockbg">Sr. Biomedical Basket Weaver & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>Prospect cards in both the applications' referrals views present this prospect ID configuration.
<!-- 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 & Basket Ops @ Initech </span>
</div>
<div class="prospect-id__location">
<span class="card__blockbg">Anytown, USA</span>
</div>
</section>The recommend summary is the featured module on cards in the employee application. The module's purpose is to quickly help the user answer the question, "How do I know this person?" so she can make a decision to refer, endorse, or archive the prospect. The recommend summary always includes: The top job recommendation we have for the prospect, a list of social media links for the prospect, and a list of information we have about how the user may know the prospect. Depending on the configuration the module is used in, there is a collapsable and a non-collapsible version.
Currently the social media links that are possible are: LinkedIn, Facebook, Google+, Github, Twitter, Dribbble, AngelList, Pinterest, About.me, and Wordpress. Currently the possible "how you may know" values are: an in-common company name, an in-common school name, "from LinkedIn", and "From your address book"
This is the version of this module used in the Employee Contacted card configuration.
details
Some Company Name
Some Company Name
Some School Name
<section class="card__section recommend-summary">
<div class="disclosure-control">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule" />
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>
<div class="card__details-container">
<h2 class="card__section-title">You may know Candidate-First-Name from</h2>
<div>
<ul class="recommend-summary__list">
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__business" src="../assets/toolkit/img/business.svg">
</div>
<p class="recommend-summary__list-text">Some Company Name</p>
</li>
<li class="list__item">
<div class="recommend-summary__icon">
<img class=" icon__school" src="../assets/toolkit/img/school.svg">
</div>
<p class="recommend-summary__list-text">Some School Name</p>
</li>
</ul>
</div>
<h2 class="card__section-title">Recommended jobs</h2>
<ul class="card__two-line-list">
<li class="list__item">
<div class="list__item--row line-one">Lead Biomedical Basket Weaver</div>
<div class="list__item--row line-two">Blue team, Anytown, ST USA</div>
</li>
</ul>
<h2 class="card__section-title">Candidate-First-Name on social media</h2>
<ul class="recommend-summary__social-media">
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/medium.svg" alt="Medium" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link card__social-icon" href="#"><img class="icon" src="../assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>
</div>
</section>This is the version of this module used in the Employee Recommendation card configuration.
Some Company Name
Some Company Name
Some School Name
<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>The referral request module is shown to employee users when they are in the Requests view. All cards within this section have the Referral Request module.
Hey Megan,
Will you refer [CANDIDATE NAME], I think they'd be a good match for our open [JOB TITLE] role.
Thanks!
Recruiter Jim
<!-- --------------------------------------->
<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>The referral request decline form is shown to employee users when they decline a recruiter's referral request.
<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>The referred-by module displays if a prospect has been successfully referred, making it easy for a recruiter to see who the referring employee is at a glance. This module only shows up on cards in the recruiter application in the contacted and referral states.
<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>The talent summary is the featured module in the recruiter app's Leads view (formerly Talent Radar.) The module's purpose is to allow a recruiter to quickly make a decision about a prospect by showing her the three most important attributes (based on our field research) a recruiter looks for first in a prospect: "Where did you go to school", "Do you have enough experience?", "Are you a job hopper?" The talent summary includes the following data when it is available: Continuity — the two most recent jobs a prospect has held and how long she held them, Experience — a total count of a prospect's years of experience, and Education — a list of up to three most recent schools the prospect has attended.
15 yrs
<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 & 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>