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