You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Structure

Takeover

Multiple Content Sections

A Takeover can contain multiple content sections that span the width of the screen. These are useful for including navigation indicators like a Progress Tracker or other meta information about the page content.

Light Theme

A takeover can also be in a light theme. This variation is useful when visualizing a context change to a user, such as with Takeovers within Takeovers.

Takeover Header Actions

There are times where a Takeover has actions that can be performed on the content that aren't specific to moving backward or forward in a flow. These Takeover Actions can be added to the header of the Takeover.

Takeover footers generally provide flow controls such as backward, forward, and submit. Like the modal, the footer layout can be customized for different needs.

Custom Title


Best Practices

A Takeover should:

  • Be used to display a multi-step workflow that does not need context of the previous page
  • Provide a title to clearly identify the content of the page
  • Include clear call-to-actions for the user to proceed, cancel, or close

  • For more context around the page the user came from, use a Modal component.
  • For critical information that requires a specific decision, use a Dialog component.

Importing

import { Takeover } from '@servicetitan/design-system';