Welcome to the Viking web site style guide. Here you will find style and interaction definitions for common elements used across the web site. This library is based on the Boostrap 4 library and includes several predefined javascript functions for interactions.

Palette

Theme

#2d766c is reserved for Viking One colourways.

The Viking web site uses the Roboto font family from Google fonts. The variations of these fonts are described below:

Type faces

Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn't compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

This is the regular family, which is used in various locations throughout the site.

Roboto Condensed

This is the Condensed family, which is used in various locations throughout the site.

Only used for titles H1, H2, H3...

Roboto Slab

This is the Slab family, which is used in various locations throughout the site.

Utilised in special situations like vouchers codes (TBC)...

Headings

The following section describes the style of headings and their usage across the Viking web site:

Headings

Heading H1 - Roboto Condensed 30px; font-weight: 700;

Heading H2 - Roboto Condensed 24px; font-weight: 700;

Heading H3 - Roboto 18px; font-weight: 700;

Heading H4 - Roboto 16px; font-weight: 700;

Heading H5 ? - Do we use this?

Heading H6 ? - Do we use this?

Text styles

The following section describes various text styles and their usage across the Viking web site:

Text styles

Paragraph large

16 pixels is the larger font size, and can be used for emphasis within heading sections of text within the web site.

Paragraph standard

14 pixels is the standard text font size. Use this for general body copy across the web site.

Paragraph small

12 pixels is the small font size for copy. Use this for footnote text, footer links and copyright, and sign off texts.

Ordered list

This is an ordered list item.
An ordered list is a list in which the sequence of items is important.

Unordered list

This is an unordered list item.
An unordered list is a list in which the sequence of items is not important.

Check list

Faster cash processing
Simple new order and return
Save your shopping list
A tick list can be used within the My Account flyout menu (Desktop).

Unstyled list

This is an unstyled list item
Used for footer list links.

Inline list (footer)

Standard link

A standard link

Sentence link

A link within a sentence can be given additional emphasis when nested within a paragraph tag.

List facets

€0-€5 (27)
€5-€10 (32)
€5-€10 (32)

Breadcrumb

Product page - Header list navigation

The icons included in this page constitute all of the icons currently employed on the Viking web site. These are all served by fontawesome scalable vector icons.

