CSS classes

Use:

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

BEM variants

Use:

• 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 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 Card Selection layout test file

Form pages

See Forms > Labels for how to implement form labels.

Use for:

• Requesting user text input

☞ 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 Finish layout test file

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.

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