Product Page
A product page in the George Store features one big Card. Add the .g-card-product class to the Card, put multiple CardBody components with .g-card-product-* inside, and voilà: you’ve got the content of a product page.
Basics
Product pages consist of a header area, one or more body areas, and a footer area. They are contained in a Card within a FocusPage, which is provided as a React component.
Header area
Product headers are created by adding the .g-card-product-header class to a CardBody.
Rules For Designers
- The header area has a
$color-white (#ffffff)background. - Text and headlines are centred.
Body area
Product body areas are white. You can add multiple to one page. They are created by adding a .g-card-product-body class to a CardBody (when you need vertical padding) or to any other component (when the component should be seemless, i.e. you do not need vertical padding).
Gaps
Two succeeding body areas always are separated by a line. Place a Separator between them.
Descriptions
Body areas contain a headline plus one or more paragraphs of explanatory text.
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
Product banner body areas 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
- Banners have a fixed height of 235px.
- Text in banners is vertically centred.
- The first line in a banner is the product name.
- The other lines in a banner are teaser text.
- 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 CardBody 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
- 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.
Footer area
Product footers contain a button and optionally some disclaimer text right above it. Each product page may obviously only have one footer area. They are created by adding the .g-card-product-footer class to a CardBody.
Rules For Designers
- Omit the initial Paragraph if you don’t have text for it.
- Only regular-sized buttons are allowed.
Realistic example
This is how a real product page might look like.
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.
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
$color-blue-300 (#135ee2)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.