Guided setup layouts

Last modified:

A wizard that guides the user through a complex setup process to create objects. Setup guides can be used multiple times to create new objects.

Example of Guided setup layouts - default

React documentation

Last modified:


Last modified:

Guided setup layout CSS classes

Containers and wrappersUsage
.bc-setup-layoutContains the entire content on the page.
.bc-setup-layout__headerContains the heading content.
.bc-setup-layout__header-actionWraps and aligns the title and actions. Use for setup pages.
.bc-setup-layout__header-action-actionsRight aligns the actions. Use for ‘Save and complete later’ action.
.bc-setup-layout__mainContains the main (body) content.
.bc-setup-layout__footerContains the ‘next’ and ‘previous’ actions in the footer.


  • .bc-setup-layout__header-title: to remove the top and bottom margins for the page title
  • .bc-setup-layout__header-heading: to reduce top and bottom margins for headings nested in the header container
  • .bc-setup-layout__image: to make an image responsive to its grid layout
  • .bc-setup-layout__lead: to style text following a header. Makes body text larger and dimmed.


Last modified:

BEM variants

Use: .bc-setup-layout--start-end: with .bc-setup-layout for start and end pages to vertically align content

Guided setup layout start page

Introduces the user to what they are setting up, what to use it for, what they’ll need, and an estimate of how long it will take to complete.

Be sure to identify what it is used for and what they need to start with bullet points.

Use for:

  • Start of workflow
  • Setup introduction
  • Preparing the user for what is to come

View start page content guide in Figma

Start page grid layout

Setup start test file.

Guided setup layout card selection page

Allows user input with large, multi/single select cards.

Cards can either be radio or checkboxes.

Cards offer larger affordance and more rich content labeling.

See Control input’s .bc-control-input--card variant for how to implement card selection.

Use for:

  • Presenting options for the user to choose from.

View card selection page content guide in Figma

Card selection grid layout

Setup card selection test file.

Guided setup layout form pages

Allows user input with form inputs.

See Labels for how to implement form labels.

Use for:

  • Requesting user input

View forms page content guide in Figma

Setup forms grid layout

Setup form test file.

Guided setup layout Summary page

Allow users to review details before submitting.

Use this page as confirmation before users submit the recorded information. Users must be able to return to prior sections to edit their responses.

Use for:

  • Summarizing entered details
  • Accepting terms and conditions

View summary page content guide in Figma

Setup summary grid layout

Setup summary test file.

Guided setup layout Confirmation page

This uses the start page layout. It is the final confirmation page at the end of the workflow.

Include the following points where possible:

  • Summarize what was done
  • Identify the next steps
  • Suggest what to do next
  • How to get help if there is an issue

Use for:

  • End of workflow
  • Confirmation of completion

View finish page content guide in Figma

Setup finish grid layout

Setup finish test file.


Last modified:


Last modified:

Ideal for setting up engagements and objects that require multiple steps to complete.

All pages follow the basic page layout:

  • 10 grid columns at ≥md and <lg;
  • 8 grid columns at ≥lg breakpoint.

Guided setup layouts maintain the standard header and footer.

All setup flows must have a start, summary, and end page.

See also

Last modified:

  • Grid (Layout)
  • Common Layouts (Layout)
  • Onboarding Layouts (Layout)