Regular | User (my account)
far fa-user
Solid | Spinner
fas fa-spinner
Solid | Caret up
fas fa-caret-up
Brands | YouTube
fab fa-youtube
Solid | Trophy
fas fa-trophy
Solid | Star (half)
fas fa-star-half
Solid | Search
fas fa-search
Solid | Bars (hamburger menu)
fas fa-bars
Solid | Caret down
fas fa-caret-down
Solid | Times circle (cross)
fas fa-times-circle
Solid | Thumbs up
fas fa-thumbs-up
Solid | Pencil
fas fa-pencil-alt
Solid | Chevron down
fas fa-chevron-down
Solid | Info (alert)
fas fa-info
Solid | Arrow left
fas fa-arrow-left
Solid | Minus
fas fa-minus
Solid | File Alt
fas fa-file-alt
Solid | Plus
fas fa-plus
Regular | Star (half full)
far fa-star-half
Brands | Twitter
fab fa-twitter
Solid | Gift (free)
fas fa-gift
Solid | Phone
fas fa-phone
Solid | Chevron right
fas fa-chevron-right
Solid | Info circle (bubble)
fas fa-info-circle
Solid | Shopping cart (basket)
fas fa-shopping-cart
Brands | Facebook (f)
fab fa-facebook-f
Regular | Comment (chat)
far fa-comment
Regular | Check Circle (success alert)
far fa-check-circle
Solid | Lock (padlock)
fas fa-lock
Regular | Comment (dots)
far fa-comment-dots
Solid | Chevron up
fas fa-chevron-up
Solid | Trash
fas fa-trash-alt
Brands | RSS Icon
fas fa-rss
Solid | Chevron left
fas fa-chevron-left
Solid | Exclamation
fas fa-exclamation
Solid | Exclamation (circle)
fas fa-exclamation-circle
Solid | Check circle (success alert)
fas fa-check-circle
Solid | List view
fas fa-list
Solid | Play circle
fas fa-play-circle
Solid | Comment (dots)
fas fa-comment-dots
Regular | Comment (alternative)
far fa-comment-alt
Solid | Angle down
fas fa-angle-down
Solid | Arrow right
fas fa-arrow-right
Regular | Trash
far fa-trash-alt
Regular | Envelope
far fa-envelope
Solid | Star
fas fa-star
Solid | User (my account)
fas fa-user
Regular | Star (empty)
far fa-star
Solid | Archive
fas fa-archive
Solid | Check (tick)
fas fa-check
Regular | Times Circle (cross)
far fa-times-circle
Solid | Arrow down
fas fa-arrow-down
Solid | Angle right
fas fa-angle-right
Solid | Exchange
fas fa-exchange-alt
Solid | Home
fas fa-home
Solid | Times (cross)
fas fa-times
Regular | Thumbs up
far fa-thumbs-up
Solid | Angle up
fas fa-angle-up
Solid | Angle left
fas fa-angle-left
Solid | Comment (chat)
fas fa-comment
Solid | Caret right
fas fa-caret-right
Solid | Envelope
fas fa-envelope
Solid | Zoom
fas fa-search-plus
Regular | Calendar
far fa-calendar
Brands | LinkedIn
fab fa-linkedin-in
Solid | Grid view
fas fa-th-large
Regular | File Alt
far fa-file-alt
Solid | Arrow up
fas fa-arrow-up
Solid | Print
fas fa-print
Solid | Compress (exit full-screen)
fas fa-compress
Solid | Social share
fas fa-share-alt
Solid | Update
fas fa-sync
Brands | Google Plus
fab fa-google-plus-g
Solid | Truck
fas fa-truck
Solid | Expand (full-screen)
fas fa-expand
Solid | Caret left
fas fa-caret-left
Solid | Comment (alt)
fas fa-comment-alt
Regular | Play Circle
far fa-play-circle
Brands | Pinterest
fab fa-pinterest-p
Solid | File
fas fa-file

Select Dropdowns are now implemented using choices.js. The styling is still to be decided, we will update the styling accordingly.

Button classes

Standard button classes:

Standard button classes are Roboto Bold font-size:16px; height:40px; Left and right padding: 16px;

Links that look like buttons:

Primary Button Secondary Button Disabled Button Button Link

Small button classes:

Small button classes are Roboto Bold font-size:14px; height:32px; Left and right padding: 16px;

Links that look like small buttons:

Primary Button Secondary Button Disabled Button Button Link

Button classes with icons:

Add to cart

Edit

Refresh

Trash

Sort / Layout:

The following button group styles are used above the Product List page.

Specifications table

Specifications table content is 14px; font weight:300; padding:10px. Emphasis is given to the detail cell.

