Checkout Page
A checkout page in the George Store features one big Card. Add the .g-card-checkout class to the Card, put multiple CardBody components with .g-card-checkout-* inside, and voilà: you’ve got the content of a checkout 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.
The following sections describe each of these elements more in detail.
Header area
Checkout headers contain a headline, and all its content is centred. They are created by adding the .g-card-checkout-header class to a CardBody.
Body area
Checkout body areas are white. You can add multiple body areas to a page, and each one should get the .g-card-checkout-body class.
Gaps
When two body areas meet without a separator in-between, the gap is automatically reduced:
In some designs, this is not the desired behaviour and uniform gaps and separators are needed. If you put a Separator between the body areas, everything is back to normal.
Before having the enhanced Separator component, adding a .g-card-checkout-gap class to the preceding card was used to create the visual separation, this modifier is no longer needed and has therefore been DEPRECATED.
Rules For Designers
- The reduced spacing between same-colour body areas is 30px smaller than normal.
Columns
A checkout body area can consist of one (full-width), two (label-fields) or three (image-label-fields) columns. The latter is actually a 2-col grid in a 2-col grid:
HINT Bold text in the last column is converted to blue text and reserved for amounts (see below).
Rules For Designers
- Checkout body areas can either have either one column (full 12/12 bootstrap grid size), two columns (4/12 plus 8/12 bootstrap grid size) or three columns (3/12, 3/12 and 6/12 bootstrap grid size).
- When using 2 columns, the first column is for labels and the second column for text/input fields.
- When using 3 columns, the first column is for placing a product image, the second column for labels and the third column for text/input fields.
Body area elements
The following elements can be put inside checkout body areas.
HINT Standard typography rules apply.
Headlines
Only h2 headlines are possible in body cards. h1 is reserved for headers, and no other levels are used in the Store.
Paragraphs
Rules For Designers
- Amounts must be in
$color-blue-300 (#135ee2).
Forms
To place forms into a checkout card, add a grid and follow the instructions on the Form page.
Centred content
Use bootstrap’s .text-center on the CardBody to centre content in a body area:
Secondary Button
If you have to open popups or separate functionality, use secondary buttons:
Rules For Designers
- Checkout buttons in body cards are
- of regular size only,
- right-aligned,
- always
VARIANT.SECONDARY.
Footer area
Checkout footers are created by adding the .g-card-checkout-header class to a CardBody.
Rules For Designers
- There are only regular-sized buttons in footers.
Realistic examples
Check out how checkout pages might look like in the real world.