Typography

Our default typography is Proxima-Nova and it is 16px big. See below the possible applications:

Headline 1 – 30px

<h1>Headline 1 - 30px</h1>

Headline 2 – 22px

<h2>Headline 2 - 22px</h2>

Headline 3 – 18px

<h3>Headline 3 - 18px</h3>

Headline 4 – 16px

<h4>Headline 4 - 16px</h4>

Headline 5 – 13px

<h5>Headline 5 - 13px</h5>

Headline 6 – 10px

<h6>Headline 6 - 10px</h6>

Fusce tincidunt lectus vel dui ornare, ornare hendrerit libero ornare. Aliquam dapibus justo in nibh lacinia, et porttitor odio ullamcorper. Aliquam sit amet vestibulum elit, eu maximus dolor.

<p>Fusce tincidunt lectus vel dui ornare, ornare hendrerit libero ornare.
Aliquam dapibus justo in nibh lacinia, et porttitor odio ullamcorper.
Aliquam sit amet vestibulum elit, eu maximus dolor.</p>

Links

Sample link

To insert a link on any page, just use the shortcode below:

[link-path name="demo-request" search_params="utm_source=jobscore&utm_medium=resume-database"]

Where attributes mean:

name: The name of the page which button links to. The following names are available:

Name	Links to
about	About
agreements	Agreements
aplicant-tracking-systems	Applicant Tracking
careers-site	Careers Site
contact-sales	Contact Sales
demo-access-confirm
demo-access
demo-matching	Matching
demo-request	Demo Request
employer-agreement	Employer Agreement
employer-tour	Tour
home	Home
homepage	Home
job-posting	Job Posting
jobseeker-agreement	Jobseeker Agreement
jobseeker-faq	Jobseeker FAQ
jobseeker-home	Job Seeker Home
jobseeker-tour	Jobseeker Tour
pricing	Pricing
privacy-guarantee	Privacy Guarantee
privacy-policy	Privacy Policy
resume-database	Resume Database
resume-sharing	Resume Sharing
signup	Sign Up
social-recruitment	Social Recruiting
styleguide	Styleguide
terms-of-service	Terms of Service
job-boards	Supported Job Boards
testimonials	Customers

external_link: The external link which button links to.
section: A possible anchor section on the page which button links to
i.e. https://www.jobscore.com/about/#contact_us.
search_params: Possible params used by wordpress or third servicesas Google Analytics
i.e. https://www.jobscore.com/about/?utm_source=google&utm_medium=organic&utm_campaign=seo.

Buttons

The simplest button you can use is the default blue button:

Button

You can put that button on the site just adding the following shortcode in any place of a page

[button-path text="Button" button_style="blue"]

button_style can receive more attributes according your needs, as follows:

Button Solid

[button-path text="Button Solid" button_style="blue solid"]

Button Solid Green

[button-path text="Button Solid Green" button_style="green solid"]

Button Solid Green Tall

[button-path text="Button Solid Green Tall" button_style="green solid tall"]

To make any button full width, just add full to the button_style attribute

Button Full

[button-path text="Button Full" button_style="blue full"]

Button Full Green Solid Tall

[button-path text="Button Full Green Solid Tall" button_style="green full solid tall"]

Other possible attributes include:

name: The name of the page which button links to. The following names are available:

Name	Links to
about	About
agreements	Agreements
aplicant-tracking-systems	Applicant Tracking
careers-site	Careers Site
contact-sales	Contact Sales
demo-access-confirm
demo-access
demo-matching	Matching
demo-request	Demo Request
employer-agreement	Employer Agreement
employer-tour	Tour
home	Home
homepage	Home
job-posting	Job Posting
jobseeker-agreement	Jobseeker Agreement
jobseeker-faq	Jobseeker FAQ
jobseeker-home	Job Seeker Home
jobseeker-tour	Jobseeker Tour
pricing	Pricing
privacy-guarantee	Privacy Guarantee
privacy-policy	Privacy Policy
resume-database	Resume Database
resume-sharing	Resume Sharing
signup	Sign Up
social-recruitment	Social Recruiting
styleguide	Styleguide
terms-of-service	Terms of Service
job-boards	Supported Job Boards
testimonials	Customers

