
Style Guide
This is a simple styleguide to help business people create/edit elements in any page of the site
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
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:
ButtonYou 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-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-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.

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

<img src="[image-path name='careers_site_1.png']">
<div class="bullet"> <span class="jscore-paperplane"></span> Drive employee referrals and social job sharing </div>
Below, the other bullets icons available:
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>
Homepage Top Bar / Menu

Employer Top Bar / Menu

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>
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
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>
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 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
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>
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
.png)
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
.png)
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:
.png)