Modal

Open in Storybook Open in Figma

George’s modal/popup windows build upon Bootstrap’s modals. Add the .g-modal class to a modal and it gets George-themed.

See the Modal Dialogs examples for all currently allowed combinations.

HINT The modals and snippets you see embedded on this page are slightly smaller than if opened in a popup, as the content area is not wide enough!

Rules For Copywriters

You find guides for modals in the section ‘UI text’.

Basics

Modals consist of a header, a body, and a footer. The following sections describe different variants of each in more detail.

Loading demo…

Rules For Designers

On XS, modals have a width of 100% and 15px/20px horizontal margin/padding, leaving the remaining space for content.
On SM, modals have a width of 550px and 20px horizontal padding left/right, leaving 510px for content.
On MD, modals have a width of 730px and 20px horizontal padding left/right, leaving 690px for content.
On LG and above, modals have a width of 888px and 20px horizontal padding left/right, leaving 848px for content.

Rules For Accessibility

We use ARIA role ‘dialog’ for modals. A container with the role ‘dialog’ describes a window overlayed on the primary window. Given the complex nature of George Modals (they usually contain large amounts of content), all modals feature a direct child element that turns said role back to ‘document’. Doing this helps screen-reader users navigating the modal.
The content under a modal dialog is inert.
- Users cannot interact with content outside an active dialog window. For this reason, the content outside an active dialog is also visually obscured, i.e. dimmed.
- Dialogs contain their tab sequence. That is, Tab and Shift + Tab do not move focus outside the dialog. If focus is on the last tabbable element inside the dialog, the next focus is on the first tabbable element inside the dialog. This is called a keyboard trap.
- The keyboard trap is not sufficient, you also need to specify the aria-modal attribute (used to indicate that the presence of a “modal” element precludes usage of other content on the page). Also, until there is decent support for the aria-modal attribute, manually set aria-hidden="true" for all elements other than the modal itself inside the <body> element.
WIP The ‘alertdialog’ role is a special-case dialog role designed specifically for dialogs that divert users’ attention to a brief, important message. Alas, right now George Modals only use the ‘dialog’ role.
WIP A dialog should have the attribute aria-labelledby="id-of-modal-heading" to describe the primary purpose of the dialog.
When the modal is displayed, the focus will be set to a fake active element within the dialog. Pressing Tab will take you to the first active element, usually the Close button, if there is one. Depending on the content, it would be even better to set the focus to a form field or an OK button, but to enable something like this we would first need to add the aforementioned aria-labelledby, because a screen-reader user needs to know the context when we perform a focus-change.
- If the content is large enough that focusing the first interactive element could cause the beginning of content to scroll out of view, it is advisable to add tabindex to a static element at the top of the dialog, such as the dialog title or first paragraph, and initially focus that element.
- If a dialog contains the final step in a process that is not easily reversible, such as deleting data or completing a financial transaction, it may be advisable to set focus on the least destructive action, especially if undoing the action is difficult or impossible. The ‘alertdialog’ role is often employed in such circumstances.
- If a dialog is limited to interactions that either provide additional information or continue processing, it may be advisable to set focus to the element that is likely to be most frequently used, such as an OK or Continue button.
After closing a modal, the focus needs to be set back to the element that triggered the modal or the next focusable element that would be logical in the workflow. If the modal appeared right after loading the page, set the focus to the first element of the page after closing.

Headers can be empty or consist of an SVG icon and a title (stepping in modals is DEPRECATED and should be implemented as a FocusPage instead):

Loading demo…

HINT The code example covers the most complex header. Just omit the parts you don’t need. Only the .modal-close div is mandatory.

Rules For Designers