external_link: The external link which button links to.
section: A possible anchor section on the page which button links to
i.e. https://www.jobscore.com/about/#contact_us.
search_params: Possible params used by wordpress or third servicesas Google Analytics
i.e. https://www.jobscore.com/about/?utm_source=google&utm_medium=organic&utm_campaign=seo.

Forms

This is a label sample for an input:

<label>
This is a label sample for an input:
</label>
<input type="text" placeholder="Sample placeholder">

This is a label sample for a select:

<label>
This is a label sample for a select:
</label>
<select>
<option value="">Select an option...</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>

This is a label sample for single choice question: Yes No

<label>
This is a label sample for single choice question:
</label>
<label class="inline">
<input type="radio" name="sample_radio" value="yes">
Yes
</label>
<label class="inline">
<input type="radio" name="sample_radio" value="no">
No
</label>

This is a label sample for multiple choice question: Indeed Krop Linkedin

<label>
This is a label sample for multiple choice question:
</label>
<label class="inline">
<input type="checkbox" name="service" value="indeed">
Indeed
</label>
<label class="inline">
<input type="checkbox" name="service" value="krop">
Krop
</label>
<label class="inline">
<input type="checkbox" name="service" value="linkedin">
Linkedin
</label>

Images

To insert an image on any page, use the image-path shortcode as follows:

<img src="[image-path name='job_posting_1.png']">

<img src="[image-path name='careers_site_1.png']">

Bullets

Bullets are an easy and beatiful way to show topics on the page

Drive employee referrals and social job sharing

<div class="bullet">
<span class="jscore-paperplane"></span>
Drive employee referrals and social job sharing
</div>

Below, the other bullets icons available:

<span class="jscore-coracao">
</span>

<span class="jscore-free-label">
</span>

<span class="jscore-pin2">
</span>

<span class="jscore-workflow3">
</span>

<span class="jscore-people-magnifying-glass">
</span>

<span class="jscore-workflow2">
</span>

<span class="jscore-padlock-locked">
</span>

<span class="jscore-gear3">
</span>

<span class="jscore-headset-with-mic">
</span>

<span class="jscore-heart3">
</span>

<span class="jscore-google-new-blue">
</span>

<span class="jscore-google-new-green">
</span>

<span class="jscore-google-new-red">
</span>

<span class="jscore-google-new-yellow">
</span>

<span class="jscore-check2">
</span>

<span class="jscore-check">
</span>

<span class="jscore-arrow-up-with-circle">
</span>

<span class="jscore-wallet-arrow">
</span>

<span class="jscore-wallet">
</span>

<span class="jscore-analytics">
</span>

<span class="jscore-workflow">
</span>

<span class="jscore-airplane">
</span>

<span class="jscore-menu">
</span>

<span class="jscore-fones">
</span>

<span class="jscore-lock">
</span>

<span class="jscore-gear2">
</span>

<span class="jscore-gear">
</span>

<span class="jscore-doc">
</span>

<span class="jscore-comments">
</span>

<span class="jscore-heart">
</span>

<span class="jscore-call">
</span>

<span class="jscore-jobscore-inline-2">
</span>

<span class="jscore-jobscore-inline-1">
</span>

<span class="jscore-link">
</span>

<span class="jscore-clock">
</span>

<span class="jscore-note">
</span>

<span class="jscore-tag">
</span>

<span class="jscore-paperplane">
</span>

<span class="jscore-pin">
</span>

<span class="jscore-time">
</span>

<span class="jscore-twitter">
</span>

<span class="jscore-facebook">
</span>

<span class="jscore-google">
</span>

<span class="jscore-linkedin">
</span>

<span class="jscore-resume">
</span>

<span class="jscore-candidates">
</span>

<span class="jscore-report">
</span>

<span class="jscore-trophy">
</span>

<span class="jscore-globe">
</span>

<span class="jscore-rssdoc">
</span>

<span class="jscore-user">
</span>

<span class="jscore-heart2">
</span>

<span class="jscore-stack-text">
</span>

<span class="jscore-google-plus">
</span>

Bullets list

Integrate once, publish forever – you’ll never have to ask your webmaster to make changes again!
Customize JobScore to match your website’s look and feel.
Multiple Self-service integration options: choose a simple link-out, a configurable widget or consulting fees.

