e-Commerce Product Card-Sets
Introduction:
The sample product card-sets demonstrate how house-style and brand-colour could be applied to your e-commerce platform.
Additional CSS Styling:
This page uses house-style: URW DIN-semi-condensed version II – the tweaked version of your preferred styling established in our last meeting.
The core CSS has been supplemented with additional style definitions that allow modifications to font-size, line-height, padding etc. locally on the page.
Product Watermark:
The cropped Rose Symbol used as a product watermark is independent of the product image. It is created using a .SVG file with the relevant colour and opacity applied to it and positioned above the product image.
Example I:
Pattrick & Thompsons
Row One:
- Watermark: P&T Accent III; 60% opacity
- Product Bar: background P&T Green
- Add to Basket: background Default Font Colour
Row Two:
- Watermark: P&T Accent III; 80% opacity
- Product Bar: background P&T Green
- Add to Basket: background Default Font Colour
Example II:
Pattrick & Thompsons
Row One:
- Watermark: P&T Accent III 60% opacity
- Product Bar: background P&T Green
- Add to Basket: background P&T Green
Row Two:
- Watermark: P&T Accent III; 80% opacity
- Product Bar: background P&T Green
- Add to Basket: background P&T Green
Example III:
Rose Building Supplies
Row One:
- Watermark: BS Accent II; 60% opacity
- Product Bar: background BS Blue
- Add to Basket: background Default Font Colour
Row Two:
- Watermark: BS Accent II; 80% opacity
- Product Bar: background BS Blue
- Add to Basket: background Default Font Colour
Example IV:
Rose Building Supplies
Row One:
- Watermark: BS Accent II; 60% opacity
- Product Bar: background BS Blue
- Add to Basket: background BS Blue
Row Two:
- Watermark: BS Accent II; 80% opacity
- Product Bar: background BS Blue
- Add to Basket: background BS Blue