Viking No.	6964416
EAN/UPC	0888462057837
Basic Product Colour	Gold
Bluetooth	Yes
Brand	Apple
Colour	Gold
Display Screen Type	9.7 "IPS Touch
GPS	Yes
Included in Delivery	iPad Air 2 MH1C2FD/A Tablet Lightning to USB Cable USB Power Adapter
Keyboard Style	No
Manufacturer Part No.	MH1C2FD/A
Measurements 2
Memory Card Compatibility	No
Model	MH1C2FD/A
Operating System	iOS 8.0
Processor (Type & Speed)	Apple A8X / 1.5 GHz
Product Type	Tablet
Resolution	2,048 x 1,536 Pixel
Resolution Camera	8 Megapixel
Screen Size (Diagonal)	24.6 cm (9.7")
Storage Capacity (GB/MB/TB)	16 GB
Unit	Each
Warranty Manufacturer
Warranty Period
Weight	444 g

Pricing table

Pricing table content is 12px; font weight:400; padding:2px. Price columns are right aligned.
Table width may vary dependant on location (PLP / PDP) and screen size.

Qty	incl. VAT	excl. VAT
1-9	€4,55	€3,79
10-19	€4,19	€3,49
20+	€3,83	€3,19

Modal windows

Currently modal windows are used in many locations across the Viking web site. Standard modal component is used in:

Add to Basket
Add to Shopping List (Login or Register)
Insufficient stock / back order
Save / Remove printer (shown)
Delete Shoppng list
Session expired

Usage examples

Success:

Information:

Warning:

Danger:

Usage examples

Button tool tip example

Used on button when user is not logged in. Always appears above the button.

Text link tooltip examples

Shipped directly from supplier

Insurance fee

Promotional tooltip (Popover)

New features tooltip highlights new features and functions. This type of tooltip can be shown without user interaction, and then dismissed when user decides. Perhaps this is removed if user returns to page but didn't previously dismiss...

Pricing table tooltip (Popover)

For use in situations where user a interacts with an input element, and pricing tables appear on focus. Can be used in Shopping Lists, Quick Order.

Qty	incl. VAT	excl. VAT
1-9	€4,55	€3,79
10-19	€4,19	€3,49
20+	€3,83	€3,19

* Higher price applied between 02/11/2016 and 02/12/2016

Search bars

Standard search bar:

Search bar with reset button:

To get the reset button to show, initialise the searchBar.js file.

Customer service search bar:

Types of deal badges

Small variants (--deemphasize)

Primary style

Saving over 75%

1+1 free

£599

Save over €99

10%

Save 25%

2+1 free

£50

Bis zu CHF200

Best Best Price Price

Own Own Brand Brand

25%

Economisez 50%

5+3 free

€11

Save over CHF1000

Best Best Price Price

Own Own Brand Brand

25%

Economisez plus que 75%

10+5 free

CHF100

Economisez 1€

Zero percent and secondary styles

Bespaar meer dan 88%

Viking One

Clearance

Bestseller

Bespaar meer dan 100%

New

Cashback

Regular variants

Saving over 75%

1+1 free

£599

Save over €99

10%

Save 25%

2+1 free

£50

Bis zu CHF200

Best Best Price Price

Own Own Brand Brand

25%

Economisez 50%

5+3 free

€11

Save over CHF1000

Best Best Price Price

Own Own Brand Brand

25%

Economisez plus que 75%

10+5 free

CHF100

Economisez 1€

Bespaar meer dan 88%

Bespaar meer dan 100%

Large variants (--emphasize)

Saving over 75%

1+1 free

£599

Save over €99

10%

Save 25%

2+1 free

£50

Bis zu CHF200

Best Best Price Price

Own Own Brand Brand

25%

Economisez 50%

5+3 free

€11

Save over CHF1000

Best Best Price Price

Own Own Brand Brand

25%

Economisez plus que 75%

10+5 free

CHF100

Economisez 1€

Bespaar meer dan 100%

Displayed inline (eg PLP Product Copy)

Save over €99

5+3 free

Viking One

Clearance

Bestseller

Cashback

Badges on Banners

Viking A4 Paper

Receive high performance with Viking Only 3,79 € 2,59 € / Ream

Viking A4 Paper High performance From 2,59 € / Pack

Free Penguin

When you buy Viking own brand paper Only 9,99 € 8,99 €

Free Penguin With Viking paper

Only 3,59 € / Pack

Types of 'in stock' messages

Standard cut-off

Currently in stock Order before 6:00 PM for next working day delivery.

Product values

With cut off/days

Currently in stock Order before 6:00 PM for next working day delivery.

Product values

legacyDropship: false
customisable: false
displayedStockStatus: IN_STOCK
vendorProductStatus:
productStatus: ACTIVE
brandReplacementProductData.url:
vikingLegacySKU: VK12345
deliveryCutOffTime 5:30PM
deliveryDays 1-2
deliveryMessageCode product.variants.in.stock.with.cut.off.time
Note: this is based on SKU 0321903 in UK sample data. There is a concern that although deliveryCutOffTime and deliveryDays are passed, the standard message is still displayed.

With time only

Currently in stock Delivery 99 working days

Product values

legacyDropship: false
customisable: false
displayedStockStatus: IN_STOCK
vendorProductStatus:
productStatus: ACTIVE
brandReplacementProductData.url:
vikingLegacySKU: VK12345
deliveryCutOffTime
deliveryDays 99
deliveryMessageCode product.variants.in.stock.no.cut.off.time
Note: It is not known if this scenario is currently possible

With time & days

Currently in stock Order before yesterday for delivery in 365 working days

Product values

legacyDropship: false
customisable: false
displayedStockStatus: IN_STOCK
vendorProductStatus:
productStatus: ACTIVE
brandReplacementProductData.url:
vikingLegacySKU: VK12345
deliveryCutOffTime yesterday
deliveryDays 365
deliveryMessageCode product.variants.in.stock.with.cut.off.time.external
Note: It is not known if this scenario is currently possible

Temporary out of stock

Temporarily out of stock Order now and we will deliver when available

Product values

legacyDropship: false
customisable: false
displayedStockStatus: TEMPORARY_OUT_OF_STOCK
vendorProductStatus:
productStatus: ACTIVE
brandReplacementProductData.url:
vikingLegacySKU: UK Sample 3219018
deliveryCutOffTime
deliveryDays
deliveryMessageCode product.variants.out.of.stock.orderWhenAvailable

Sold out (pending discontinue)

Temporarily sold out

Product values

legacyDropship: false
customisable: false
displayedStockStatus: OUT_OF_STOCK
vendorProductStatus:
productStatus: PENDING_DISCONTINUE
brandReplacementProductData.url:
vikingLegacySKU: UK Sample 3219051
deliveryCutOffTime
deliveryDays
deliveryMessageCode

Discontinued

Temporarily sold out

Product values

legacyDropship: false
customisable: false
displayedStockStatus: OUT_OF_STOCK
vendorProductStatus:
productStatus:
brandReplacementProductData.url:
vikingLegacySKU: UK Sample 36797
deliveryCutOffTime
deliveryDays
deliveryMessageCode

Out of stock: CHub 0 Stock/1+ Future Stock

Temporarily sold out

Note: product.displayedStockStatus != 'OUT_OF_STOCK' has been added to the stock message logic to suppress the erroneous message code passed in this scenario.

Product values

legacyDropship: false
customisable: false
displayedStockStatus: OUT_OF_STOCK
vendorProductStatus:
productStatus: NON_BACKORDERABLE
brandReplacementProductData.url:
vikingLegacySKU: AT Sample 7274117 (Future Stock manually changed to 5)
deliveryCutOffTime
deliveryDays 8-9
deliveryMessageCode product.variants.out.of.stock.orderNextAvailableDays

In stock with alternative

Currently in stock

Product values

legacyDropship: false
customisable: false
displayedStockStatus: IN_STOCK
vendorProductStatus:
productStatus:
brandReplacementProductData.url: www.google.com
vikingLegacySKU: VK12345
deliveryCutOffTime
deliveryDays
deliveryMessageCode

Temporary out of stock with alternative

Temporarily out of stock Order now and we will deliver when available View alternative

Product values

legacyDropship: false
customisable: false
displayedStockStatus: TEMPORARY_OUT_OF_STOCK
vendorProductStatus:
productStatus: ACTIVE
brandReplacementProductData.url: /stapler-p-3219024
vikingLegacySKU: UK Sample 3219018
deliveryCutOffTime
deliveryDays
deliveryMessageCode product.variants.out.of.stock.orderWhenAvailable

Out of stock with alternative

Temporarily sold out View alternative

Product values

legacyDropship: false
customisable: false
displayedStockStatus: OUT_OF_STOCK
vendorProductStatus:
productStatus:
brandReplacementProductData.url: www.google.com
vikingLegacySKU: VK12345
deliveryCutOffTime
deliveryDays
deliveryMessageCode

Sourced on demand

Built to order Delivery 1-365 working days

Product values

legacyDropship: false
customisable: false
displayedStockStatus: SOURCE_ON_DEMAND
vendorProductStatus: SOURCED_ON_DEMAND
productStatus: NON_BACKORDERABLE
brandReplacementProductData.url:
vikingLegacySKU: UK Sample 4855752
deliveryCutOffTime
deliveryDays 1-365
deliveryMessageCode product.variants.in.stock.no.cut.off.time