<ul>
<li>Integrate once, publish forever - you'll never have to ask your webmaster to make changes again!</li>
<li>Customize JobScore to match your website's look and feel.</li>
<li>Multiple Self-service integration options: choose a simple link-out, a configurable widget or consulting fees.</li>
</ul>

Top Bar

The top bar and its menu is dynamically configurable via Admin Dashboard, so you don’t need to worry about any code here.
Below, you can check top bar style and responsiveness:

Homepage Top Bar / Menu

Employer Top Bar / Menu

Areas

Areas represent sections on the site. See how to use it below:

Sample Gray Area

<section class="gray">
<div class="row">
<div class="small-12 columns">
  <h2>Sample Gray Area</h2>
</div>
</div>
</section>

Sample Background Area

<section class="background1 is-cover">
<div class="row">
<div class="small-12 columns">
  <h2 class="white">Sample Background Area</h2>
</div>
</div>
</section>

Sample White Area

<section>
<div class="row">
<div class="small-12 columns">
  <h2>Sample White Area</h2>
</div>
</div>
</section>

Inline Changes Tutorial

Tips that are going to help non-developers to make small changes on the site:

Classes for font-weigh

The bold tag (<b></b>) is with 400 of font-weight, but if you want to use others weights you can use the style modifier

Exemple:

<div class="row">
  <div class="styleguide-exemple-section">
    <b>Some text</b><br>
    <span style="font-weight: 200;">Some text</span>
  </div>
</div>

Some text
Some text

Text align

To align text you can use four css styles attributes: center, right, left, justify

See exemples:

<div class="row">
  <div class="styleguide-exemple-section">
    <h1 style="text-align: center;">Text-align example</h1>
      <p style="text-align: right">Jobscore is right for you!</p>
      <p style="text-align: left">Discover more about our plans:</p>
      <p style="text-align: justify">The Start, Scale and Enterprise plans ... </p>
      <p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
  </div>
</div>

Text-align example

Jobscore is right for you!

Discover more about our plans:

The Start, Scale and Enterprise plans give you control over resume sharing, including the ability to completely turn it off. When you do share a resume, it’s just a copy – JobScore never takes away your resumes. The Start, Scale and Enterprise plans give you control over resume sharing, including the ability to completely turn it off. When you do share a resume, it’s just a copy – JobScore never takes away your resumes.

Note: Resize the browser window to see how the value “justify” works.

How to change text color and background color

To change the color of the text you can use the style modifier or, if you are using the font tag you can use the “color” modifier or, you can use the default classes as well, like: .is-text-light, .is-text-brown, .is-color-dark

To change the background color you can use the style “color” or the default classes as well, like: .is-background-light, .is-background-blue and .is-background-dark-blue

Exemple:

<div class="row">
  <div class="styleguide-exemple-section">
    <div style="color: #E05254;">Some text</div>
    This is <font color="blue">Some Random text</font>
    my <span style="color: green;">fellow</span>
    <div class="is-background-blue">
      <span class=".is-color-dark"></span>
    </div>
    <div class="is-background-dark-blue">
      <span class=".is-text-light"></span>
    </div>
    <div style="background-color: #c3c3c3">
      <span class=".is-text-light"></span>
    </div>
  </div>
</div>

Some text

This is Some Random text my fellow

dark text with light background

light text with a dark background

light text with background inline style

How to change font-size

To change the font-size of a text you will need to change the style of the container, or you could use the Typography

Exemple:

<div class="row">
  <div class="styleguide-exemple-section">
    This is <span style="font-size: 30px;">Some Big text</span><br>
    This is <span style="font-size: 10px;">some Small text</span>
    <h1>Title 1</h1>
    <h4>Title 4</h4>
  </div>
</div>

This is Some Big text
This is some Small text

Title 1

Title 4

How to set uppercase

To use text with uppercase or lowercase, you just need to type in that way, but if you want to change an existing text you can use add the classes

Exemple:

<div class="row">
  <div class="styleguide-exemple-section">
    THIS IS <span class="is-text-lowercase">SOME TEXT</span><br>
    this is <span class="is-text-uppercase">some text</span>
  </div>
</div>

