Bugcrowd Design System

Bugcrowd Design System

Search/

Patterns

Last modified:

Patterns are usually assemblages of components intended to solve a particular design problem.

Back to top

Blank state

Last modified:

Used to tell users why there is no content.

Blank states are for when there is no content within a page or section. Use them as placeholders to tell users why there is no content. Ideally, blank states should provide a call-to-action to see or add content.

Add .bc-avatar to a <img> to add images in your blank state.

Inline control group

Last modified:

Styles for grouped inline buttons or control input, in a tab-style.

Inline control group features

Use with either <button>s or radio <input>s via Control inputs.

This feature’s button styles are hard set to those of the .bc-btn--secondary style, removing the need to explicitly set button style variants.

Includes support for adding --counter Badges and Hints.

Inline control responsive styles

Buttons:

  • Have centered button text
  • At <xs organised into a (flex) column
  • At ≥xs organised into a (flex) row, expand equally to fill the row
  • At ≥sm expand in width according to the button content, stacked left
  • Will wrap if there are too many items or the string(s) are sufficiently long.

Inline control variants

  • --block: at ≥sm items grow equally in a single line, taking up the entire line
  • --left: aligns the text of buttons to the left at <sm

Inline control states

Use .bc-btn--active class specific to this feature class for current selection styling of <button>s.

When using radio buttons their state styling is controlled by their checked state.

Similarly, disabled state handling is automatic for radio buttons and <button>s.

Use the .bc-btn--disabled class for styling ‘disabled’ anchors. Make sure you also set aria-disabled to true and the tabindex to -1.

Login

Last modified:

User log in and sign up pattern.

The login pattern is built with numerous design system components, extending some of them to achieve the custom styles desired.

Login pattern code examples

ℹ️ Note the variants lists for this feature are not actually BEM CSS class variants; they’re just separate markup examples.

The ‘default’ code example is for Portal while the variants show examples for:

  • ☞ Portal log in
  • Portal sign up
  • Tracker sign up
  • Tracker log in

Login pattern usage

  • Make sure you set the correct heading hierarchy level for the login panel heading
  • Set panel should be set on a page with the .bc-body--interstitial.bc-body--interstitial-brand class applied to the <body>
  • Center the panel on the page using the the Grid on the panel/login div itself.

Login pattern dependencies

  • .bc-body--interstitial
  • .bc-panel
  • .bc-text-input
  • .bc-btn
  • .bc-fieldset

Last modified:

React component to show/hide a dropdown panel for menus.

Used for various dropdown menu needs, notably within the Navbar.

This pattern uses the MenuButton and MenuPanel components.

bc-element/BcDropdownMenu

BcDropdownMenuExample
  • Containers:
    • Panels
  • Components:
    • Buttons
    • Link lists (deprecated)

Note that this pattern does not have its own Sass partial; styling comes purely from its dependencies.

Program card

Last modified:

Panel-like cards for displaying information about a Program.

Program cards in Portal also provide either the submit report or accept invite call to actions.

In Tracker Program cards provide quick links to submissions in the processing, to review, and to fix states, a view brief icon link to that program’s brief, and AVM actions as required.

ℹ️ Default type: Researcher Portal cards are the default Program card style.

Program card usage

When giving a list of programs ensure each program is a list item within either a sorted or unsorted list.

Program card progressive enhancement

The logo backdrop is a link that provides a duplicate anchor to the program brief or summary (between Portal and Tracker respectively).

It’s intended to provide visual users a large, clickable region to view more information.

But due to the duplication in the markup, we need to actually hide this extra link from assistive technologies. Note the markup, which:

  • Removes the anchor from the tab order via tabindex="-1"
  • Sets aria-hidden="true" to mark as being irrelevant/hidden.

Program card variants

There are three variants:

  • Tracker Program cards: bc-program-card--tk
  • ‘Hero’ or banner-style Program cards: bc-program-card--hero
  • Inactive or disabled Program cards: bc-program-card--inactive

The --hero program cards can be applied to both the base and the Tracker variant.

Program card dependencies

  • Containers:
    • Grid
    • Panels
  • Components:
    • Badges
    • Buttons
    • Icon
    • Stat

Section header

Last modified:

Section headers hold headings, subheadings, introductory text, and actions like buttons and dropdowns.

Section headers are built to clearly distinguish multiple <article>s or <section>s from one another, while locating high-level actions near these headings.

Section headers are used as the titles of each major section of a page in the interface.

To create a consistent user experience, the section header pattern always holds the heading, subheading, and introductory text on the left while any related actions are positioned to the right [at ≥ desktop breakpoints].

Within a section header, the .bc-h1..6 heading classes:

  • Retain their top margin
  • Have their bottom margins all set to 0.5rem, unless they are followed by another element.

You can place any of these six heading classes into this header.

An --unlined variant is available for when the bottom border is not necessary.

Submission card

Last modified:

Cards, primarily for displaying Submission data.

Use to group submission details into a clickable card.

Submission card usage

The primary content must be contained within bc-card__main.

This feature has elements that break at the md breakpoint, so align the grid classes as given in the markup example.

Submission card dependencies

  • Containers:
    • Grid
    • Panels
  • Components:
    • Badges
    • Buttons
    • Managed logo
    • Rewards

Userblock

Last modified:

Versatile avatars with names/titles and associated metadata.

Use to group avatar, name, and metadata together, in table cells, lists, and in large ‘hero’ panes.

Userblock BEM classes

ClassPurpose
.bc-userblock__titleclass for the primary data point (usually the user’s name)
.bc-userblock__metaoptional class for additional <small> data points
.bc-userblock__actionsoptional class for call-to-action functions
.bc-userblocksplural container class for multiple userblocks

Aligning content in Userblocks

By default Userblocks vertically centers its contents. For this reason ensure .bc-avatar aligns well with the content.

Avatars are aligned to the top of the Userblock against avatar titles and any added extra meta content.

⚠️ Data-table support: Do not use --lg/--xl Userblock variants in Data tables.

TODO:

  • add note about using in:
    • tables
    • lists (plural)
    • panels
  • add note about using the Avatar component dependency and its variants

Userblock dependencies

  • .bc-avatar