Guided setup layout CSS classes

Use:

• .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.

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

☞ 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

☞ 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 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 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 test file.

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.

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