Sony desktop Design Guide

Amblique & Demandware elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel. The Twitter Bootstrap CSS framework along with Less CSS has been integrated to provide a strong foundation for efficiently developing UI skins for customised projects.

Resources

Layout

HEADER
CONTENT

Grid System

Device view port Layout width Column width Gutter width
Desktops Small Desktops Mobile Devices 988px and up 768px to 979px 767px and below 22px 12px 100% 20px 20px N/A
span24
span1
span23
span2
span22
span3
span21
span4
span20
span5
span19
span6
span18
span7
span17
span8
span16
span9
span15
span10
span14
span11
span13
span12
span12

Responsive Design - Media Queries and Viewport Support

The following table summarises CSS support for the following devices, with their viewport and grid system definitions.

Due to the definitions of web development standard practices, there is no foolproof method to determine the device that the browser is using, and as such responsive design is developed around viewport size and NOT device type.
Device viewport Layout width Column width Gutter width
Desktops 980px and up 22px 12px
Small Desktops 768px and above 20px 20px
Mobile Devices 767px and below Fluid columns, no fixed widths
Mobile Devices 480px and below Fluid columns, no fixed widths

Responsive Utility Classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device (determined by viewport size). Below is a table of the available classes and their effect on a given media query layout (labeled by device).

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible Hidden Hidden
.visible-tablet Hidden Visible Hidden
.visible-desktop Hidden Hidden Visible
.hidden-phone Hidden Visible Visible
.hidden-tablet Visible Hidden Visible
.hidden-desktop Visible Visible Hidden

When to use Responsive Utility Classes

Use on a limited basis to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Responsive Utility Class Test Cases

Resize your browser or load on different devices to test the above classes.

Visible On... Phone Tablet Desktop
Hidden On... Phone Tablet Desktop

Colour Palette

Colour Palette not available without javascript

Typography - Headings, Paragraphs, Links

Website Font Families

The following table is an overview all font families utilised by this project. The mixin classes defined are used for generating the next section, Font Variation List.

This section is created to build the Website Responsive Font Styles section and for reference purposes. These mixin classes should not be utilised in page-specific style sheets.
Font Mixin Class
SST Light .fontsstlight()
SST Roman .fontsstroman()
SST Medium .fontsstmedium()
SST Bold .fontsstbold()

Font Variation List

The following table is an overview all font variations (font-famiy and size) utilised by this project. The mixin classes defined are used for generating the next section, Website Responsive Font Styles.

This section is created to build the Website Responsive Font Styles section and for reference purposes. These mixin classes should not be utilised in page-specific style sheets.
Font Style Mixin Class
Font Style 1 .fontsstroman-s54()
Font Style 2 .fontsstmedium-s22()
Font Style 3 .fontsstlight-s21()
Font Style 4 .fontsstroman-s21()
Font Style 5 .fontsstbold-s21()
Font Style 6 .fontsstlight-s18()
Font Style 7 .fontsstroman-s18()
Font Style 8 .fontsstbold-s18()
Font Style 9 .fontsstlight-s16()
Font Style 10 .fontsstroman-s16()
Font Style 11 .fontsstmedium-s16()
Font Style 12 .fontsstbold-s16()
Font Style 13 .fontsstlight-s14()
Font Style 14 .fontsstroman-s14()
Font Style 15 .fontsstmedium-s14()
Font Style 16 .fontsstbold-s14()
Font Style 17 .fontsstroman-s13-l16()
Font Style 18 .fontsstroman-s13-l20()
Font Style 19 .fontsstmedium-s13()
Font Style 20 .fontsstroman-s12-l14()
Font Style 21 .fontsstroman-s12-l18()
Font Style 22 .fontsstmedium-s12()
Font Style 23 .fontsstbold-s12()
Font Style 24 .fontsstroman-s11()
Font Style 25 .fontsstmedium-s11()
Font Style 26 .fontsstbold-s11()

Website Responsive Font Styles

The following table is an overview of all responsive font styles utilised by this project. The responsive mixins are to be utilised in page style sheets, applied to the appropriate id or class CSS Selector.

