FocusPage Beta React-only

Open in Storybook Open in Figma

HINT To see how a FocusPage adapts to tiers/breakpoints, please open the demos on this page in the responsive viewer or in Playroom.

FocusPage (previously colloquially also known as Nodal) is the preferred successor to Modals. The component is composed of a StripeHeader, optional Stepper or BreadcrumbNavigation and either a Card or a CardGroup.

Loading demo…

Rules For Designers

Cards inside FocusPage have custom padding of 32px on SM and above
Cards inside FocusPage lose margins, box shadow and border radius on XS

Rules For Developers

Set FocusPage headers to sticky. If you need to display other elements above it, use stickyOffset

Sizes

FocusPage comes in three sizes. The content is laid out depending on both the FocusPage’s size configuration and the width of the viewport. Based on both of these values the FocusPage decides on an amount of grid columns to reserve for its content.

By default, the FocusPage size is set to MEDIUM. It is encouraged to use the size that fits the content the best, even different sizes for different steps of a flow.

The table below describes the resulting FocusPage content widths in pixels.

Width in pixels

Size	Tier XS*	Tier SM	Tier MD	Tier LG	Tier XL	Tier XXL**
FocusPage.SIZE.SMALL	-	510	510	510	510	510
FocusPage.SIZE.MEDIUM	-	510	690	690	690	690
FocusPage.SIZE.LARGE	-	510	690	850	850	850

* The content always spans the full width on XS tier.
** To activate XXL tier useBs5Grid needs to be enabled in ThemeProvider. Otherwise, the XL widths apply.

Loading demo…

Configurations

There are two configurations for use of FocusPage.

Detail

The more simple Detail configuration is used when there aren’t multiple steps, and the user is just moving one level deeper in the hierarchy. Always show the main navigation in this case.

In Detail configuration FocusPage can optionally include a button on the right.

Loading demo…

Rules For Designers

The left Button should navigate one level back
The right side can contain a secondary button or – on special occasions – a StripeActionButton

Flow

This configuration is used for displaying flows with at least two steps. The main navigation should be hidden when using the Flow configuration.

If the flow has at least three steps, use FocusPage with a Stepper (see below).

Loading demo…

Rules For Designers

Flow needs to be closeable with a tertiary Button on the right side
FocusPages triggered from products should inherit the product colour and also reflect the corresponding icon, image, alias, and amount in the StripeProductInfo on the left. If the product has no amount then this property may be omitted.
FocusPages not triggered from products can omit the StripeProductInfo and the colour prop of the StripeHeader, thereby using the default background.
When using Stepper, don’t change the StripeTitle as the user is progressing through the steps. It should reflect the feature name that the FocusPage flow represents, ideally starting with a verb: “Adjust … / Change … / Set up …”
If you only have two steps, then don’t use the Stepper and change the StripeTitle dynamically to the current step’s name.

Stepper

The Stepper marks progress inside a flow of steps. If it has less than 5 steps, it shows all of them, displaying an overview of the entire flow. However, when a Stepper is viewed in XS or 5+ steps a compact version is rendered instead. The compact version informs about the current step and overall progress.

Loading demo…

Rules For Developers

Steps are created by passing an array of labels
The currentStepIndex starts from 0
Compact Stepper can be forced on all tiers with the compact prop. This should be done only in case there are multiple sub-flows, to make sure that the Stepper variant doesn’t change when user moves between them
With the showPercentage prop, the compact Stepper can display progress as a percentage instead of the usual label. This is purely visual and the full list of steps still needs to be provided for accessibility reasons

Rules For Designers

Stepper should be used only for flows with at least three steps. See Flow configuration above.

Compact labels

By default a label like Step 1 of 3 - Select limit is rendered above the compact bar. There are two alternative options.

The label can be overridden using the compactLabel prop. And using the showPercentage prop a progress percentage can be displayed instead of the label. These options are available only when the Stepper is rendered in its compact variant. (Either automatically or forced.)

Loading demo…

Rules For Developers

compactLabel prop accepts a LanguageProvider-like template string. Variables (currentStepLabel, currentStep and totalSteps) can be accessed with double curly brackets (`{{example}})

Rules For Accessibility

Remember to always provide sensible step names. They are not visible in the compact stepper, but they are necessary for screen reader users
Custom compactLabel is hidden from assistive technologies. They get the list of step names instead

With side buttons

Stepper interface can be enhanced by incorporating buttons alongside it through the Flex component.

HINT This configuration should be used only for smaller tiers (XS/SM).

Loading demo…

BreadcrumbNavigation

FocusPage may contain BreadcrumbNavigation instead of Stepper.

Loading demo…

Rules For Designers

BreadcrumbNavigation can be shown only on MD+ tiers
BreadcrumbNavigation cannot be used on FocusPage with SMALL size
BreadcrumbNavigation cannot be used together with Stepper