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.
The following sections describe each of these elements more in detail.
Headers
Header cards contain a headline.
Rules For Designers
- Checkout 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 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.
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:
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!
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:
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.
HINT Standard typography rules apply.
Paragraphs
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:
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 secondary outline.
Footers
Footer cards are created by adding the g-card-checkout-footer class.
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.