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.
The Viking web site uses the Roboto font family from Google fonts. The variations of these fonts are described below:
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 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 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)...
The following section describes the style of headings and their usage across the Viking web site:
The following section describes various text styles and their usage across the Viking web site:
16 pixels is the larger font size, and can be used for emphasis within heading sections of text within the web site.
14 pixels is the standard text font size. Use this for general body copy across the web site.
12 pixels is the small font size for copy. Use this for footnote text, footer links and copyright, and sign off texts.
A link within a sentence can be given additional emphasis when nested within a paragraph tag.
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.
far fa-user
fas fa-spinner
fas fa-caret-up
fab fa-youtube
fas fa-trophy
fas fa-star-half
fas fa-search
fas fa-bars
fas fa-caret-down
fas fa-times-circle
fas fa-thumbs-up
fas fa-pencil-alt
fas fa-chevron-down
fas fa-info
fas fa-arrow-left
fas fa-minus
fas fa-file-alt
fas fa-plus
far fa-star-half
fab fa-twitter
fas fa-gift
fas fa-phone
fas fa-chevron-right
fas fa-info-circle
fas fa-shopping-cart
fab fa-facebook-f
far fa-comment
far fa-check-circle
fas fa-lock
far fa-comment-dots
fas fa-chevron-up
fas fa-trash-alt
fas fa-rss
fas fa-chevron-left
fas fa-exclamation
fas fa-exclamation-circle
fas fa-check-circle
fas fa-list
fas fa-play-circle
fas fa-comment-dots
far fa-comment-alt
fas fa-angle-down
fas fa-arrow-right
far fa-trash-alt
far fa-envelope
fas fa-star
fas fa-user
far fa-star
fas fa-archive
fas fa-check
far fa-times-circle
fas fa-arrow-down
fas fa-angle-right
fas fa-exchange-alt
fas fa-home
fas fa-times
far fa-thumbs-up
fas fa-angle-up
fas fa-angle-left
fas fa-comment
fas fa-caret-right
fas fa-envelope
fas fa-search-plus
far fa-calendar
fab fa-linkedin-in
fas fa-th-large
far fa-file-alt
fas fa-arrow-up
fas fa-print
fas fa-compress
fas fa-share-alt
fas fa-sync
fab fa-google-plus-g
fas fa-truck
fas fa-expand
fas fa-caret-left
fas fa-comment-alt
far fa-play-circle
fab fa-pinterest-p
fas fa-file
Select Dropdowns are now implemented using choices.js. The styling is still to be decided, we will update the styling accordingly.
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 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 |
Currently modal windows are used in many locations across the Viking web site. Standard modal component is used in:
Used on button when user is not logged in. Always appears above the button.
Shipped directly from supplier
Insurance fee
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.
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
To get the reset button to show, initialise the searchBar.js file.
Deal badges are used in various sections of the Viking site. Site banners, PLP pages, PDP pages.
Small widget showing stock status
Note: product.displayedStockStatus != 'OUT_OF_STOCK' has been added to the stock message logic to suppress the erroneous message code passed in this scenario.
Note: if there is a stock message above then there is an error in the code
Note: if there is a stock message above then there is an error in the code
Note: if there is a stock message above then there is an error in the code
Note: if there is a stock message above then there is an error in the code
Note: if there is a stock message above then there is an error in the code
Note: if there is a stock message above then there is an error in the code
Small widget showing order status (My Account area)
There are two types. Firstly there are the deprecated energy labels, (without the A -> G tag), followed by the current energy labels (with the A -> G tag).