Go to Content
Design System
Playroom Storybook
#ClimateEmergency

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.

Loading demo…
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

Loading demo…
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 large buttons in footers.

Realistic examples

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

Loading demo…
Loading demo…