Font styles should not be applied to HTML structure elements, such as <div>s and <table>s, in page style sheets. Instead, content should be wrapped in an element, e.g. <span>, with a context class to be utilised as the CSS selector.
Responsive Mixin Desktop -> Mobile Mixins Responsive Example
.font1() .fontsstroman-s54() -> .fontsstroman-s21() Example Text
.font2() .fontsstmedium-s22() -> .fontsstmedium-s14() Example Text
.font3() .fontsstlight-s21() Example Text
.font4() .fontsstroman-s21() Example Text
.font5() .fontsstbold-s21() -> .fontsstbold-s18() Example Text
.font6() .fontsstlight-s18() Example Text
.font7() .fontsstroman-s18() Example Text
.font8() .fontsstbold-s18() Example Text
.font9() .fontsstlight-s16() Example Text
.font10() .fontsstroman-s16() -> .fontsstroman-s14() Example Text
.font11() .fontsstmedium-s16() Example Text
.font12() .fontsstbold-s16() Example Text
.font13() .fontsstlight-s14() Example Text
.font14() .fontsstroman-s14() Example Text
.font15() .fontsstroman-s14() -> .fontsstroman-s12-l14() Example Text
.font16() .fontsstmedium-s14() Example Text
.font17() .fontsstmedium-s14() -> .fontsstmedium-s13() Example Text
.font18() .fontsstbold-s14() Example Text
.font19() .fontsstroman-s13-l16() Example Text
.font20() .fontsstroman-s13-l20() Example Text
.font21() .fontsstmedium-s13() Example Text
.font22() .fontsstroman-s12-l14() Example Text
.font23() .fontsstroman-s12-l14() -> .fontsstroman-s13-l16() Example Text
.font24() .fontsstroman-s12-l18() Example Text
.font25() .fontsstroman-s12-l18() -> .fontsstroman-s13-l16() Example Text
.font26() .fontsstroman-s12-l18().fontsstroman-s13-l20() Example Text
.font27() .fontsstmedium-s12() Example Text
.font28() .fontsstmedium-s12() -> .fontsstmedium-s13() Example Text
.font29() .fontsstbold-s12() -> .fontsstbold-s14() Example Text
.font30() .fontsstroman-s11() Example Text
.font31() .fontsstroman-s11() -> .fontsstroman-s12-l18() Example Text
.font32() .fontsstroman-s11() -> .fontsstroman-s13-l16() Example Text
.font33() .fontsstmedium-s11() Example Text
.font34() .fontsstmedium-s11() -> .fontsstmedium-s12() Example Text
.font35() .fontsstbold-s11() Example Text

Headings

Heading 1

Heading 1 - Style 1

Heading 1 - Style 2

Heading 2

Heading 2 - Style 1

Heading 2 - Style 2

Heading 3

Heading 3 - Style 1

Heading 3 - Style 2

Heading 4

Heading 5
Heading 5 - Style 1
Heading 6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a odio semper, aliquam ante non, vestibulum risus. Nulla massa dui, consectetur quis pharetra sed, fringilla nec odio. Vivamus sit amet tellus bibendum, bibendum orci ac, pulvinar quam. Sed sit amet ullamcorper neque. Mauris mollis suscipit metus. Aliquam tincidunt lacinia suscipit. Integer ullamcorper rhoncus lacus sed tincidunt. Sed posuere mi eu arcu aliquet vulputate. Integer mattis urna risus, nec porta turpis scelerisque faucibus.

Aliquam felis massa, gravida eu erat eget, posuere malesuada tellus. Nunc ultricies elit non aliquam luctus. Nam tincidunt euismod mollis. Nulla imperdiet pellentesque mi, et posuere ipsum lacinia ac. Vestibulum at pretium lorem. Ut at nunc vitae leo scelerisque adipiscing nec fringilla tortor. Fusce eu ipsum enim. Curabitur placerat consequat purus, sit amet elementum dolor dictum quis. Aenean iaculis ac nunc vitae placerat. Pellentesque placerat hendrerit quam, aliquet adipiscing nisl. Nulla convallis dictum lacus quis lobortis. Cras sit amet sem velit.

