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.

Loading demo…

Headers

Product header cards are based on the .g-card-product and .g-card-product-header classes.

Loading demo…

Rules For Designers

Product header cards have $color-white (#ffffff) background.
There is a 140px padding left and right of the card in tier LG and 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.

Loading demo…

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,

Loading demo…

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.

Loading demo…

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

Loading demo…

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.

Loading demo…

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.

Loading demo…

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.

Loading demo…

Example from Česká spořitelna (CSAS)

Rules For Developers

If you are developing inside George monorepo, use a shared ready-made component from the library. @shared/csas-pages.

This is how a CSAS product page might look like.

Loading demo…

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

Loading demo…

You can find more details in Figma.