Bugcrowd design system: Layout

When planning a page:

  • Know your use case
  • Prioritize your content
  • Keep related content close together

When laying out content on a page:

  • Use one of the Common layouts
  • Maintain a meaningful reading order across breakpoints between:
    1. Source/markup order
    2. Visual display order (the sequential logic of the graphical layout)
    3. Tab/keyboard focus order.
  • Use semantic HTML5 markup
  • Use Grid rows and columns only as needed
    • When customizing, beware of both squashed and overly-wide text content blocks
  • Test pages in viewport widths across all breakpoints (from 536 to 1200 pixels)
  • Define the language and reading direction in the <html> element (using lang and dir)
    • Use left- and right-aligned text for left-to-right and right-to-left languages respectively;
    • Be careful of eroding readability when using justified text;
    • Avoid centered text formatting outside of headings or hero copy.</>

Grid

Guidance last updated: Sep 28, 2022

A reimplementation of the 12-column Bootstrap 3 grid system.

This means you can use the Bootstrap 3 grid documentation to build grids.

Use a .bc-grid wrapper class for these otherwise unprefixed BS3 grid classes.

Rows can be placed anywhere provided they’re inside a .bc-grid container.

Grid test file.

Grid customizations

  1. Added xl breakpoint ($bc-media-xl)
    • *-xl-*” breakpoint classes
  2. .container-fluid__container: a fixed-width ‘inner’ container for the fluid container.

Common layouts

Guidance last updated: Sep 28, 2022

The common layouts we use in products.

A layout will apply to a viewport width ≥ its defined breakpoint and < the upper breakpoint(s).

This because the Grid system is mobile-first, and the bc-media mixin uses min-width instead of max-width.

Wide page layout

12 grid columns for full container-width wide content.

Use for

  • Big tables
  • Wide graphs
  • Hero or banner content

Wide content layout

Wide content layout test file.

Basic page layout

Page without sidebar.

Use for pages that:

The main content has:

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

Basic page layout

Basic page layout test file.

Supporting sidebar layout

8 grid columns for the main content, and 4 columns for the sidebar.

Use for pages that have main content and a related, secondary <aside> or sidebar.

At viewport width ≥ xm and < sm, the layout uses all 12 grid columns (full width), and so the sidebar appears below the main content.

Supporting sidebar layout

Supporting sidebar layout test file.

Important sidebar layout

8 grid columns for the main content, and 4 grid columns for the sidebar. The sidebar should contain information that is important.

Use for pages that have main content but a sidebar with information that comes first in the markup order.

Don’t use for pages that have long sidebar information. This will push the main content further down at screen width ≥ xm and ≤ sm.

At viewport width ≥ xm and < sm, the layout use 12 grid columns (full width) and the sidebar appears above the main content.

Important sidebar layout

Important sidebar layout test file.

Page with navigation

8 grid columns for the main content, and 3 grid columns for the side navigation.

Use for

  • Pages with vertical navigation on the left
  • Pages with data filters on the left.

Don’t use for pages that have main content and a sidebar with information on the left.

Page with navigation layout

Page with navigation layout test file.

Card grid

Cards arranged in a grid.

Each card has:

  • 3 grid columns at width ≥ lg
  • 4 grid columns at width < lg and ≥ md
  • 6 grid columns at width < md and ≥ sm
  • 12 grid columns at width < sm.

Card grid layout

Card grid layout test file.

Setup layouts

Guidance last updated: Sep 28, 2022

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.

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

All pages follow the basic page layout. 8 grid columns at width ≥lg, 10 grid columns at width <lg and ≥md.

Setup layouts maintain the standard header and footer to allow the user to leave the workflow and re-engage at a later time.

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

Containers and wrappers

Containers and wrappers Usage
bc-setup-layout Contains the entire content on the page.
bc-setup-layout__header Contains the heading content.
bc-setup-layout__header__action Wraps and aligns the title and actions. Use for setup pages.
bc-setup-layout__header__action__actions Right aligns the actions. Use for ‘Save and complete later’ action.
bc-setup-layout__main Contains the main (body) content.
bc-setup-layout__footer Contains the ‘next’ and ‘previous’ actions in the footer.

Guidance on styles

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

Guidance on variants

Use:

  • bc-setup-layout--start-end: with bc-setup-layout for start and end pages to vertically align content.
  • bc-setup-layout__footer--single: with bc-setup-layout__footer for single actions within setup page footers. Keeps the primary action on the left of the page.

Introduction/Start page

Introduces the user to what they are setting up, what to use it for, what they will 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

Setup start

Setup start test file.

Card selection page

Allows user input with large, multi/single select cards. These cards can either be radio or checkboxes, but should offer larger affordance and rich content for usability.

See Forms > Control input > –card variant for how to implement card selection.

Use for

  • Presenting options for the user to choose from.

Setup card selection

Setup card selection test file.

Form page

Allows user input with form inputs. These can be labeled semantically with aria-labelledby attribute by the title and description, or with a standard visible <label>.

See Forms > Labels for how to implement form labels.

Use for

  • Requesting user input

Setup forms

Setup form test file.

Summary page

Allow users to check the final details. Use this page as confirmation before users submit the recorded information. This provides users with an overview of their actions.

Use for

  • Summarizing entered details
  • Accepting terms and conditions

Setup summary

Setup summary test file.

Finish/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

Setup finish

Setup finish test file.

Onboarding layouts

Guidance last updated: Sep 28, 2022

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

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.

Page layout

All pages follow the basic page layout. 8 grid columns at width ≥lg, 10 grid columns at width <lg and ≥md.

Buttons

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:

Breakpoint Columns
≥sm 10
≥md 8
≥lg 6
≥xl 4

Forms

Form inputs are purposely left-aligned for scanability. Maintain consistency between the form fields and buttons by using the same grid layout.

Containers and wrappers

Containers and wrappers Usage
bc-setup-layout bc-setup-layout--onboarding Contains and center aligns the entire content in the page.
bc-setup-layout__header Contains the heading content.
bc-setup-layout__main Contains the main (body) content.
bc-setup-layout__footer Contains the ‘next’ and ‘previous’ actions in the footer.

Guidance on styles

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

Guidance on variants

Use:

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

Introduction/Welcome page

Introduces the user to who we are, what they are going to do, why they are 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 test file.

Card selection page

Allows user input with large, multi/single select cards. These cards can either be radio or checkboxes, but should offer larger affordance and rich content for usability.

See Forms > 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 test file.

Form page

Allows user input with form inputs. These can be labeled semantically with aria-labelledby attribute by the title and description, or with a standard visible <label>.

See Forms > Labels for how to implement form labels.

Use for

  • Requesting user text input

Onboarding center forms

Onboarding form 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 test file.