Skip to main content

About and legal overlay

Guidelines

The About and legal component is an overlay we typically use to show application information, application versions, license terms, legal regulations, copyright information and other legal content. It appears when users click on the "About and legal" icon (1) and overlays the current content. Closing this overlay brings users back to the original content.

About and legal overlay

  • (1) Info icon: opens and closes the About and legal overlay
  • (2) Replaceable content header: with default string "About & legal information"
  • (3) Close button: closes the overlay
  • (4) Tabs (optional): navigates through multiple content categories
  • (5) Changeable content: we use this to add specific application information and local legal regulations (note our Figma design is our personal recommendation)

Behavior

Overlay opens on top of application content with a semi-transparent background with a background blur effect to emphasize the overlay character. Closing this overlay brings users back to the previous content.

The overlay can be closed in three ways:

  • Select the close button.
  • Click the info icon again.
  • Click another navigation item.

When the navigation menu is collapsed, the overlay stays open.