Take over

A full-screen overlay for complex actions or configuration

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

Overview

Take Overs are used to complete focused and more complex interactions within the scope of a broader process like editing a Journey or selecting lists for a campaign.

Design

Structure

The Take Over component has different atomic sections with properties that can be applied based on the context and location of the Take Over.

The Take Over component includes:


  • Nav bar (optional on MD/SM)
  • Header (optional)
  • Overlay (optional on MD/SM)
  • BodyFooter (optional)
🟡 Take Over / Size=Md-Lg

Sizes

The Take Over has 4 sizes:

  • Full (full-page Take Over)
  • XLarge (almost full-page, for complex interactions or forms inside of a larger more complex flow)
  • Large (about 2/3 of the viewport—helpful when seeing the content is still necessary during a complex form, for example configuring a campaign in Studio)
  • Medium (half-width, used for basic forms or when it’s important to still show the underlying related content)
  • Small (the smallest variant, often used without a scrim/overlay and nav bar. Great for larger forms or multi-step workflows that don’t work well in a Slide Over Panel)

While the sizes for Small, Medium, and Large have static px values, the Xlarge version is calculated based on the viewport width.


                                                        
                                                        
                                                            export const SIZE_WIDTHS = {  
                                                            [DRAWER_SIZES.FULL]: 100vw;
                                                            [DRAWER_SIZES.XLARGE]: `calc(100vw - ${spacing.x4})`, 
                                                            [DRAWER_SIZES.LARGE]: pxToRem(928),
                                                            [DRAWER_SIZES.MEDIUM]: pxToRem(672), 
                                                            [DRAWER_SIZES.SMALL]: pxToRem(525),};
                                                            
                                                        // default size is LARGE.
                                                        
                                                            

 

Navbar variations

The Take Over nav bar is primarily used in situations where the Take Over covers more than 50% of the screen (XL or LG variants require it). It can also be used optionally at smaller sizes, such as the sidebar in Journey Studio.

When the primary action is editing/creation, the purple nav bar should be used—this is also referred to as ‘Edit mode’. When the function of the screen is for review or read only sections, the white header should be used or also referred to as ‘Focus’ mode.

🟡 _Parts / Takeover / Nav Bar / Type=Takeover, Edit mode=True, Edit title=False

 

Header variations

The Take Over header has a number of props that can be enabled based on the location and context of the Take Over.

Header Variations

Header Variations


There are a handful of Studio-only items that can be used in the header:


  • Tile Icon
  • Note Button
  • Editable Title (in rare circumstances this can be used elsewhere)

 

Body

The body slot component can be swapped out with local body components. The default Takeover body uses the same padding as our cards, 24px / ${spacing.cardPadding}

_Parts / Takeover Body

_Parts / Takeover Body

 

Footer variations

Footer variations

 

Guidelines

Use cases

  • Selecting a list while building a campaign; provides a temporary index view with all the list metadata available without the marketer leaving their current process
  • Editing the design of a template within the process of creating a template
  • Configuring and editing the details of a Journey tile in Studio

 

Examples

Examples coming soon.

 

Content

  • Takeover headers should relate to the purpose or function of the takeover. For example, when adjusting the campaign priority in a takeover when setting up an embedded message, the Takeover header should say “Campaign priority,” not the name of the campaign.

 

Accessibility

  • Ensure that focus management is handled properly through the different parts of the Takeover so they flow in a logical pattern—left to right, top to bottom. Test each implementation by opening the Takeover and pressing Tab to navigate through the element.

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy