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.