Lists

Unordered Lists

  • list item 1
  • list item 2
  • list item 3
  • list item 4
    • sub-list item 1
    • sub-list item 2
    • sub-list item 3
  • list item 5

Ordered Lists

  1. list item 1
  2. list item 2
  3. list item 3
  4. list item 4
    1. sub-list item 1
    2. sub-list item 2
    3. sub-list item 3
  5. list item 5

Description Lists

Term/Name 1
Description for term 1
Term/Name 2
Description for term 2
Term/Name 3
Description for term 3
Term/Name 4
Description for term 4

Pricing

Price Type Price Mixin
Regular Price / Standard Price / Standard Price Range rrp $189.95
.standardPrice()
Sale Price / Now Price rrp $99.95
.salePrice()
Promotion Price / Was Price $189.95
.wasPrice()
Promotion Message rrp $189.95 your price $99.95
20% OFF on accessories

.wasPrice() .salePrice()
Tiered Price rrp $189.95 rrp $99.95
Buy more pay less!
Tier 2 rrp $48.95 (XX% off)
Tier n rrp $46.00 (XX% off)
.wasPrice() .salePrice() .standardPrice()

Links & Button Links

Link Style Sample
default link Sample Text Link (default)
.link-style-2 Sample Text Link
.link-style-3 Sample Text Link
Background colour is NOT part of the design.
.link-style-4 Sample Text Link
Background colour is NOT part of the design.
.link-style-4 Sample Text Link

Link/Icon Structure

Link Style Sample
Link style with a left icon structure (default) Sample text link
Link style with a right icon structure Sample text link

Buttons

Buttons Structure

Button Style Sample Class
DEFAULT .btn
SMALL .btn .btn-small
LARGE .btn .btn-large
BUTTON WITH A LEFT ICON .btn .btn-icon
BUTTON WITH AN ICON ARROW .btn .btn-icon-arrow

Type Buttons

Main CTA (Default) .btn
Standard
.disabled
Secondary .btn .btn-secondary
Standard
.disabled
Icon Arrow .btn .btn-icon-arrow
Standard
.disabled
Icon Button .btn .btn-icon
Standard
.disabled
Icon Button .btn .btn-icon-secondary
Standard
.disabled

Link Buttons

Main CTA (Default) .btn
Standard Button
.disabled Button
Secondary .btn .btn-secondary
Standard Button
.disabled Button
Icon Arrow .btn .btn-icon-arrow
Standard
.disabled
Icon Button .btn .btn-icon
Standard Button with an icon
.disabled Button with an icon
Icon Button .btn .btn-icon-secondary
Standard
.disabled

Forms

Check Boxes

Check boxes are skinned with the uniform.js library. This applies additional DOM markup to apply the custom skin and binds the events to replicate the native behaviour using JavaScript.

Radio Buttons

Radio buttons are skinned with the uniform.js library. This applies additional DOM markup to apply the custom skin and binds the events to replicate the native behaviour using JavaScript.

Text Boxes

We utilise types of input fields within the site. The standard text and password fields, along with HTML5 input types - email, phone (tel)

Text Areas

Select Dropdowns

Appended inputs

Stacked Form layout

Edit Account

Server side error mesaage example text.
Email is not in the format name@email.com
Example: 02-0000-0000

Your message has been sent.

We will contact you shortly if your message requires a response.

Horizontal form layout

Edit Account

Server side error mesaage example text.
Email is not in the format name@email.com
Example: 02-0000-0000

Your message has been sent.

We will contact you shortly if your message requires a response.

Tables

.table-style-01

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Placeholder Container: 1
Placeholder Container: 2
Placeholder Container: 3
Placeholder Container: 4
Placeholder Container: 5
Placeholder Container: 6
Placeholder Container: 1
Placeholder Container: 2
Placeholder Container: 3
Placeholder Container: 4
Placeholder Container: 5
Placeholder Container: 6

