Primary Jabra Colors

Jabra primary colors are black and yellow. Use the supporting and secondary color palette, only if necessary

Primary BlueParrott Colors

Secondary

Jabra secondary colors are blues and purples. We also adopt GN orange and use the supporting color palette if necessary.

Tertiary

Colors

White background

<a href="#" class="jbr-btn jbr-btn-large jbr-btn--yellow">Yellow button</a>
<a href="#" class="jbr-btn jbr-btn-large jbr-btn--dark">Dark button</a>
<a href="#" class="jbr-btn jbr-btn-large jbr-btn--dark-outline">Outline button</a>

Light background

<a href="#" class="jbr-btn jbr-btn-large jbr-btn--yellow">Yellow button</a>
<a href="#" class="jbr-btn jbr-btn-large jbr-btn--dark">Dark button</a>
<a href="#" class="jbr-btn jbr-btn-large jbr-btn--dark-outline">Outline button</a>

Dark background

<a href="#" class="jbr-btn jbr-btn-large jbr-btn--yellow">Yellow button</a>
<a href="#" class="jbr-btn jbr-btn-large jbr-btn--white-outline">Outline button</a>

Sizes

Large button .jbr-btn .jbr-btn-large

Small button .jbr-btn

Call to actions

Product images

Do

Do place images directly on the clear space line, so the product touches either the top and bottom, left and right or all sides side, depending on wether the product is wider or taller.

Don't

Do not make images cross the clear space or not touch the clear space at all. If the image is smaller, resize the clear space accordingly, keeping the 6.66% padding of both the height and width.

Code

Lazy loaded image

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C/svg%3E"  ng-attr-data-src="IMAGE URL" alt="DESCRIPTIVE ALT TAG">

You need to change the viewbox size: viewBox='0 0 width height'. The width and height should match the width and height of the image that appears after lazy loading.

Spacing

Padding between spots

Recommended minimum padding for a spot is 75px on bottom and 75px on top.

This should only be seen as a general guideline, as the content and background might require more or less padding.

Spacing before footer

As a general rule, there should always be sufficient padding in the last spot before the footer to seperate the content. The recommended setting is 100px and 75px should be minimum.

Topbanner

Banner heights
Category pages: 525px

Default top banner

.top-banner

Top banner with arrow

.top-banner .top-banner--arrow

Top banner with dark gradient

.top-banner .top-banner--gradient .top-banner--gradient-dark

Top banner Shipping Message

You can add the element manually if you need to control the position

<p class="product-shipping-message">&nbsp;</p>

If you don't add the paragraph, it will automatically get generated and added to the page after the last jbr-btn in the top banner.

Load this global JS spot into a JS sub-spot on the top banner

{DC00A1BC-F61F-4EB8-856A-6445CDBE8206}

Content boxes

White box

A white box can be used to place readable text on top of a background image.

Rules: Padding should be 50px

Condensed Menu

Left side

Should contain Product name, Category name or Campaign name

Middle

Navigation can contain the following, if applicable

• Overview
• Sound Demo
• Reviews
• Technical specifications
• FAQ
• Support

Right side

Should contain a yellow Buy now and a dark Category name or Campaign name

Slanted/angled lines

Add angled lines to sections.

Load this global CSS into the page on the page-level or through a ReplacementColumnSpot.

{850D34D0-1116-41F4-8FD3-03D15FE55D3D}

Slick slider

Slick Slider is used to show multiple elements in a carousel.

Documentation: http://kenwheeler.github.io/slick/

Video popup

Example buttons

<a class="jbr-btn jbr-btn-large jbr-btn--dark play-video-btn" data-youtube="0tpyM2Qg8Oo" href="#play">See video</a>
<a class="jbr-btn jbr-btn--text play-video-btn" data-youtube="0tpyM2Qg8Oo" href="#play">See video</a>

Magic Cards / Product cards

Magic Cards are used to show multiple products next to each other.

Latest versions are located here: {FF33E684-D55D-48A9-ADEB-1C88F29E8F30}

Product comparison spots

The compare spot is used to compare our different product families and should be placed on all product pages for our big product families; Elite, Evolve, Engage, Speak, Talk and the in-car category.

The spots should be placed below the customizer.

Latest versions are located here: {541B81F8-9C49-4857-A338-5978CA6DB449}

Category compare tables

The category compare spot is used on desktop devices (bigger than 768px) to compare products in a given category. For mobile the Product comparison spots should be shown.

Latest versions are located here: {9DEBD359-407B-482E-B280-433C604C4AFA}

TechSpecs

Spot used to show tech specs on the website.

An example can be found here: {BC4FDD1B-8788-41C4-BB3F-C8312DE97E60}

Remember to configure the product ID from PIM in the "Left" spot:

<div class="techspecs-engineered__options" data-lang="en-US" data-group="1222" style="display:none;"></div>

Color spot

Spot used to show available colors for a product.

Copy template to product folder: {41C44585-C7B8-4771-8E2C-8D7004050D1D}}

Hotspot spot

Spot used to show product features.

Copy template to product folder: {2A4CCFA1-948B-41ED-9EE4-C6DA4BEC995A}

Sound Demo

Spot used to present 2 sound clips side by side. The user can switch between them while the sound is playing.

An example can be found here

Template

{FCB46909-6E91-4D75-A6FC-939B2ED12379}

Icon code

<i class="icon icon___apple-logo" style="font-size:52px"></i>
<i class="icon icon__skype_logo" style="font-size:52px; color:#00aff0"></i>

To change the icon, change the second class in the code above "icon___apple-logo" with a class from the icon list below.

NB: It is recommended to change the font-size and color with CSS classes.

Icon list