Minimal header height is 50px, even if empty.
Header Icons are 48px / colour $color-gray-300 (#a3b5c9).
The order of header elements is always icon-title-steps. Unused items can be omitted.
A Close link in the top-right corner is positioned 15px from the top and 18px from the right. It contains the appropriate word(s) for Close in the current language next to an X icon (16px).
A Help link in the top-left is positioned 15px from the top and 18px from the left. It contains the appropriate word(s) for Help in the current language next to a circled information icon (16px).
In XS/SM tiers, both the Help and Close text are not shown, only the icons remain.
Headers have 70px horizontal and 20px vertical spacing.
Vertical spacing between header items are 20px, except between icon and title, which is 10px.

Body

The content/body can have one of three width settings: default, .g-modal-body-large or .g-modal-body-full.

Loading demo…

HINT Usually there is one body in a modal. However, you can add multiple bodies in case you need to mix different widths or background colours/sections.

Background colour

You can use the .g-bg-* classes to assign a body a background colour:

Loading demo…

Additional spacings

In case the top- or bottom-most item in a body contains an input field, auto-spacing will be wrong and the input field too close to the vertical border of the body. In that case, you need to add the .g-modal-body-form-top and/or .g-modal-body-form-bottom to give the modal a bit more padding:

Loading demo…

Rules For Designers

Body sections feature a 30px spacing at the top and bottom.
Left/right spacing is 140px per default, 70px for .g-modal-body-large and 20px for .g-modal-body-full.

Regular footers can be empty or consist of buttons on white background.

Loading demo…

Rules For Designers

Minimal footer height is 106px (46px button height + 30px spacing above/below), even if empty.
- For regular modals, the footer is not mandatory and may be omitted. In this case, an empty area with a height of 20px will be added, and actions on how to proceed are part of the modal body.
Each modal has one primary button in the footer, coloured primary-blue. All other buttons are outline-secondary buttons.
All buttons are aligned vertically centred. The primary button is the right-most.
In XS tier, the buttons are 100% and positioned below each other.

Rules For Developers

Only medium buttons without icons are allowed.
There never is a “close” button in the footer if there are other buttons present. Only if a modal has no functionality that requires a button, a single primary-blue “close” button may be added to fill the void.
It is possible to add an empty footer that does not collapse to a 20px empty stripe, i.e. has the default minimum height instead. There are two ways to achieve this, specifying a footerClassName is the preferable one. Please contact someone from Design System if that need occurs.

Signing footers WIP

Signing components or other mini-forms can be placed in grey background footers.

Loading demo…

SmallModal

Open in Figma

These modals use the additional .g-modal-small class have less width and are used for dialog-box like interaction with the user. They usually feature a coloured header, a short text, an action and a cancel button:

Loading demo…

Rules For Designers

Headers and footers follow the same rules as regular modals.
The text in the close button in the header is always hidden, only the “X” icon is shown.
The text in the help link in the header is always hidden, only the information icon is shown.
Per default, small modal headers have $color-gray-200 (#e4eaf0) background and $color-blue-400 (#0a285c) text/icons.
Other allowed background colours are $color-ui-red (#cf2a1e) or $color-ui-green (#07a721), in which case the text colour changes to $color-white (#ffffff).
On tier MD and above, small modals have a width of 400px, the same width as regular modals on SM/XS tiers.

TeaserModal

Open in Figma

These modals have coloured headers, slightly tweaked bodies, and are featured in tours or feature demos/hints. They can also include a Stepper in its minimal configuration in the ModalFooter:

Loading demo…

Rules For Designers

Header and body background colour is $color-gray-100 (#eef0f4).
The close link in the top-right corner is mandatory and follows the rules above.
The description has 70px = .g-modal-body-large horizontal spacing.
The image/animation takes 100% width and has a 16px vertical spacing. The final height of the modal depends on the height of this image/animation.
It is the job of the image/animation to contain proper transparent padding areas to create a visually pleasing effect.
The footer is a regular, white .modal-footer.

ConfirmationModal

Open in Figma

These modals are based on the .g-modal-confirmation class.

Loading demo…

Rules For Designers

Headers and footers follow the same rules as regular modals. Headers are always empty, footers may be empty or may contain buttons.
There are no separator lines after the header or before the footer area.
The body area has 65px spacing to the icon and 30px spacing below the text.
Icon size is 128px.
Icons can be colour $color-ui-green (#07a721), $color-ui-red (#cf2a1e) or $color-gray-300 (#a3b5c9).

DrawerModal

Open in Figma

These modals are based on the .g-modal-drawer class. It’s positioned on the right of the browser window and fills the whole vertical viewport.

Loading demo…

Rules For Designers

Headers and footers follow the same rules as regular modals. Footers may be empty or may contain buttons.
Headers do not use icons
Instead of scrolling the whole Modal only the body area is scrollable in case of overlowing content.
Header and footer area stick to the top, respectively bottom, of the browser window.

Unlike the examples above, modals are not embedded in pages, but open fullscreen. Try the buttons below for a demo.

Loading demo…

HINT To close the modal that opens in the demo above you have to click one of the buttons or press ESC. Clicking the backdrop does not do anything.

html<button
  type="button"
  class="btn g-btn-primary"
  data-backdrop="static"
  data-keyboard="false"
  data-toggle="modal"
  data-target="#myModal"
>
  Show me the Modal!
</button>

When a modal opens, the background overlay shown derives from Bootstrap’s default. It’s rules are:

Loading demo…

Rules For Designers

The backdrop colour is $color-blue-400 (#0a285c), 30% transparent.
The modal’s shadow is 0 0.4rem 5.8rem rgba(0, 0, 0, 0.3).

Modal

Basics

Header

Body

Background colour

Additional spacings

Footer

Signing footers WIP

SmallModal

TeaserModal

ConfirmationModal

DrawerModal

Opening a modal window

Modal backdrop