.table-style-01 .s2

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Placeholder Container: 1
Placeholder Container: 2
Placeholder Container: 3
Placeholder Container: 4
Placeholder Container: 5
Placeholder Container: 6
Placeholder Container: 1
Placeholder Container: 2
Placeholder Container: 3
Placeholder Container: 4
Placeholder Container: 5
Placeholder Container: 6

.table-style-01 .s3

image sensor

Placeholder Container: 1
Placeholder Container: 2
Placeholder Container: 1
Placeholder Container: 2
Placeholder Container: 1
Placeholder Container: 2

Panels

Panel
Panel s2
Panel s3
Panel s4
Panel s5

Swipers

Responsive Banner Swiper

Slide 1
Intro Text 1

Header Text 1

Secondary Text 1 Call To Action Text 1
Slide 2
Intro Text 2

Header Text 2

Secondary Text 2 Call To Action Text 2
Slide 3
Intro Text 3

Header Text 3

Secondary Text 3 Call To Action Text 3
Slide 4
Intro Text 4

Header Text 4

Secondary Text 4 Call To Action Text 4

Banner Swiper

Slide 1
Slide 2
Slide 3
Slide 4

Product Swipers

Product Swiper

Tooltips

Apply .tooltip-link to reset tooltips on <a> to display: inline;.

Class Display Example
.tooltip

The measure of digital image detail

Image detail is measured in megapixels, a key factor in digital image quality.
tooltip link
Content tooltip default
.tooltip
Content tooltip with data-placement="top"
Content tooltip with data-placement="top"
tooltip link
.tooltip
Content tooltip with data-placement="left"
Content tooltip with data-placement="left"
tooltip link
.tooltip
Content tooltip with data-placement="right"
Content tooltip with data-placement="right"
tooltip link

Dialogs/Modals/Lightboxes/Quickviews

The dialog overlays have been implemented using the jQueryUI dialog component library and extended in SiteGenesis' app.dialog.js module.

Toggle a dialog component via JavaScript by clicking the link below. This is a live example of the site's password reset dialog.

Images and Sprites

Image Sizes

Large Image Large Image Size
Large Image (Mobile) Large Image Size
Medium Image Medium Image Size
Medium Image (Mobile) Large Image Size
Small Image Small Image Size
Thumbnail Image Thumbnail Image Size
Swatch Image
(24px x 24px)
Swatch Image Size
Product set and product bundle Images
1000px by (client defined)
Product Image Size
Compare 4 products Product Image Size
PLP Swatch over image (12px x 12px) PLP Swatch over image

