Onboarding layouts

Last modified:

Introductory, welcoming layouts that introduce the user to the app or new feature.

React documentation

Last modified:


Last modified:

CSS classes

Containers and wrappersUsage
.bc-setup-layout bc-setup-layout--onboardingContains and center aligns the entire content in the page.
.bc-setup-layout__headerContains the heading content.
.bc-setup-layout__mainContains the main (body) content.
.bc-setup-layout__footerContains the ‘next’ and ‘previous’ actions in the footer.


  • .bc-setup-layout__header-heading: to reduce the 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


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

Start page

Introduces the user to who we are, what they are going to do, why they’re doing it, and an estimate of how long it will take to complete.

Use for:

  • Start of workflow
  • Splash pages

Onboarding center start

Onboarding Start layout test file

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

Onboarding center card selection

Onboarding Card Selection layout test file

Form pages

See Forms > Labels for how to implement form labels.

Use for:

  • Requesting user text input

Onboarding center forms

Onboarding Form layout test file

Finish/Thank you page

Similar to the Start page layout, but with a completed progress bar.

This page confirms the completion of the onboarding experience.

Use for:

  • End of workflow

Onboarding center finish

Onboarding Finish layout test file


Last modified:


Last modified:

Onboarding layouts is a one-time experience and is recommended for introducing and familiarizing a new user to Bugcrowd’s products and services.

Avoid complex steps with a maximum of:

  • 3 form inputs per step
  • 2 form input types in a single step
  • 5 steps (not including start and end pages) in a single onboarding experience.

The header is simplified, and the footer is removed to minimize distraction.

Use this layout for flows such as:

  • onboarding
  • introductions
  • account setup
  • splash pages
  • or feature presentations.

All onboarding flows must have a start and end page.

Onboarding page layout

All pages follow the basic page layout:

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

Buttons in Onboarding layouts

The primary action should always come first and should be the action that progresses the workflow.

All buttons are center aligned with the following column widths:


Forms in Onboarding layouts

Form inputs are purposely left-aligned for scannability.

Maintain consistency between the form fields and buttons by using the same grid layout.

See also

Last modified:

  • Grid (Layout)
  • Common Layouts (Layout)
  • Guided Setup Layouts (Layout)