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.

Brand colour palette

  1. #fff
    white
  2. #f8f6f2
    gray-100
  3. #e8e5e1
    gray-200
  4. #d8d4d0
    gray-300
  5. #b8b2ae
    gray-500
  6. #98908c
    gray-600
  7. #808080
    gray-700
  8. #646464
    gray-800
  9. #303030
    gray-900
  10. #000
    black
  11. #e4002c
    red
  12. #fb3
    yellow
  13. #ffd143
    bright-yellow
  14. #f9690e
    orange
  15. #00a66e
    green
  16. #036e65
    green-alt
  17. #2d766c
    teal
  18. #d770ad
    pink
  19. #f0f9ff
    blue-light
  20. #ccebff
    blue-light-alt
  21. #4290ee
    blue
  22. #246cd0
    blue-alt
    btn-primary-hover-bg
  23. #c8d3d9
    own-brand
  24. #92b6e8
    link-visited-color

Alert messaging colour palette

  1. #e5f7f4
    alert-success-bg
  2. #b3e6dd
    alert-success-border-color
  3. #e9f0fa
    alert-info-bg
  4. #bdd3f1
    alert-info-border-color
  5. #fff8ea
    alert-warning-bg
  6. #fd9
    alert-warning-border-color
  7. #fce5e9
    alert-danger-bg
  8. #f8bfca
    alert-danger-border-color

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

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 Condensed family, which is used in various locations throughout the site.

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

Roboto Slab

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 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

  1. This is an ordered list item.
  2. 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


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

Button classes

Standard button classes:

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


Small button classes:

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


Button classes with icons:

  Add to cart

  Edit

  Refresh

  Trash

  Loading


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:

Your order qualifies for free delivery

Information:

Spend 44.51 € to qualify for free delivery.

Warning:

Due to the Christmas holidays, delivery times can be longer than usual.

Danger:

Your order has been unsuccessful.

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...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a viverra sem, in ultrices nisl.

Login

Okay got it!


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

Free gift
Save 5%
Saving over 75%
1+1 free
£599
Save over 99
Free gift
Save 10%
Save 25%
2+1 free
£50
Bis zu CHF200
Best Best Price Price
Own Own Brand Brand
Save 25%
Economisez 50%
5+3 free
11
Save over CHF1000
Best Best Price Price
Own Own Brand Brand
Print & Promotion
Save 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

Free gift
Save 5%
Saving over 75%
1+1 free
£599
Save over 99
Free gift
Save 10%
Save 25%
2+1 free
£50
Bis zu CHF200
Best Best Price Price
Own Own Brand Brand
Save 25%
Economisez 50%
5+3 free
11
Save over CHF1000
Best Best Price Price
Own Own Brand Brand
Save 25%
Economisez plus que 75%
10+5 free
CHF100
Economisez 1
Bespaar meer dan 88%
Bespaar meer dan 100%

Large variants (--emphasize)

Free gift
Save 5%
Saving over 75%
1+1 free
£599
Save over 99
Free gift
Save 10%
Save 25%
2+1 free
£50
Bis zu CHF200
Best Best Price Price
Own Own Brand Brand
Save 25%
Economisez 50%
5+3 free
11
Save over CHF1000
Best Best Price Price
Own Own Brand Brand
Save 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

Types of 'in stock' messages

Standard cut-off

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
deliveryDays
deliveryMessageCode product.variants.in.stock.with.cut.off.time

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

In stock: customisable product

Note: if there is a stock message above then there is an error in the code

Product values

legacyDropship: false
customisable: true
displayedStockStatus: IN_STOCK
vendorProductStatus:
productStatus: ACTIVE
brandReplacementProductData.url:
vikingLegacySKU: VK12345
deliveryCutOffTime
deliveryDays
deliveryMessageCode product.variants.in.stock.with.cut.off.time

Temporary out of stock: customisable product

Note: if there is a stock message above then there is an error in the code

Product values

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

Out of stock: customisable product

Note: if there is a stock message above then there is an error in the code

Product values

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

In stock: legacy dropship

Note: if there is a stock message above then there is an error in the code

Product values

legacyDropship: true
customisable: false
displayedStockStatus: IN_STOCK
vendorProductStatus:
productStatus: ACTIVE
brandReplacementProductData.url:
vikingLegacySKU: VK12345
deliveryCutOffTime
deliveryDays
deliveryMessageCode product.variants.in.stock.with.cut.off.time

Temporary out of stock: legacy dropship

Note: if there is a stock message above then there is an error in the code

Product values

legacyDropship: true
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

Out of stock: legacy dropship

Note: if there is a stock message above then there is an error in the code

Product values

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

Types of 'order status' messages

Delivery Status 10

Order Confirmed

Delivery Status 11

Special Carrier - we will contact you

Delivery Status 00

Order received

Delivery Status 22

On Back Order

Delivery Status 30

Order en Route

Delivery Status 40

Partial Order

Delivery Status 50

Delivered

Delivery Status 55

Failed Delivery

Delivery Status 60

Delivered

Delivery Status 70

Returned

Delivery Status 45

Failed Load

Delivery Status 90

Cancelled
×