THIS IS SOME TEXT
this is some text

How to add more whitespace at the top / bottom of a section

To add some space before or after a content you can use some margin or padding. But usually the margin is a better choice, because the paddig is used to add some space between the border and the content.

Other Important observation is that you can add a space on the top, bottom, right and left all at once, using: margin: 10px 15px 8px 6px (top: 10px, right: 15px, botton: 8px, and left: 6px)

Exemple:

<div class="row">
  <div class="styleguide-exemple-section">
    <div style="margin-top: 20px;">Some text</div><br>
    <div style="margin-left: 20px;">Some text</div>
    <div class="is-background-blue" style="margin-top: 100px; margin-bottom: 100px">
      Using margin will keep the background-color of body page
    </div>
    <div class="is-background-dark-blue" style="padding-top: 100px; padding-bottom: 100px">
      Using padding will keep the background-color of section
    </div>
  </div>
</div>

Some text

Using margin will keep the background-color of body page

Using padding will keep the background-color of section

How to add a dropshadow to a screenshot

To add some dropshadow to a screenshot you will just need to add the class has_shadow to the container.

Exemple:

    <div class="styleguide-exemple-section" style="text-align: center">
      <img class="has_shadow small-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/uploads/headshot_jonathan_lowenhar.jpg">
      <img class="has_shadow medium-image" style="margin: 20px" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/uploads/headshot_jonathan_lowenhar.jpg">
      <img class="has_shadow big-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/uploads/headshot_jonathan_lowenhar.jpg">
    </div>

How to adjust the proportions of a <section>

To change the proportion of contents you can use the width percentage to adjust. Also, for the contents stay side by side they need to be floating to the left

Exemple:

<div class="row">
  <div class="small-12">
    <div class="section-fixed-height-container clearfix">
      <div style="width: 65%" class="section-half-content-container section-half-copy-container">
        <div class="section-half-content">
          <h2 class="section-title-secondary">Example of regular section divided 65/35.</h2>
          <ul class="list-base is-text-big vertical-offset-sm">
            <li>The first text section represents 65% of the total width of the row</li>
            <li>The sencond image section represents the other 35% of the total width</li>
          </ul>
        </div>
      </div>
      <div style="width: 35%" class="section-half-content-container section-half-image-container">
        <div class="section-half-content">
          <img src="https://s3.amazonaws.com/jobscore-marcom/desktop-mobile-ipad-iphone-mockup(2).png">
        </div>
      </div>
    </div>
  </div>
</div>

Example of regular section divided 50/50.

The first text section represents 50% of the total width of the row
The sencond image section represents the other 50% of the total width

Example of regular section divided 65/35.

The first text section represents 70% of the total width of the row
The sencond image section represents the other 35% of the total width

How to change the size of an image

To change the dimensio of a image you can change the width or the height of the image, but never both at the same time.

Exemple:

<div class="row">
  <div class="styleguide-exemple-section" style="text-align: center">
    <img style="height: 150px;" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/uploads/headshot_jonathan_lowenhar.jpg">
    <img style="width: 150px; margin: 20px" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/uploads/headshot_jonathan_lowenhar.jpg">
    <img style="width: 250px;" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/uploads/headshot_jonathan_lowenhar.jpg">
  </div>
</div>

Using devices images

To add some devices (i.e notebook, tablets, mobile …) you will need to check some templates on this and update according to your desire. After editing and uploading on corpsite you can use the image:

Style Guide

Typography

Headline 1 – 30px

Headline 2 – 22px

Headline 3 – 18px

Headline 4 – 16px

Headline 5 – 13px

Headline 6 – 10px

Links

Buttons

Forms

Images

Bullets

Bullets list

Top Bar

Homepage Top Bar / Menu

Employer Top Bar / Menu

Areas

Sample Gray Area

Sample Background Area

Sample White Area

Inline Changes Tutorial

Classes for font-weigh

Text align

Text-align example

How to change text color and background color

How to change font-size

Title 1

Title 4

How to set uppercase

How to add more whitespace at the top / bottom of a section

How to add a dropshadow to a screenshot

How to adjust the proportions of a <section>

Example of regular section divided 50/50.

Example of regular section divided 65/35.

How to change the size of an image

Using devices images