Checkout Page

George Store’s checkout pages build upon Cards and FocusPage. Add the .g-card-checkout-* class to some Cards, put them into a CardGroup, and voilà: you’ve got the content of a checkout page.

Basics

Checkout page content consists of an optional header card, one or more body cards, and a footer card and is wrapped in a CardGroup. This content is used within a FocusPage with a Stepper, which are provided as React components.

Loading demo…

The following sections describe each of these elements more in detail.

Headers

Header cards contain a headline.

Loading demo…

Rules For Designers

Checkout 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 and bottom of the header.
There is a 20px spacing between headline and the paragraph.
The paragraph is $color-gray-300 (#a3b5c9).
Content is centred.

Body cards

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

Gaps

When two cards meet, there is no separator and the gap is automatically reduced:

Loading demo…

In some designs, this is not the desired behaviour and uniform gaps + separators are needed. Just add a .g-card-checkout-gap class to the preceding card and they are back!

Loading demo…

Rules For Designers

The reduced spacing between same-colour cards is 30px smaller than normal.

Columns

A checkout body card 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:

Loading demo…

HINT Bold text in the last column is converted to blue text and reserved for amounts (see below).

Rules For Designers

Checkout body cards 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 card Elements

The following elements can be put inside checkout body cards.

Headlines

Only h2 headlines are possible in body cards. h1 is reserved for headers, and there are no deeper/smaller headlines in the store.

Loading demo…

HINT Standard typography rules apply.

Paragraphs

Loading demo…

Rules For Designers

Standard typography rules apply.
Amounts must be in $color-blue-300 (#135ee2).

Forms

To place forms into a checkout card, add a grid to a card and follow the instructions on the Form page.

Centred Cards

Use bootstrap’s .text-center on the card itself to centre content in a body card:

Loading demo…

Secondary Button

If you have to open popups or separate functionality, use secondary buttons:

Loading demo…

Rules For Designers

Checkout buttons in body cards are
- of regular size only,
- right-aligned,
- always secondary outline.

Footers

Footer cards are created by adding the g-card-checkout-footer class.

Loading demo…

Rules For Designers

There is a 70px padding left and right of the card.
There is a 30px spacing at the top and bottom of checkout footer cards.
There are only large buttons in footers.

Realistic examples

Check out how checkout pages might look like in the real world.

Loading demo…