Style Guide – Targus US

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
#4e008e;
$targus-blue
#00b5e2;
$targus-green
#84bd00;
$targus-red
#ba0c2f;
$targus-orange
#ee7623;
$targus-yellow
#ffcd00;
Grays
$dark-gray
#3a3a3a;
$gray
#cccccc;
$light-gray
#f1f1f1;

Buttons

Default Button
Learn More
.global-button {
width: 100%;
height: 40px;
line-height: 40px;
background: #00b5e2;
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: #84bd00;
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
Example 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
Example Location File Dimensions Display Size File Type
Main Banner 2000x800 100% .jpg
Square Tile 1400x1400 570x570 .jpg
Wide Banner 2000x500 100% .jpg
Targus Advantage 500x250 250x125 .png
Collection Page
Example Location File Dimensions Display Size File Type
Main Banner 2000x500 100% .jpg
Top Ad 1600x200 100% .jpg
Sidebar Ad 500x500 232x232 .jpg
Product Page
Example Location File Dimensions Display Size File Type
Main Image 1200x1200 548x548 .jpg
Premium Content 750x500 548x365 .jpg
Open Graph 1200x630 527x354 .jpg
Navigation
Example Location File Dimensions Display Size File Type
Nav Dropdown 400x400 180x180 .jpg
Search Results
Example Location File Dimensions Display Size File Type
Search Results 2000x300 100% .jpg
Press Room
Example Location File Dimensions Display Size File Type
Main Image 900x600 781x520 .jpg
Blog
Example Location File Dimensions Display Size File Type
Main Image 2000x1000 1160x587 .jpg
Social
Example Location File Dimensions Display Size File Type
Insta Post 1080x1080 100% .jpg
Insta Story 1080x1920 100% .jpg
Facebook & Twitter 940x788 100% .jpg
LinkedIn 1200x628 100% .jpg
Pintest 735x1102 100% .jpg