Style Guide

Typography

Banner Heading

Banner Heading Example Two Lines

#pgs-banner-title h1 {
font-family: "proxima-nova", sans-serif;
font-size: 40px;
font-weight: 900;
line-height: 35px;
margin-bottom: 10px;
text-transform: uppercase;
}

Banner Subhead

Example Subhead That Goes to Two Lines And Has a Max Width of 480px.

#pgs-banner-description p {
font-family: "proxima-nova", sans-serif;
font-size: 20px;
font-weight: 300;
line-height: 25px;
}

Default Font Style

Ultra-slim and lightweight with understated style to spare, the Targus 12" - 15.6" CityLite Pro Compact Convertible Backpack protects your laptop and provides adaptable carrying - for whatever your day has in store. Easily convert from backpack and briefcase carrying to suit your style or task at hand. Just detach and stow shoulders traps neatly away for sleek briefcase carrying with the low-profile side handle. Take it for a ride atop your luggage for travelling ease with the integrated luggage trolley strap.

@mixin font-style-normal {
color: #3a3a3a;
font-family: "proxima-nova", sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 26px;
}

Default Unordered List

List Item 1
List Item 2
List Item 3
List Item 4

@mixin font-style-normal {
color: #3a3a3a;
font-family: "proxima-nova", sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 18px;
list-style: disc outside;
margin: 0 0 8px 12px;
}

Colors

Primary Colors

$targus-purple

#422e5d;

$targus-blue

#00b8e4;

$targus-green

#6abe2a;

$targus-red

#d61e3d;

$targus-orange

#fe9700;

Grays

$dark-gray

#3a3a3a;

$gray

#cccccc;

$light-gray

#f1f1f1;

Links

Default Link

VersaVu™ Rotating Case and Stand for iPad 2/3/4

.global-link {
color: #00b8e4;
font-weight: 700;
}

Buttons

Default Button

Learn More

.global-button {
width: 100%;
height: 40px;
line-height: 40px;
background: #00b8e4;
font-family: "proxima-nova", sans-serif;
font-size: 14px;
color: #fff;
display: inline-block;
font-weight: 600;
text-align: center;
margin: 0 auto 0 auto;
padding: 0 30px;
}

Add to Cart Button

Add to Cart

#add-to-cart-button {
width: 100%;
height: 44px;
line-height: 44px;
background: #6abe2a;
font-family: "proxima-nova", sans-serif;
font-size: 14px;
color: #fff;
display: inline-block;
font-weight: 600;
text-align: center;
margin: 0 auto 0 auto;
padding: 0 30px;
text-transform: uppercase;
}

Out of Stock Button

Sold Out

#out-of-stock-button {
width: 100%;
height: 44px;
line-height: 44px;
background: #ccc;
font-family: "proxima-nova", sans-serif;
font-size: 14px;
color: #fff;
display: inline-block;
font-weight: 600;
text-align: center;
margin: 0 auto 0 auto;
padding: 0 30px;
text-transform: uppercase;
}

Forms

Default Input Form

Images

Global

Example	Location	File Dimensions	Display Size	File Type
	Logo	274x52	137x26	.png

Social Icons

Location	File Dimensions	Display Size	File Type
Facebook	48x48	20x20	.png
Twitter	48x48	20x20	.png
Email	48x48	20x20	.png
Print	48x48	20x20	.png
Share	48x48	20x20	.png

Home Page

Location	File Dimensions	Display Size	File Type
Main Banner (Align Top)	800x400	520x260	.png
Main Banner (Align Right)	800x800	400x400	.png
Square Tile	1400x1400	570x570	.jpg
Wide Banner	2000x500	100%	.jpg
Targus Advantage	500x250	250x125	.png