Overview

Slide Overs are fixed-width panels that slide over from the right of the screen to provide context to an item on screen.

Slide Overs help keep tables and indexes clean, while allowing the user to see more details in a focused, read-only panel.

Slide Overs are generally reserved for Index pages or tables, but in certain circumstances can be leveraged elsewhere.

 

 

Design

Structure

• Header: provides a title and context to the purpose and content within the Slide Over
• Body: the container that holds the content of the Slide Over
• Footer (optional): a footer that can include action items

Header

• Title: describes the purpose the Slide Over
• Close (X): closes the Slide Over panel (along with Esc)
• Leading icon (optional): in rare circumstances, an optional icon can be included before the Slide Over title—similar to the modal.

 

Sticky header

When the content is longer than the viewport, the overflow-y should scroll. The footer should remain sticky and a drop shadow is applied as the marketer scrolls down the panel.

 

Body

The Slide Over body should fill the available space of the panel.

 

Bg color options available for the Slide Over body. It is common to use cards within these panels, so to elevate the cards from the light background, the ${colors.bgSecondary} is the default.

 

 

Footer (optional)

The Slide Over can include an optional footer that includes action buttons. These should follow the same rules and principles as the Modal footers—since the Slide Over is essentially a stretched Modal.

• When using a single button, the button should flex the width of the container.
• When using a primary and secondary or 2 secondary buttons, the should flex to fill the available space.
• If there is only a single action item and a cancel, the buttons should sit to the far right, and their width is determined by the button content.

 

 

Guidelines

Use cases

• Quickly viewing details about a resource or item on an index without having to leave the current view.
• Provide deeper explanation or meaning behind certain calculations or configurations without sending them to Support documentation—for example explaining what certain terms in experimentation mean (winning variation, statistically insignificant, etc).
• Providing the details around the data—like Explaining Predictive Goals and the supporting data behind it.

 

Examples

Content

Guidelines coming soon.

Accessibility

• Keyboard Navigation: Enable navigation, opening, and closing of Slide Overs using keyboard commands (Tab, Shift+Tab, Esc).
• Focus Management: On opening, shift focus to the Slide Over and trap it there until the Slide Over closes. Return focus to the initiating element when closed.
• Screen Reader Support: Use ARIA roles (role="dialog", aria-modal="true") to ensure Slide Overs are announced properly.
• Labeling: Employ aria-labelledby and aria-describedby for Slide Over titles and descriptions, aiding user context.
• Close Mechanism: Offer clear Slide Over closing methods (close button, clicking outside, Esc key) with appropriate labeling (aria-label="close").
• Auto-focus Caution: When auto-focusing, prefer interactive elements and provide contextual guidance.

Dismissing modals

Marketers can't interact with the rest of the page until the Slide Over is closed. To ensure Iterable supports both mouse and keyboard interactions, a modal can be dismissed by:

• clicking the Cancel button in the footer
• Clicking the X button in the header
• Press Esc on a keyboard
• Clicking anywhere on the scrim/overlay

 

Health