Happy Pride Month! - Also, GDS v3 is live! 💅

Confirm Page

Confirm pages are often used as a last step of a FocusPage flow.

HINT See Success & Error Cards examples to find out more about the confirmation states.

Basics

Confirm pages contain a StatusInfo followed by a footer card. They are contained within a FocusPage.

Confirm pages never contain Steppers.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Rules For Designers
  • There are no separators on confirm pages.
  • The order of items are: icon - headline - paragraph.
  • There is a 70px padding left and right of the card.
  • There is a 120px spacing at the top of the card.
  • There is a 50px spacing at the top of the card.
  • There is a 20px spacing between headline and paragraph.
  • There is a 40px spacing between icon and headline.

Footers

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Rules For Designers
  • A footer is mandatory for confirm pages, so they get their proper height. Buttons in the footer might be omitted tough.
  • 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 regular-sized buttons in footers.

Realistic examples

These are examples of how a real success and error confirmation pages might look like.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.