CSS class mapping


  • sonyicon-share content: "\e601";
  • sonyicon-thumbs-down content: "\e60a";
  • sonyicon-thumbs-up content: "\e60b";
  • sonyicon-circle-off content: "\e611";
  • sonyicon-circle-on content: "\e612";
  • sonyicon-blank content: "\e613";
  • sonyicon-dot content: "\e65e";
  • sonyicon-back-to-top content: "\e652";
  • sonyicon-browse content: "\e653";
  • sonyicon-compare content: "\e654";
  • sonyicon-sm-bold-check content: "\e660";
  • sonyicon-search content: "\e67d";
  • sonyicon-zoom content: "\e646";
  • sonyicon-circle-q content: "\e671";
  • sonyicon-circle-x content: "\e672";
  • sonyicon-x-sm content: "\e655";
  • sonyicon-x content: "\e65c";
  • sonyicon-x-skinny content: "\e66e";
  • sonyicon-x-skinny-rounded content: "\e66d";
  • sonyicon-sm-bold-x content: "\e65f";
  • sonyicon-square-neg-plus content: "\e670";
  • sonyicon-circle-plus content: "\e609";
  • sonyicon-plus-skinny content: "\e66f";
  • sonyicon-plus-sm content: "\e656";
  • sonyicon-sm-bold-plus content: "\e661";
  • sonyicon-alpha-light content: "\e669";
  • sonyicon-alpha content: "\e668";
  • sonyicon-alpha-medium content: "\e667";
  • sonyicon-alpha-bold content: "\e666";
  • sonyicon-arrowheads-elevator content: "\e663";
  • sonyicon-arrowhead-down content: "\e665";
  • sonyicon-arrowhead-up content: "\e664";
  • sonyicon-chevron-reverse content: "\e66b";
  • sonyicon-chevron content: "\e66c";
  • sonyicon-chevron-sm content: "\e66a";
  • sonyicon-circle-num-0 content: "\e645";
  • sonyicon-circle-num-1 content: "\e644";
  • sonyicon-circle-num-2 content: "\e643";
  • sonyicon-circle-num-3 content: "\e642";
  • sonyicon-circle-num-4 content: "\e641";
  • sonyicon-circle-num-5 content: "\e640";
  • sonyicon-circle-num-6 content: "\e63f";
  • sonyicon-circle-num-7 content: "\e63e";
  • sonyicon-circle-num-8 content: "\e63d";
  • sonyicon-circle-num-9 content: "\e63c";
  • sonyicon-arrow-right content: "\e662";
  • sonyicon-no-favorites content: "\e600";
  • sonyicon-favorite content: "\e67f";
  • sonyicon-facebook-sm content: "\e64d";
  • sonyicon-facebook content: "\e649";
  • sonyicon-youtube content: "\e64b";
  • sonyicon-instagram content: "\e647";
  • sonyicon-pinterest content: "\e64a";
  • sonyicon-gplus content: "\e64c";
  • sonyicon-sony-system-icons-2-50 content: "\e032";
  • sonyicon-sony-system-icons-2-51 content: "\e033";
  • sonyicon-twitter content: "\e64e";
  • sonyicon-vk content: "\e606";
  • sonyicon-star-half content: "\e676";
  • sonyicon-star content: "\e677";
  • sonyicon-mobile-menu content: "\e651";
  • sonyicon-laptop-tap content: "\e629";
  • sonyicon-cart content: "\e67e";
  • sonyicon-sony-system-icons-2-60 content: "\e03c";
  • sonyicon-grid-3x3 content: "\e673";
  • sonyicon-video-play content: "\e659";
  • sonyicon-tweeter content: "\e60f";
  • sonyicon-lens-camera content: "\e607";
  • sonyicon-car-speaker content: "\e610";
  • sonyicon-car-speaker-enclosed content: "\e60e";
  • sonyicon-led content: "\e627";
  • sonyicon-travel content: "\e621";
  • sonyicon-big-zoom content: "\e633";
  • sonyicon-laptops content: "\e62b";
  • sonyicon-skateboard content: "\e639";
  • sonyicon-battery content: "\e636";
  • sonyicon-eco content: "\e618";
  • sonyicon-accessories content: "\e619";
  • sonyicon-pro-handycam content: "\e62d";
  • sonyicon-laptop-flip content: "\e62a";
  • sonyicon-all-in-one content: "\e61f";
  • sonyicon-link content: "\e648";
  • sonyicon-advanced-amateur content: "\e62e";
  • sonyicon-landscapes content: "\e630";
  • sonyicon-flash-drives content: "\e608";
  • sonyicon-3d content: "\e626";
  • sonyicon-flag content: "\e60c";
  • sonyicon-4k content: "\e628";
  • sonyicon-hybrid-pcs content: "\e62c";
  • sonyicon-portraits content: "\e631";
  • sonyicon-runner content: "\e638";
  • sonyicon-voice-memo-recording content: "\e61e";
  • sonyicon-meeting-recording content: "\e61d";
  • sonyicon-casual-shooting content: "\e634";
  • sonyicon-account content: "\e67c";
  • sonyicon-globe content: "\e678";
  • sonyicon-circle-play content: "\e650";
  • sonyicon-comment-ratings content: "\e60d";
  • sonyicon-film-strip content: "\e61c";
  • sonyicon-controller content: "\e622";
  • sonyicon-mp3 content: "\e637";
  • sonyicon-walkman content: "\e61a";
  • sonyicon-speaker content: "\e657";
  • sonyicon-wifi content: "\e625";
  • sonyicon-night content: "\e62f";
  • sonyicon-orders content: "\e67b";
  • sonyicon-sony-system-icons-2-105 content: "\e069";
  • sonyicon-popup content: "\e64f";
  • sonyicon-registered content: "\e679";
  • sonyicon-circlearrow content: "\e65d";
  • sonyicon-marker content: "\e06e";
  • sonyicon-newsletter content: "\e67a";
  • sonyicon-video-pause content: "\e658";
  • sonyicon-pro-audio content: "\e620";
  • sonyicon-phones content: "\e635";
  • sonyicon-expert-capability content: "\e632";
  • sonyicon-cd content: "\e61b";
  • sonyicon-mic-studio content: "\e075";
  • sonyicon-walkman-compact content: "\e624";
  • sonyicon-support content: "\e682";
  • sonyicon-video-enlarge content: "\e65b";
  • sonyicon-video-minimize content: "\e65a";
  • sonyicon-over-the-head content: "\e614";
  • sonyicon-xsmall-tv content: "\e602";
  • sonyicon-small-tv content: "\e603";
  • sonyicon-medium-tv content: "\e604";
  • sonyicon-large-tv content: "\e605";
  • sonyicon-win8 content: "\e63b";
  • sonyicon-sony content: "\e63a";
  • sonyicon-sony-logo content: "\e081";

