Product Page
George Store’s product pages build upon Cards and FocusPage. Add the .g-card-product class to some Cards, put them into a CardGroup, and voilà: you’ve got the content of a product page.
Basics
Product pages consist of a header card, one or more body cards, and a footer card. They are contained in a CardGroup within a FocusPage, which is provided as a React component.
Headers
Product header cards are based on the .g-card-product and .g-card-product-header classes.
Rules For Designers
- Product header cards have
$color-white (#ffffff)background. - There is a 140px padding left and right of the card in tier
LGand above, and 30px in all smaller tiers. - There is a 40px spacing at the top of the header.
- There is a 40px spacing at the bottom of the header.
- There is a 20px spacing between the headlines.
- There is a 40px spacing between headlines and the paragraph.
- Text and headlines are centred.
Body cards
Text body cards are white. You can add multiple body cards to one page.
HINT There were also grey body cards, which are now deprecated. They were achieved using .g-card-product-dark class.
Rules For Designers
- Body cards feature
$color-blue-400 (#0a285c)text on$color-white (#ffffff)background. - Around every card there is a 1px separator, colour
$color-gray-100 (#eef0f4). - There is a 140px padding left and right of the card.
- Unless otherwise noted, there is a 40px spacing at the top and bottom of cards.
- Unless otherwise noted, text is left aligned.
- Text is left aligned, unless otherwise noted.
Gaps
Two succeeding body cards always are separated by a line and feature default spacings.
Descriptions
These cards contain a headline plus one or more paragraphs of explanatory text. They are allowed on white and grey background,
HINT Standard typography rules apply.
Lists
Lists are preceded by a headline. Only George’s custom bullet points and checkmark-lists are in use in product pages. Lists are only allowed on a white background.
HINT Standard typography rules apply.
Banners
Banner cards feature an eye-catcher background, the product name plus a short teaser text. Apply .g-card-product-body-banner-dark if your image is dark (and the text is to be white) or g-card-product-body-banner-light if your image is light (and the text has to be dark).
HINT Make sure that headline and main paragraph are not too long. Insert a <br/> if appropriate.
Rules For Designers
- Banner cards have a height of 235px.
- Text in banner cards is vertically centred
- The first line in a banner is the product name.
- The other lines in a banner are teaser text.
- Text colour is
$color-blue-400 (#0a285c)on light and$color-white (#ffffff)on dark backgrounds. - All text in a banner is set as HTML paragraphs - even the headlines - so that screen readers do not consider them an individual section.
- Background images need to be 235 x 1140 px.
- Background images should be created in twice that resolution (470x2280) for retina screen use, too.
- Background images need enough space to the left for text to rest on, without distracting images. Single-colour backgrounds work best here.
Tables
A LabeledList (that looks like a table with two columns) may be used in product pages to quote fees or other product details. Add the .g-card-product-body-table modifier to the card and it will take care of centering the headline and ensuring the second column of every row is right-aligned.
HINT Before we introduced LabeledList, a Grid has been used to achieve this kind of layout (which is still possible, but deprecated), but back then you had to take care of the text alignment for heading and columns yourself, so you should always use the improved version depicted below.
Rules For Designers
- There is a 40px spacing between the headline and the first line of the table.
- Tables have 140px spacing left/right.
- Product tables always have two columns. The first takes 8/12 and the second 4/12 of a bootstrap grid.
- Content in the first column is left-aligned. Content in the second column is right-aligned.
Footers
Product footers contain a button and optionally some disclaimer text right above it. Each product page obviously only have one footer card.
HINT Just omit the <p> if you don’t have one.
Rules For Designers
- There is a 30px padding left and right of the card.
- There is a 30px spacing at the top and bottom of product footer cards.
- Only large buttons are allowed.
Realistic example
This is how a real product page might look like.
Example from Česká spořitelna (CSAS)
This is how a CSAS product page might look like.
Colouring options
The product page is coloured using the colour of the parent store category. This scheme is also used for the hero banner:
- main color (for example teal)
- weak version (for example teal-weak)
- strong version (for example teal-strong).
Rules For Designers
- Use only colours from GDS.
- Using blue-300 for the StripeHeader is fine if it does not visually conflict with the product category colour.
- Colours must meet the accessibility standards (contrast).
GDS colours that comply with the accessibility rules
You can find more details in Figma.