Summary slot

The summary slot is a section only used in George Business as part of the FullPage component. The main purpose of it is to display a summary of user actions. Typically used for payment forms, guarantees and store processes.

Open in Figma

Summary slot usage

• The summary slot is used to summarize important information briefly.
• It is useful on pages with long forms where the primary action would be hidden below the screen fold if it were displayed at the bottom of the form.
• It should not replace review pages, which usually come as the last step of a process before the authorization.
• The Summary slot may include the signing component.
• The Summary slot is also used as a result screen using the StatusInfo component with success or error states.

Open in Figma

For designers

Summary card on smaller displays

• The summary slot was created primarily for larger screens of 1400px or more. In this case it will appear to the right of the main content in a second column.
• The smallest breakpoint for displaying the slot in a second column is 1400px (XXL).
• For smaller screen resolutions, the summary slot moves below the main content in the first column and is no longer floating.

Open in Figma

Size of summary slot

• Check example in Storybook

• Maximum width of the summary slot is 512px, minimum width of the summary slot is 360px.

• Card width for FullPage with expanded side navigation:

  • for XXXL extended and XXXL (more than 1920px): 512px width
  • for XXL extended (1560px - 1919px): fluid width, based on screen resolution
  • for XXL and smaller (less than 1400px): same the width as the main content above

• Card width for FullPage with side navigation collapsed:

  • for XXXL extended and XXXL (more than 1920px): 512px width
  • for XXL extended (1560px - 1919px): fluid width, based on screen resolution
  • for XXL and less (less than 1400px): copies the width of the main content card above

Horizontal and vertical side content padding

• Horizontal and vertical padding (inside a card): 32px, Figma variable: Card/padding/large

Summary card content

Open in Figma

Content card

• The summary slot is usually composed by a Card or CardGroup component.
• Header is optional. Typically the header is used to display a heading.
• The content of the card should be brief and clear.
• Buttons should always be visible and part of the CardGroup’s footer.
• If there is too much information on the card, part of it can be collapsed and/or scrolled vertically.
• Graphics such as icons and images should be centred and placed below the headline.
• Main content:
  • Summary of changes
  • List of changes with small labels and values
  • Signing, confirming the payment/changes
  • StatusInfo component

Card footer

There has to beat least one primary Button in the footer. There may be an additonal, secondary Button (left of the primary one). Buttons in the footer are always centered.

Accessibility

Based on discussions with UX experts in the field of accessibility, we realised that general rules for floating cards do not exist or are not directly covered by accessibility audits. The only group of users we take into account are users with visual disorder and specifically users of screen readers.

Depending on the specific situation how the summary slot is used, different measures may apply. So far we know of two variations of how we work with the summary slot:

• If we’re using the summary slot as a “cart” – I’m entering a bulk payment and it’s adding up somewhere on the right, it should always go into focus on the right side after I enter the payment to read what changes have happened.
• If we’re using the summary card to duplicate content from the main column, probably wouldn’t solve it much. It doesn’t make sense to deal with any hidden links between main content and Summary card.

Examples

Bulk payment

Use case: The user is entering several payments sequentially and wants to sign all at once or send them for signature.
Recommendation: When we have the option to add another payment at the bottom of the form, there should be a hidden link that takes a screen reader user to the summary to read what has changed and then jump back to filling out the next payment after reading the summary (optional).
Before opening the form for a new payment, there should be a snackbar popping up that the payment has been added to the bulk order and the reader should read the same thing.

User management editing

Use case: The user changes the user permissions one by one and then signs all the changes at once.
Recommendation: The user would edit in the permissions drawer and every time the change is confirmed, a snackbar would pop up telling the user that the setting has been changed (“Permission setting XXX has been changed”). The screen reader reads the same information. Then the user changes other permissions and there should be a hidden link when they check the summary.