Character mapping in HTML

  • data-icon="&#xe601;"
  • data-icon="&#xe60a;"
  • data-icon="&#xe60b;"
  • data-icon="&#xe611;"
  • data-icon="&#xe612;"
  • data-icon="&#xe613;"
  • data-icon="&#xe652;"
  • data-icon="&#xe653;"
  • data-icon="&#xe654;"
  • data-icon="&#xe655;"
  • data-icon="&#xe65c;"
  • data-icon="&#xe66e;"
  • data-icon="&#xe66d;"
  • data-icon="&#xe65f;"
  • data-icon="&#xe670;"
  • data-icon="&#xe663;"
  • data-icon="&#xe672;"
  • data-icon="&#xe609;"
  • data-icon="&#xe66f;"
  • data-icon="&#xe656;"
  • data-icon="&#xe661;"
  • data-icon="&#xe669;"
  • data-icon="&#xe668;"
  • data-icon="&#xe667;"
  • data-icon="&#xe666;"
  • data-icon="&#xe65e;"
  • data-icon="&#xe665;"
  • data-icon="&#xe664;"
  • data-icon="&#xe66a;"
  • data-icon="&#xe66b;"
  • data-icon="&#xe66c;"
  • data-icon="&#xe645;"
  • data-icon="&#xe644;"
  • data-icon="&#xe643;"
  • data-icon="&#xe642;"
  • data-icon="&#xe641;"
  • data-icon="&#xe640;"
  • data-icon="&#xe63f;"
  • data-icon="&#xe63e;"
  • data-icon="&#xe63d;"
  • data-icon="&#xe63c;"
  • data-icon="&#xe662;"
  • data-icon="&#xe600;"
  • data-icon="&#xe67f;"
  • data-icon="&#xe64d;"
  • data-icon="&#xe649;"
  • data-icon="&#xe64b;"
  • data-icon="&#xe647;"
  • data-icon="&#xe64a;"
  • data-icon="&#xe64c;"
  • data-icon="&#xe032;"
  • data-icon="&#xe033;"
  • data-icon="&#xe64e;"
  • data-icon="&#xe606;"
  • data-icon="&#xe676;"
  • data-icon="&#xe677;"
  • data-icon="&#xe671;"
  • data-icon="&#xe651;"
  • data-icon="&#xe629;"
  • data-icon="&#xe67e;"
  • data-icon="&#xe03c;"
  • data-icon="&#xe673;"
  • data-icon="&#xe659;"
  • data-icon="&#xe67d;"
  • data-icon="&#xe60f;"
  • data-icon="&#xe607;"
  • data-icon="&#xe610;"
  • data-icon="&#xe60e;"
  • data-icon="&#xe627;"
  • data-icon="&#xe621;"
  • data-icon="&#xe633;"
  • data-icon="&#xe62b;"
  • data-icon="&#xe639;"
  • data-icon="&#xe636;"
  • data-icon="&#xe618;"
  • data-icon="&#xe619;"
  • data-icon="&#xe62d;"
  • data-icon="&#xe62a;"
  • data-icon="&#xe61f;"
  • data-icon="&#xe648;"
  • data-icon="&#xe62e;"
  • data-icon="&#xe630;"
  • data-icon="&#xe608;"
  • data-icon="&#xe626;"
  • data-icon="&#xe60c;"
  • data-icon="&#xe628;"
  • data-icon="&#xe62c;"
  • data-icon="&#xe631;"
  • data-icon="&#xe638;"
  • data-icon="&#xe61e;"
  • data-icon="&#xe61d;"
  • data-icon="&#xe634;"
  • data-icon="&#xe67c;"
  • data-icon="&#xe678;"
  • data-icon="&#xe650;"
  • data-icon="&#xe60d;"
  • data-icon="&#xe646;"
  • data-icon="&#xe61c;"
  • data-icon="&#xe622;"
  • data-icon="&#xe637;"
  • data-icon="&#xe61a;"
  • data-icon="&#xe657;"
  • data-icon="&#xe625;"
  • data-icon="&#xe62f;"
  • data-icon="&#xe67b;"
  • data-icon="&#xe069;"
  • data-icon="&#xe64f;"
  • data-icon="&#xe679;"
  • data-icon="&#xe660;"
  • data-icon="&#xe65d;"
  • data-icon="&#xe06e;"
  • data-icon="&#xe67a;"
  • data-icon="&#xe658;"
  • data-icon="&#xe620;"
  • data-icon="&#xe635;"
  • data-icon="&#xe632;"
  • data-icon="&#xe61b;"
  • data-icon="&#xe075;"
  • data-icon="&#xe624;"
  • data-icon="&#xe682;"
  • data-icon="&#xe65b;"
  • data-icon="&#xe65a;"
  • data-icon="&#xe614;"
  • data-icon="&#xe602;"
  • data-icon="&#xe603;"
  • data-icon="&#xe604;"
  • data-icon="&#xe605;"
  • data-icon="&#xe63b;"
  • data-icon="&#xe63a;"
  • data-icon="&#xe081;"

Images

Hover over an image to change the background colour to reveal transparency and images that are positioned on contrasting background colours.

Name Sprite Variable Image
FavIcon favicon.ico N/A
Google Maps Marker Black Icon (small) google-marker-black-small.png N/A
Google Maps Marker Black Icon google-marker-black.png N/A
Google Maps Marker Black Icon (large) google-marker-black-large.png N/A
Google Maps Marker Grey Icon (small) google-marker-grey-small.png N/A
Google Maps Marker Grey Icon google-marker-grey.png N/A
Google Maps Marker Grey Icon (large) google-marker-grey-large.png N/A
Google Maps Marker Green Icon (small) google-marker-green-small.png N/A
Google Maps Marker Green Icon google-marker-green.png N/A
Google Maps Marker Green Icon (large) google-marker-green-large.png N/A
Google Maps Marker White Icon (small) google-marker-white-small.png N/A
Google Maps Marker White Icon google-marker-white.png N/A
Google Maps Marker White Icon (large) google-marker-white-large.png N/A
Loading Mask Icon loading-small.gif @loaderSmall
Global Spritesheet sprites.png @sprites

Common Components

Loading Mask

Placeholder Container: Mask Example
Placeholder Container: Mask Example

Pagination

Breadcrumbs - Standard

Breadcrumbs - Search result

Breadcrumbs - Product refinement

Side Navigation

Standalone Components

Flyout Menu

Mini Cart

recently added

Subtotal rrp $189.95