Guidance last updated: Sep 4, 2023

Rendered example

Used to deliver Access Vending Machine status alerts to application users.

AVM alerts are positioned at the top of the page.

These alerts do not have a dismiss function; they are only removed once the related status is resolved or changes.

Usage

The banner is expected to be used alongside the full-width .container-fluid grid class, and should be placed in the fixed position header in Tracker.

Dependencies

bc-grid
bc-btn

.container-fluid.bc-avm-banner
  .container-fluid__container
    .bc-avm-banner__message
      %span.bc-avm-banner__title
        Unlimited support access expires soon:
      %span.bc-avm-banner__body
        access to all programs will expire in 3 hours.
    .bc-avm-banner__actions
      %button.bc-btn.bc-btn--secondary.bc-btn--small
        Renew
      %button.bc-btn.bc-btn--secondary.bc-btn--small
        Revoke

Blankstate

Guidance last updated: Sep 4, 2023

Rendered example
Variants:

--sm
--lg
--nobg

Used to tell users why there is no content.

Blank slates 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 slates should provide a call-to-action to see or add content.

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

Rendered example of Blankstate

No one has been admitted yet

Claim a spot by submitting a unique, valid vulnerability.

Submit report

Haml markup example of Blankstate

.bc-blankstate.bc-panel
  %h4.bc-blankstate__title
    No one has been admitted yet
  %p.bc-blankstate__description
    Claim a spot by submitting a unique, valid vulnerability.
  %a.bc-btn.bc-btn--secondary.bc-btn--small
    Submit report

Variants

`--sm` variant

Rendered example of Blankstate

Inbox empty

You have no new notifications.

Haml markup example of Blankstate `--sm`

.bc-blankstate.bc-blankstate--sm.bc-panel
  %h4.bc-blankstate__title
    Inbox empty
  %p.bc-blankstate__description
    You have no new notifications.

`--lg` variant

Rendered example of Blankstate

We’re waiting for your submission to be marked as valid

We’ll update your stats page once you have at least one confirmed vulnerability. Manage your submitted vulnerabilities below.

Manage submissions

Haml markup example of Blankstate `--lg`

.bc-blankstate.bc-blankstate--lg.bc-panel
  %h4.bc-blankstate__title
    We’re waiting for your submission to be marked as valid
  %p.bc-blankstate__description
    We’ll update your stats page once you have at least one confirmed
    vulnerability. Manage your submitted vulnerabilities below.
  %a.bc-btn.bc-btn--secondary.bc-btn--small
    Manage submissions

`--nobg` variant

Rendered example of Blankstate

This is a blank state

Use it to provide information when no there is no content.

Related action

Haml markup example of Blankstate `--nobg`

.bc-blankstate.bc-blankstate--nobg.bc-panel
  %h4.bc-blankstate__title
    This is a blank state
  %p.bc-blankstate__description
    Use it to provide information when no there is no content.
  %a.bc-btn.bc-btn--secondary.bc-btn--small
    Related action

Inline control group

Guidance last updated: Sep 4, 2023

Rendered example
Variants:

--block
--left

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.

Rendered example of Inline control group

Make a selection

None Low Medium High

Haml markup example of Inline control group

.bc-form
  .bc-form__group
    .bc-inline-control-group
      %button.bc-btn
        Backlog
      %button.bc-btn.bc-btn--active
        In progress
      %button.bc-btn
        Done
      %button.bc-btn(disabled)
        %span
          Archived
          %small.bc-hint.bc-helper-inline
            (none)

  .bc-form__group
    .bc-fieldset
      .bc-fieldset__legend
        Make a selection
      .bc-inline-control-group
        %label.bc-control-input
          %input.bc-control-input__input(disabled){name: 'radio-ctrl-grp-eg0', type: 'radio'}
          %span.bc-btn
            None
        %label.bc-control-input
          %input.bc-control-input__input{name: 'radio-ctrl-grp-eg0', type: 'radio'}
          %span.bc-btn
            Low
        %label.bc-control-input
          %input.bc-control-input__input{name: 'radio-ctrl-grp-eg0', type: 'radio'}
          %span.bc-btn
            Medium
        %label.bc-control-input
          %input.bc-control-input__input(checked){name: 'radio-ctrl-grp-eg0', type: 'radio'}
          %span.bc-btn
            High

Variants

`--block` variant

Rendered example of Inline control group

Haml markup example of Inline control group `--block`

.bc-form
  .bc-form__group
    .bc-inline-control-group.bc-inline-control-group--block
      %button.bc-btn
        %span
          Backlog
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            1337
      %button.bc-btn.bc-btn--active
        %span
          In progress
          %span.bc-badge.bc-badge--counter
            42
      %button.bc-btn
        %span
          Done
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            1024
      %button.bc-btn(disabled)
        %span
          Archived
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            0

  .bc-form__group
    .bc-inline-control-group.bc-inline-control-group--block
      %button.bc-btn.bc-btn--active.bc-helper-lefttext
        %span Low
        %span.bc-hint.bc-helper-nomargin
          $512&thinsp;&ndash;&thinsp;$2,048 Dollarydoos
      %button.bc-btn.bc-helper-lefttext
        %span Medium
        %span.bc-hint.bc-helper-nomargin
          $1024&thinsp;&ndash;&thinsp;$3,612 Dollarydoos
      %button.bc-btn.bc-helper-lefttext
        %span High
        %span.bc-hint.bc-helper-nomargin
          $5,120&thinsp;&ndash;&thinsp;$10,240 Dollarydoos
      %button.bc-btn.bc-helper-lefttext(disabled)
        %span Dogecoin
        %span.bc-hint.bc-helper-nomargin
          512&thinsp;&ndash;&thinsp;42,240 Dogecoin

`--left` variant

Rendered example of Inline control group

Haml markup example of Inline control group `--left`

.bc-form
  .bc-form__group
    .bc-inline-control-group.bc-inline-control-group--left
      %button.bc-btn
        Backlog
        %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
          1337
      %button.bc-btn
        In progress
        %span.bc-badge.bc-badge--counter
          42
      %button.bc-btn
        Done
        %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
          1024
      %button.bc-btn(disabled)
        Archived
        %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
          0

Guidance last updated: Sep 4, 2023

Rendered example
Variants:

--portal-signup
--tracker-signup
--tracker-signin

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.

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 sign up
Tracker sign up
Tracker log in

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.

Dependencies

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

.bc-login.bc-panel.bc-panel--action
  .bc-panel__header
    %h4.bc-panel__title
      Log in to Bugcrowd
    %p
      or
      %a{href: "javascript:void(0)"}create an account
  %form.bc-panel__main.bc-form.bc-helper-nomargin
    .bc-form__group
      %label.bc-label{for: 'crowd-email'}
        Your account email
      %input.bc-text-input.bc-text-input--block{name: 'crowd-email', id: 'crowd-email', type: 'text', placeholder: 'Email address'}

    .bc-form__group
      %label.bc-label{for: 'crowd-pwd'}
        Your account password
      %input.bc-text-input.bc-text-input--block{name: 'crowd-pwd', id: 'crowd-pwd', type: 'text', placeholder: 'Password'}

    .bc-form__group
      %button.bc-btn.bc-btn--block
        Log in

  .bc-panel__footer
    %a.bc-hint{href: "javascript:void(0)"}Forgot your password?
    %a.bc-hint{href: "javascript:void(0)"}Resend confirmation email

Variants

`--portal-signup` variant

.bc-login.bc-panel.bc-panel--action
  .bc-panel__header
    %h4.bc-panel__title
      Become a researcher
    %p
      Already have an account?
      %a{href: "javascript:void(0)"}Log in
  %form.bc-panel__main.bc-form.bc-helper-nomargin
    .bc-form__group
      %fieldset.bc-fieldset.bc-fieldset--visible
        %legend.bc-fieldset__legend
          New researcher account details

        %label.bc-label{for: 'user-name'}
          Username
        %input.bc-text-input.bc-text-input--block{name: 'user-name', id: 'user-name', type: 'text', placeholder: 'Username'}

        %label.bc-label{for: 'user-email'}
          Email address
        %input.bc-text-input.bc-text-input--block{name: 'user-email', id: 'user-email', type: 'text', placeholder: 'Email'}

        %label.bc-label{for: 'user-pwd'}
          Password
        %input.bc-text-input.bc-text-input--block{name: 'user-pwd', id: 'user-pwd', type: 'text', placeholder: 'Password'}

        %label.bc-label{for: 'user-pwd-confirm'}
          Password confirmation
        %input.bc-text-input.bc-text-input--block{name: 'user-pwd-confirm', id: 'user-pwd-confirm', type: 'text', placeholder: 'Confirm password'}

        %label.bc-control-input
          %input.bc-control-input__input(checked){name: 'user-profile-public-boolean', type: 'checkbox'}
          %span.bc-control-input__label-text
            Make my researcher profile public

        %label.bc-control-input
          %input.bc-control-input__input{name: 'user-profile-public-boolean', type: 'checkbox'}
          %span.bc-control-input__label-text
            I agree to the
            %a{href: "/terms-and-conditions/"}Terms &amp; Conditions
            and
            %a{href: "/standard-disclosure-terms/"}Standard Disclosure Terms

    .bc-form__footer
      %button.bc-btn.bc-btn--positive.bc-btn--large
        Sign up

`--tracker-signup` variant

.bc-login.bc-panel.bc-panel--action
  .bc-panel__header
    %h4.bc-panel__title
      Sign up to get access to Crowdcontrol
    %p
      Already have an account?
      %a{href: "javascript:void(0)"}Log in
  %form.bc-panel__main.bc-form.bc-helper-nomargin
    .bc-form__group
      %fieldset.bc-fieldset.bc-fieldset--visible
        %legend.bc-fieldset__legend
          Tell us about your organization

        %p.bc-hint
          An organization allows you to create and run your own security programs
          with the crowd.

        %label.bc-label{for: 'org-name'}
          Organization name
        %input.bc-text-input.bc-text-input--block{name: 'org-name', id: 'org-name', type: 'text', placeholder: 'Organization name'}

        %label.bc-label{for: 'org-phone'}
          Organization phone (optional)
        %input.bc-text-input.bc-text-input--number.bc-text-input--block{name: 'org-phone', id: 'org-phone', type: 'tel', placeholder: 'Phone number'}

    .bc-form__group
      %fieldset.bc-fieldset.bc-fieldset--visible
        %legend.bc-fieldset__legend
          Organization account details

        %p.bc-hint
          Your account is used when replying to researchers and validating reports.

        %label.bc-label{for: 'org-display-name'}
          Organization display name
        %input.bc-text-input.bc-text-input--block{name: 'org-display-name', id: 'org-display-name', type: 'text', placeholder: 'Organization display name'}

        %label.bc-label{for: 'org-email'}
          Organization email address
        %input.bc-text-input.bc-text-input--block{name: 'org-email', id: 'org-email', type: 'text', placeholder: 'Email'}

        %label.bc-label{for: 'org-pwd'}
          Organization password
        %input.bc-text-input.bc-text-input--block{name: 'org-pwd', id: 'org-pwd', type: 'text', placeholder: 'Password'}

        %label.bc-label{for: 'org-pwd-confirm'}
          Organization password confirmation
        %input.bc-text-input.bc-text-input--block{name: 'org-pwd-confirm', id: 'org-pwd-confirm', type: 'text', placeholder: 'Confirm password'}

    .bc-form__footer
      %button.bc-btn.bc-btn--positive.bc-btn--large
        Sign up

`--tracker-signin` variant

.bc-login.bc-panel.bc-panel--action
  .bc-panel__header
    %h4.bc-panel__title
      Log in to Crowdcontrol
    %p
      or
      %a{href: "javascript:void(0)"}create an account
  %form.bc-panel__main.bc-form.bc-helper-nomargin
    .bc-form__group
      %fieldset.bc-fieldset.bc-fieldset--visible
        %legend.bc-fieldset__legend
          Your account login details

        %p.bc-hint
          Logging in with <abbr title='Security Assertion Markup Language'>SAML</abbr>? Only enter your email.

        .bc-form__group
          %label.bc-label{for: 'crowdcontrol-email'}
            Your account email
          %input.bc-text-input.bc-text-input--block{name: 'crowdcontrol-email', id: 'crowdcontrol-email', type: 'text', placeholder: 'Email address'}

        .bc-form__group
          %label.bc-label{for: 'crowdcontrol-pwd'}
            Your account password
          %input.bc-text-input.bc-text-input--block{name: 'crowdcontrol-pwd', id: 'crowdcontrol-pwd', type: 'text', placeholder: 'Password'}

    .bc-form__group
      %button.bc-btn.bc-btn--block
        Log in

  .bc-panel__footer
    %a.bc-hint{href: "javascript:void(0)"}Forgot your password?

Guidance last updated: Sep 4, 2023

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.

Dropdown menu panel React example

bc-element/BcDropdownMenu

BcDropdownMenuExample

Dropdown menu panel dependencies

Containers:
- Panels
Components:
- Buttons
- Link lists

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

Program card

Guidance last updated: Sep 4, 2023

Rendered example
Variants:

--tk
--inactive
--hero

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

Rendered example of Program card

Caffeine

Caffeine is a social broadcasting platform for gaming, entertainment, and the creative arts.
- $10,000 reward pool
- Aug 01, 2018 at 00:00 PST start of program — 25 spots left!
You Need a Budget (YNAB)
Joinable
YNAB’s Responsible Disclosure Program
- Points per vulnerability
- Jan 01, 2018 at 00:00 PST end of program — Ending soon
- Managed by Bugcrowd
Submit report
1Password
New
1Password is the world’s best password manager. Perfect for protecting your business, team, and family.
- $100 – $10,000 per vulnerability
- $100,000 bonus available
- Managed by Bugcrowd
Submit report
Dash Messaging

Dash is digital cash; Dash Messaging is messaging with digital cash attached.
- Kudos per vulnerability
- Managed by Bugcrowd
Submit report

Haml markup example of Program card

%ul.row.bc-panels.bc-panels--tiled
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #F4F5F7;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            Caffeine
        %p.bc-program-card__byline
          Caffeine is a social broadcasting platform for gaming, entertainment, and the creative arts.
      .bc-program-card__main.bc-panel__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card__reward
            %span.bc-stat__title
              $10,000
            %span.bc-stat__info
              reward pool
          %li.bc-stat.bc-program-card__date
            %span.bc-stat__title
              %time{datetime: '2018-08-01T-01:00'}
                Aug 01, 2018 at 00:00 PST
            %span.bc-stat__info
              start of program &mdash;
              %span.bc-program-card__important
                25 spots left!
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          %button.bc-btn.bc-btn--positive.bc-btn--small
            Accept invite
          %button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow{'aria-label': 'Follow this program', 'type': 'button'}
            %span Follow
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #87C4E7;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            You Need a Budget (YNAB)
        %span.bc-badge.bc-badge--text.bc-badge--p4
          Joinable
        %p.bc-program-card__byline
          YNAB’s Responsible Disclosure Program
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card__reward
            %span.bc-stat__title
              Points
            %span.bc-stat__info
              per vulnerability
          %li.bc-stat.bc-program-card__date
            %span.bc-stat__title
              %time{datetime: '2018-01-01T-01:00'}
                Jan 01, 2018 at 00:00 PST
            %span.bc-stat__info
              end of program &mdash;
              %span.bc-program-card__important
                Ending soon
          %li.bc-stat.bc-icon
            %span Managed by Bugcrowd
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          %a.bc-btn.bc-btn--small.bc-btn--tertiary{href: '#'}
            Submit report
          %button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow.bc-btn--follow-active{'aria-label': 'Follow this program', 'type': 'button'}
            %span Follow
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #1D74CE;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            1Password
        %span.bc-badge.bc-badge--text.bc-badge--success
          New
        %p.bc-program-card__byline
          1Password is the world’s best password manager. Perfect for protecting your business, team, and family.
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card__reward
            %span.bc-stat__title
              $100 &ndash; $10,000
            %span.bc-stat__info
              per vulnerability
          %li.bc-stat.bc-program-card__bonus
            %span.bc-stat__title
              $100,000
            %span.bc-stat__info
              bonus available
          %li.bc-stat.bc-icon
            %span Managed by Bugcrowd
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          %a.bc-btn.bc-btn--small.bc-btn--tertiary{href: '#'}
            Submit report
          %button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow.bc-btn--follow{'aria-label': 'Follow this program', 'type': 'button'}
            %span Follow
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #1A1A1A;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            Dash Messaging
        %p.bc-program-card__byline
          Dash is digital cash; Dash Messaging is messaging with digital cash attached.
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card__reward
            %span.bc-stat__title
              Kudos
            %span.bc-stat__info
              per vulnerability
          %li.bc-stat.bc-icon
            %span Managed by Bugcrowd
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          %a.bc-btn.bc-btn--small.bc-btn--tertiary{href: '#'}
            Submit report
          %button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow.bc-btn--follow{'aria-label': 'Follow this program', 'type': 'button'}
            %span Follow

Variants

`--tk` variant

Rendered example of Program card

Atlassian Server

Ongoing (Private)
- Processing 9
- To review 2
- To fix 61
- Blocked 0
View program brief
Atlassian Jira

Ongoing
- Processing 142
- To review 14
- To fix 32
- Blocked 3
View program brief
InVision

On-Demand (Private) — 8 days remaining
- Processing 1,042
- To review 0
- To fix 0
- Blocked 0
View program brief
Bugcrowd Ongoing
Demo

Ongoing
- Processing 1,042
- To review 0
- To fix 0
- Blocked 9
View program brief

Haml markup example of Program card `--tk`

%ul.row.bc-panels.bc-panels--tiled
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-program-card--tk
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #0D56C9;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            Atlassian Server
        .bc-program-card__byline
          %p
            %span.bc-icon.bc-icon--ongoing
              Ongoing (Private)
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card--tk-processing
            %a.bc-stat__title{href: '/'}
              Processing
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              9
          %li.bc-stat.bc-program-card--tk-to-review
            %a.bc-stat__title{href: '/'}
              To review
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              2
          %li.bc-stat.bc-program-card--tk-to-fix
            %a.bc-stat__title{href: '/'}
              To fix
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              61
          %li.bc-stat.bc-program-card--tk-blocked
            %a.bc-stat__title{href: '/'}
              Blocked
            %span.bc-badge.bc-badge--counter.bc-badge.bc-badge--counter-muted
              0
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          .bc-panel__footer-actions-left
            %a.bc-btn.bc-btn--small.bc-btn--secondary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--brief{href: '#', 'aria-label': 'View program brief'}
              %span View program brief
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-program-card--tk
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #0D56C9;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            Atlassian Jira
        .bc-program-card__byline
          %p
            %span.bc-icon.bc-icon--ongoing
              Ongoing
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card--tk-processing
            %a.bc-stat__title{href: '/'}
              Processing
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              142
          %li.bc-stat.bc-program-card--tk-to-review
            %a.bc-stat__title{href: '/'}
              To review
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              14
          %li.bc-stat.bc-program-card--tk-to-fix
            %a.bc-stat__title{href: '/'}
              To fix
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              32
          %li.bc-stat.bc-program-card--tk-blocked
            %a.bc-stat__title{href: '/'}
              Blocked
            %span.bc-badge.bc-badge--counter.bc-badge.bc-badge--counter-muted
              3
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          .bc-panel__footer-actions-left
            %a.bc-btn.bc-btn--small.bc-btn--secondary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--brief{href: '#', 'aria-label': 'View program brief'}
              %span View program brief
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-program-card--tk
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #F9386B;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            InVision
        .bc-program-card__byline
          %p
            %span.bc-icon.bc-icon--on-demand
              On-Demand (Private) &mdash;
              %span.bc-program-card__important
                8 days remaining
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card--tk-processing
            %a.bc-stat__title{href: '/'}
              Processing
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              1,042
          %li.bc-stat.bc-program-card--tk-to-review
            %a.bc-stat__title{href: '/'}
              To review
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              0
          %li.bc-stat.bc-program-card--tk-to-fix
            %a.bc-stat__title{href: '/'}
              To fix
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              0
          %li.bc-stat.bc-program-card--tk-blocked
            %a.bc-stat__title{href: '/'}
              Blocked
            %span.bc-badge.bc-badge--counter.bc-badge.bc-badge--counter-muted
              0
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          .bc-panel__footer-actions-left
            %a.bc-btn.bc-btn--small.bc-btn--secondary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--brief{href: '#', 'aria-label': 'View program brief'}
              %span View program brief
          .bc-panel__footer-actions-right
            %button.bc-btn.bc-btn--small.bc-btn--negative
              Revoke access
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-program-card--tk
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #FF6900;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            Bugcrowd Ongoing
        %span.bc-badge.bc-badge--text.bc-badge--p5
          Demo
        .bc-program-card__byline
          %p
            %span.bc-icon.bc-icon--ongoing
              Ongoing
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card--tk-processing
            %a.bc-stat__title{href: '/'}
              Processing
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              1,042
          %li.bc-stat.bc-program-card--tk-to-review
            %a.bc-stat__title{href: '/'}
              To review
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              0
          %li.bc-stat.bc-program-card--tk-to-fix
            %a.bc-stat__title{href: '/'}
              To fix
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              0
          %li.bc-stat.bc-program-card--tk-blocked
            %a.bc-stat__title{href: '/'}
              Blocked
            %span.bc-badge.bc-badge--counter.bc-badge.bc-badge--counter-muted
              9
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          .bc-panel__footer-actions-left
            %a.bc-btn.bc-btn--small.bc-btn--secondary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--brief{href: '#', 'aria-label': 'View program brief'}
              %span View program brief
          .bc-panel__footer-actions-right
            %button.bc-btn.bc-btn--small.bc-btn--negative
              Revoke access

`--inactive` variant

Rendered example of Program card

Atlassian Server

On-Demand (Private) — Closed
- Processing 0
- To review 0
- To fix 61
View program brief
Atlassian Jira

Ongoing — Closed
- Processing 0
- To review 14
- To fix 77
View program brief

Haml markup example of Program card `--inactive`

%ul.row.bc-panels.bc-panels--tiled
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-program-card--tk.bc-program-card--inactive
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #0D56C9;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            Atlassian Server
        .bc-program-card__byline
          %p
            %span.bc-icon.bc-icon--on-demand
              On-Demand (Private) &mdash;
              %span.bc-program-card__important
                Closed
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card--tk-processing
            %a.bc-stat__title{href: '/'}
              Processing
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              0
          %li.bc-stat.bc-program-card--tk-to-review
            %a.bc-stat__title{href: '/'}
              To review
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              0
          %li.bc-stat.bc-program-card--tk-to-fix
            %a.bc-stat__title{href: '/'}
              To fix
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              61
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          .bc-panel__footer-actions-left
            %a.bc-btn.bc-btn--small.bc-btn--secondary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--brief{href: '#', 'aria-label': 'View program brief'}
              %span View program brief
  %li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-program-card--tk.bc-program-card--inactive
    .bc-panel.bc-panel--lined.bc-panel--interactive
      .bc-program-card__header
        %a.bc-program-card__logo-backdrop{href: '#', tabindex: '-1', 'aria-hidden': 'true', style: 'background-color: #0D56C9;'}
          %img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72', alt: 'logo'}
        %h4.bc-panel__title
          %a{href: '#'}
            Atlassian Jira
        .bc-program-card__byline
          %p
            %span.bc-icon.bc-icon--ongoing
              Ongoing &mdash;
              %span.bc-program-card__important
                Closed
      .bc-program-card__main
        %ul.bc-stats.bc-stats--xs
          %li.bc-stat.bc-program-card--tk-processing
            %a.bc-stat__title{href: '/'}
              Processing
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              0
          %li.bc-stat.bc-program-card--tk-to-review
            %a.bc-stat__title{href: '/'}
              To review
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              14
          %li.bc-stat.bc-program-card--tk-to-fix
            %a.bc-stat__title{href: '/'}
              To fix
            %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
              77
      .bc-program-card__footer.bc-panel__footer
        .bc-panel__footer-actions
          .bc-panel__footer-actions-left
            %a.bc-btn.bc-btn--small.bc-btn--secondary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--brief{href: '#', 'aria-label': 'View program brief'}
              %span View program brief
          .bc-panel__footer-actions-right
            %button.bc-btn.bc-btn--small.bc-btn--negative
              Close program

`--hero` variant

Rendered example of Program card

$10,000 reward pool
Dec 01, 2017 at 00:00
until Jan 01, 2018 at 00:00
Managed by Bugcrowd

Haml markup example of Program card `--hero`

.row
  .col-xs-12
    .bc-program-card.bc-program-card--hero
      .bc-panel.bc-panel--lined
        .bc-program-card__logo-backdrop{style: 'background-color: #0D56C9;'}
          %img.bc-avatar.bc-avatar--xl.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/128x128', alt: 'logo'}
        .bc-program-card__body
          .bc-program-card__header
            %h4.bc-panel__title
              Atlassian
            %span.bc-badge.bc-badge--text.bc-badge--success
              New
            %p.bc-program-card__byline
              Collaboration tools for teams of all sizes.
          .bc-program-card__main.bc-panel__main
            %ul.bc-stats.bc-stats--inline
              %li.bc-stat.bc-program-card__reward
                %span.bc-stat__fig
                  $10,000
                %span.bc-stat__title
                  reward pool
              %li.bc-stat.bc-program-card__date
                .bc-stat__fig
                  Dec 01, 2017 at 00:00
                %span.bc-stat__title
                  until Jan 01, 2018 at 00:00
              %li.bc-stat.bc-icon
                %span Managed by Bugcrowd
          .bc-program-card__footer.bc-panel__footer
            .bc-panel__footer-actions
              .bc-panel__footer-actions-left
                %button.bc-btn
                  Submit report
              .bc-panel__footer-actions-right
                %button.bc-btn.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow.bc-btn--follow{'aria-label': 'Follow this program', 'type': 'button'}
                  %span Follow

.row
  .col-xs-12
    .bc-program-card.bc-program-card--tk.bc-program-card--hero
      .bc-panel.bc-panel--lined
        .bc-program-card__logo-backdrop{style: 'background-color: #F9386B;'}
          %img.bc-avatar.bc-avatar--xl.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/128x128', alt: 'logo'}
        .bc-program-card__body
          .bc-program-card__header
            %h4.bc-panel__title
              InVision
            %span.bc-badge.bc-badge--text.bc-badge--p5
              Demo
            .bc-program-card__byline
              %p
                %span.bc-icon.bc-icon--on-demand
                  On-Demand (Private) &mdash;
                  %span.bc-program-card__important
                    8 days remaining
          .bc-program-card__main
            %ul.bc-stats.bc-stats--inline
              %li.bc-stat.bc-program-card--tk-processing
                %a.bc-stat__title{href: '/'}
                  Processing
                %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
                  1,042
              %li.bc-stat.bc-program-card--tk-to-review
                %a.bc-stat__title{href: '/'}
                  To review
                %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
                  0
              %li.bc-stat.bc-program-card--tk-to-fix
                %a.bc-stat__title{href: '/'}
                  To fix
                %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
                  0
              %li.bc-stat.bc-program-card--tk-fixed
                %a.bc-stat__title{href: 'http://bugcrowd.test:3000/'}
                  Fixed
                %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
                  73
          .bc-program-card__footer.bc-panel__footer
            .bc-panel__footer-actions
              .bc-panel__footer-actions-left
                %a.bc-btn.bc-btn--small.bc-btn--secondary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--brief{href: '#', 'aria-label': 'View program brief'}
                  %span View program brief
              .bc-panel__footer-actions-right
                %button.bc-btn.bc-btn--small.bc-btn--negative
                  Revoke access

Section header

Guidance last updated: Sep 4, 2023

Rendered example
Variants:

--unlined

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.

Rendered example of Section header

Reward history

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Programs

Filter reward type:

Upcoming payments

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Haml markup example of Section header

%header.bc-section-header
  .bc-section-header__heading
    %h1.bc-h1 Reward history
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore.
  .bc-section-header__actions
    .bc-inline-control-group
      %button.bc-btn
        Export PDF
      %button.bc-btn.bc-btn--secondary
        Export CSV

%header.bc-section-header
  .bc-section-header__heading
    %h3.bc-h3 Programs
  .bc-section-header__actions
    %label.bc-label{for: 'section-header_program-reward-filter', class: 'bc-helper-sronly'}
      Filter reward type:
    .bc-dropdown
      %select{id: 'section-header_program-reward-filter', class: 'bc-dropdown__select'}
        %option{value: '1'}
          Newest
        %option{value: '2'}
          Reward amount
        %option{value: '3'}
          Alphabetical

%header.bc-section-header
  .bc-section-header__heading
    %h5.bc-h5 Upcoming payments
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore.

Variants

`--unlined` variant

Rendered example of Section header

Participating researchers

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Participating researchers

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Participating researchers

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Haml markup example of Section header `--unlined`

%header.bc-section-header.bc-section-header--unlined
  .bc-section-header__heading
    %h1.bc-h1 Participating researchers
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore.
  .bc-section-header__actions
    .bc-inline-control-group
      %button.bc-btn
        Export PDF
      %button.bc-btn.bc-btn--secondary
        Export CSV

%header.bc-section-header.bc-section-header--unlined
  .bc-section-header__heading
    %h3.bc-h3 Participating researchers
    %p
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco.
  .bc-section-header__actions
    .bc-inline-control-group.bc-inline-control-group--left
      %button.bc-btn.bc-btn--small
        Weekly
      %button.bc-btn.bc-btn--small
        Monthly
      %button.bc-btn.bc-btn--small.bc-btn--active
        Quarterly
      %button.bc-btn.bc-btn--small
        Yearly

%header.bc-section-header.bc-section-header--unlined
  .bc-section-header__heading
    %h5.bc-h5 Participating researchers
    %p
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore.

Submission card

Guidance last updated: Sep 4, 2023

Rendered example
Variants:

--tk

Cards, primarily for displaying Submission data.

Use to group submission details into a clickable 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.

Dependencies

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

Rendered example of Submission card

Haml markup example of Submission card

%ul.bc-panels
  %li.bc-submission-card
    %a.bc-panel.bc-panel--interactive{href: '/', 'aria-labelledby': 'title-id-3861c017c962e29203b869aa35f83bc8'}
      .bc-submission-card__main
        %h3.bc-submission-card__title{id: 'title-id-3861c017c962e29203b869aa35f83bc8'}
          Programming the port won't do anything, we need to back up the
          redundant RSS capacitor!
        %p.bc-submission-card__meta
          %span
            Bugcrowd Ongoing
          %span
            Created on 10/05/2017
        %div
          %span.bc-badge.bc-badge--p1.bc-badge--unconfirmed
            P1
          %span.bc-badge.bc-badge--new.bc-badge--text
            New
      .bc-submission-card__footer
        %div
          %span.bc-reward.bc-reward--blankstate
            Still being assessed
        %span.bc-submission-card__notifications
          Comments
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            0
  %li.bc-submission-card
    %a.bc-panel.bc-panel--interactive{href: '/', 'aria-labelledby': 'title-id-e10bb00a074416d61be0f30c1f5017cc'}
      .bc-submission-card__main
        %h3.bc-submission-card__title{id: 'title-id-e10bb00a074416d61be0f30c1f5017cc'}
          We need to back up the digital JBOD microchip!
        %p.bc-submission-card__meta
          %span
            Bugcrowd Secret
          %span
            Created on 10/05/2017
          %span
            Updated 8 minutes ago
        %div
          %span.bc-badge.bc-badge--p2
            P2
          %span.bc-badge.bc-badge--duplicate.bc-badge--text
            Duplicate
      .bc-submission-card__footer
        %div
          %span.bc-reward.bc-reward--none
            $0
          %span.bc-reward.bc-reward--points
            10 points
        %span.bc-submission-card__notifications
          Comments
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            11
  %li.bc-submission-card
    %a.bc-panel.bc-panel--interactive{href: '/', 'aria-labelledby': 'title-id-54478465ef3fd1c4f32298f413051cb5'}
      .bc-submission-card__main
        %h3.bc-submission-card__title{id: 'title-id-54478465ef3fd1c4f32298f413051cb5'}
          We need to synthesize the wireless CSS pixel!
        %p.bc-submission-card__meta
          %span
            Bugcrowd On-demand
          %span
            Created on 08/30/2017
          %span
            Updated on 05/10/2018
        %div
          %span.bc-badge.bc-badge--p1
            P1
          %span.bc-badge.bc-badge--resolved.bc-badge--text
            Resolved
      .bc-submission-card__footer
        %div
          %span.bc-reward
            $1,900
          %span.bc-reward.bc-reward--points
            20 points
        %span.bc-submission-card__notifications
          Comments
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            4
  %li.bc-submission-card
    %a.bc-panel.bc-panel--interactive{href: '/', 'aria-labelledby': 'title-id-9600cdcba1120ee65dc5259f86b73a99'}
      .bc-submission-card__main
        %h3.bc-submission-card__title{id: 'title-id-9600cdcba1120ee65dc5259f86b73a99'}
          Compressing the transmitter won’t do anything, we need to calculate
          the back-end HDD interface and then manipulate the ROM strings to
          get an overflow!
        %p.bc-submission-card__meta
          %span
            Bugcrowd Hack Me
          %span
            Created on 08/30/2017
          %span
            Updated on 05/10/2018
        %div
          %span.bc-badge.bc-badge--p5
            P5
          %span.bc-badge.bc-badge--outofscope.bc-badge--text
            Out of scope
      .bc-submission-card__footer
        %div
          %span.bc-reward.bc-reward--none
            $0
          %span.bc-reward.bc-reward--points.bc-reward--negative
            &minus;4 points
        %span.bc-submission-card__notifications
          Comments
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            3
  %li.bc-submission-card
    %a.bc-panel.bc-panel--interactive{href: '/', 'aria-labelledby': 'title-id-ff4c00d914f549e7d487e61399907e6c'}
      .bc-submission-card__main
        %h3.bc-submission-card__title{id: 'title-id-ff4c00d914f549e7d487e61399907e6c'}
          Try to program the XML pixel, maybe it will override the bluetooth
          firewall
        %p.bc-submission-card__meta
          %span
            Bugcrowd Ongoing
          %span
            Created on 9/28/2017
          %span
            Updated 4 days ago
        %div
          %span.bc-badge.bc-badge--p4.bc-badge--unconfirmed
            P4
          %span.bc-badge.bc-badge--triaged.bc-badge--text
            Triaged
      .bc-submission-card__footer
        %div
          %span.bc-reward.bc-reward--blankstate
            Still being assessed
        %span.bc-submission-card__notifications
          Comments
          %span.bc-badge.bc-badge--counter.bc-badge--counter-muted
            14

Variants

`--tk` variant

Rendered example of Submission card

Programming the port won’t do anything, we need to back up the redundant RSS capacitor!

18 hours ago ch1ckenw1ngs 100%

P1 New

1 Blocker created
We need to back up the digital JBOD microchip!

About a week ago tommedhurst 71.2%

Compressing the transmitter won’t do anythin…

P2 Won’t fix Duplicate

11 Blocker resolved
We need to synthesize the wireless CSS pixel!

08/30/2017 faykus 49.8%

P1 Resolved

4
Compressing the transmitter won’t do anything, we need to calculate the back-end HDD interface and then manipulate the ROM strings to get an overflow!

08/30/2017 ch1ckenw1ngs 84.1%

P5 Out of scope

3
Try to program the XML pixel, maybe it will override the bluetooth firewall

9/28/2017 tommedhurst 99.8%

P4 Triaged

14

Haml markup example of Submission card `--tk`

.row
  .col-xs-12.col-md-5.col-lg-4
    %ul.bc-panels
      %li.bc-submission-card.bc-submission-card--tk
        .bc-panel.bc-panel--interactive{role: 'link', tabindex: '0', onclick: '', onkeydown: '', 'aria-labelledby': 'title-id-0da12d78a0c3a46ba0341ce17bc76cc0'}
          .bc-submission-card__main
            %h3.bc-submission-card__title{id: 'title-id-0da12d78a0c3a46ba0341ce17bc76cc0'}
              Programming the port won’t do anything, we need to back up the
              redundant RSS capacitor!
            .bc-submission-card__meta
              %span
                18 hours ago
              %span
                ch1ckenw1ngs
              %span
                100%
            .bc-submission-card__footer
              .bc-submission-card__props
                .bc-submission-card__state
                  %div
                    %span.bc-badge.bc-badge--p1.bc-badge--unconfirmed
                      P1
                    %span.bc-badge.bc-badge--new.bc-badge--text
                      New
              .bc-submission-card__icons
                %span.bc-badge.bc-badge--counter
                  1
                %span.bc-icon.bc-icon--blocker-created.bc-submission-card__blocker
                  %span Blocker created          
      %li.bc-submission-card.bc-submission-card--tk.bc-submission-card--tk-selected
        .bc-panel.bc-panel--interactive{role: 'link', tabindex: '0', onclick: '', onkeydown: '', 'aria-labelledby': 'title-id-3e784b86099c6640e383613fbe3a4b4e'}
          .bc-submission-card__main
            %h3.bc-submission-card__title{id: 'title-id-3e784b86099c6640e383613fbe3a4b4e'}
              We need to back up the digital JBOD microchip!
            .bc-submission-card__meta
              %span
                About a week ago
              %span
                tommedhurst
              %span
                71.2%
            .bc-submission-card__dupe
              %a.bc-icon.bc-icon--duplicate{href: '#'}
                Compressing the transmitter won’t do anythin&hellip;
            .bc-submission-card__footer
              .bc-submission-card__props
                .bc-submission-card__state
                  %div
                    %span.bc-badge.bc-badge--p2
                      P2
                    %span.bc-badge.bc-badge--wontfix.bc-badge--text
                      Won’t fix
                    %span.bc-badge.bc-badge--duplicate.bc-badge--text
                      Duplicate
              .bc-submission-card__icons
                %span.bc-badge.bc-badge--counter
                  11
                %span.bc-icon.bc-icon--blocker-resolved.bc-submission-card__blocker
                  %span Blocker resolved
      %li.bc-submission-card.bc-submission-card--tk
        .bc-panel.bc-panel--interactive{role: 'link', tabindex: '0', onclick: '', onkeydown: '', 'aria-labelledby': 'title-id-182a4df2eed3fe18647f40c7b9203c8f'}
          .bc-submission-card__main
            %h3.bc-submission-card__title{id: 'title-id-182a4df2eed3fe18647f40c7b9203c8f'}
              We need to synthesize the wireless CSS pixel!
            .bc-submission-card__meta
              %span
                08/30/2017
              %span
                faykus
              %span
                49.8%
            .bc-submission-card__footer
              %div
                %span.bc-badge.bc-badge--p1
                  P1
                %span.bc-badge.bc-badge--resolved.bc-badge--text
                  Resolved
              %div
                %span.bc-badge.bc-badge--counter
                  4
      %li.bc-submission-card.bc-submission-card--tk
        .bc-panel.bc-panel--interactive{role: 'link', tabindex: '0', onclick: '', onkeydown: '', 'aria-labelledby': 'title-id-bc3875ad67b03af6989a43afbe4c7ff2'}
          .bc-submission-card__main
            %h3.bc-submission-card__title{id: 'title-id-bc3875ad67b03af6989a43afbe4c7ff2'}
              Compressing the transmitter won’t do anything, we need to calculate
              the back-end HDD interface and then manipulate the ROM strings to
              get an overflow!
            .bc-submission-card__meta
              %span
                08/30/2017
              %span
                ch1ckenw1ngs
              %span
                84.1%
            .bc-submission-card__footer
              %div
                %span.bc-badge.bc-badge--p5
                  P5
                %span.bc-badge.bc-badge--outofscope.bc-badge--text
                  Out of scope
              %div
                %span.bc-badge.bc-badge--counter
                  3
      %li.bc-submission-card.bc-submission-card--tk
        .bc-panel.bc-panel--interactive{role: 'link', tabindex: '0', onclick: '', onkeydown: '', 'aria-labelledby': 'title-id-b4d1747d9976dd6cd94dbac011884b64'}
          .bc-submission-card__main
            %h3.bc-submission-card__title{id: 'title-id-b4d1747d9976dd6cd94dbac011884b64'}
              Try to program the XML pixel, maybe it will override the bluetooth
              firewall
            .bc-submission-card__meta
              %span
                9/28/2017
              %span
                tommedhurst
              %span
                99.8%
            .bc-submission-card__footer
              %div
                %span.bc-badge.bc-badge--p4.bc-badge--unconfirmed
                  P4
                %span.bc-badge.bc-badge--triaged.bc-badge--text
                  Triaged
              %div
                %span.bc-badge.bc-badge--counter
                  14

Userblock

Guidance last updated: Sep 4, 2023

Rendered example

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 features

__title class for the primary data point (usually the user’s name)
__meta optional class for additional <small> data points
__actions optional class for call-to-action functions
.bc-userblocks plural container class for multiple userblocks.

.bc-userblock vertically centers its contents, therefore it is up to implementers to make sure the size of .bc-avatar aligns well with the content.

Userblock usage

Userblocks within data tables aligns avatars with titles. Avatars are aligned to the top of the block when additional data points are added.

Data-table support: Do not use –lg/–xl userblock variants in bc-table.

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

Rendered example of Userblock

Userblocks (list)

DarkieDuck
RebeccaPurple
86.7% Estonia
deleted_user(0001) (deactivated)
Removed from program
Mongo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae non provident minima! Fugiat pariatur debitis ea officia perferendis dolor rerum veritatis aspernatur, delectus blanditiis tempore sint incidunt rem quas in.
86.7% Congo
ID verified Background-checked

Singular userblock, in --xl

Mongo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

86.7% Congo

ID verified Background-checked

Userblocks in a panel

DarkieDuck
56.8% Australia

Public researcher profile
Turn this setting On Off
- Activity on subscribed submissions
  Turn this setting On Off
- Team members @mention me
  Turn this setting On Off
- I’m assigned to a submission
  Turn this setting On Off
- Receive sporadic spiders
- Someone writes a team note or a researcher replies
  
  Web Email
- Receive sporadic ponies
  
  Off On

Userblocks in a data table

Researcher	Valid submissions	Total submissions	Last submitted
DarkieDuck 56.8% Costa Rica	18	20	7 months ago
arcwhite 86.3% Australia	1000	1337	2 weeks ago
caseyjohnellis 56.8% Australia	90	100	3 hours ago
Mongo 86.3% Congo	95	100	5 months ago

Haml markup example of Userblock

%span.bc-h5 Userblocks (list)

%ul.bc-userblocks
  %li.bc-userblock
    %img.bc-avatar.bc-avatar--sm.bc-avatar{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
    .bc-userblock__main
      %span.bc-userblock__title
        DarkieDuck
    .bc-userblock__actions
      %button.bc-btn.bc-btn--small.bc-btn--secondary
        Add
      %button.bc-btn.bc-btn--small.bc-btn--tertiary
        Remove
  %li.bc-userblock
    %img.bc-avatar.bc-avatar{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
    .bc-userblock__main
      %span.bc-userblock__title
        RebeccaPurple
      .bc-userblock__meta
        %small 86.7%
        %small Estonia
    .bc-userblock__actions
      %button.bc-btn.bc-btn--small.bc-btn--secondary
        Add
      %button.bc-btn.bc-btn--small.bc-btn--tertiary
        Remove
  %li.bc-userblock.bc-userblock--lg
    %img.bc-avatar.bc-avatar--lg{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
    .bc-userblock__main
      %span.bc-userblock__title
        deleted_user(0001) (deactivated)
      .bc-userblock__meta
        %small
          Removed from program
    .bc-userblock__actions
      %button.bc-btn.bc-btn--secondary
        Add
      %button.bc-btn.bc-btn--tertiary
        Remove
  %li.bc-userblock.bc-userblock--xl
    %img.bc-avatar.bc-avatar--xl{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
    .bc-userblock__main
      %h2.bc-userblock__title
        Mongo
      .bc-userblock__meta
        %p
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae non
          provident minima! Fugiat pariatur debitis ea officia perferendis dolor
          rerum veritatis aspernatur, delectus blanditiis tempore sint incidunt
          rem quas in.
        %small 86.7%
        %small Congo
      %span.bc-icon.bc-icon--success
        ID verified
      %span.bc-icon.bc-icon--success
        Background-checked

%span.bc-h5 Singular userblock, in --xl

.bc-userblock.bc-userblock--xl
  %img.bc-avatar.bc-avatar--xl{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
  .bc-userblock__main
    %h2.bc-userblock__title
      Mongo
    .bc-userblock__meta
      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
      %small 86.7%
      %small Congo
    %span.bc-icon.bc-icon--success
      ID verified
    %span.bc-icon.bc-icon--success
      Background-checked

%span.bc-h5 Userblocks in a panel

.row
  .col-xs-12.col-md-8
    %ul.bc-userblocks
      %li.bc-panel.bc-panel--shadow.bc-panel--action
        .bc-panel__header
          .bc-userblock
            %img.bc-avatar.bc-avatar--lg{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
            .bc-userblock__main
              %span.bc-userblock__title
                DarkieDuck
              .bc-userblock__meta
                %small 56.8%
                %small Australia
            .bc-userblock__actions
              .bc-switch-input.bc-switch-input--justify
                %label.bc-switch-input__inline-label{for: 'switch-block'}
                  %span.bc-label
                    Public researcher profile
                  .bc-switch-input__toggle
                    %input.bc-switch-input__switch{name: 'switch', type: 'checkbox', id: 'switch-block'}
                    %span.bc-switch-input__switch-text.bc-switch-input__switch-text--hidden
                      Turn this setting
                      %span.bc-switch-input__on On
                      %span.bc-switch-input__off Off
        .bc-panel__main
          %ul.bc-setting-list
            %li.bc-setting-list__item
              .bc-switch-input.bc-switch-input--justify
                %label.bc-switch-input__inline-label{for: 'userblock__switch-block-eg1'}
                  %span.bc-label
                    Activity on
                    %strong subscribed
                    submissions
                  .bc-switch-input__toggle
                    %input.bc-switch-input__switch(checked){name: 'switch', type: 'checkbox', id: 'userblock__switch-block-eg1'}
                    %span.bc-switch-input__switch-text
                      Turn this setting
                      %span.bc-switch-input__on On
                      %span.bc-switch-input__off Off
            %li.bc-setting-list__item
              .bc-switch-input.bc-switch-input--justify
                %label.bc-switch-input__inline-label{for: 'userblock__switch-block-eg2'}
                  %span.bc-label
                    Team members
                    %strong @mention
                    me
                  .bc-switch-input__toggle
                    %input.bc-switch-input__switch{name: 'switch', type: 'checkbox', id: 'userblock__switch-block-eg2'}
                    %span.bc-switch-input__switch-text
                      Turn this setting
                      %span.bc-switch-input__on On
                      %span.bc-switch-input__off Off
            %li.bc-setting-list__item
              .bc-switch-input.bc-switch-input--justify
                %label.bc-switch-input__inline-label{for: 'userblock__switch-block-eg3'}
                  %span.bc-label
                    I’m
                    %strong assigned
                    to a submission
                  .bc-switch-input__toggle
                    %input.bc-switch-input__switch(checked){name: 'switch', type: 'checkbox', id: 'userblock__switch-block-eg3'}
                    %span.bc-switch-input__switch-text
                      Turn this setting
                      %span.bc-switch-input__on On
                      %span.bc-switch-input__off Off
            %li.bc-setting-list__item
              %label.bc-setting-list__control-input-label{for: 'userblock__checkbox-spiders'}
                .bc-setting-list__item-text
                  %span.bc-label
                    Receive sporadic
                    %strong spiders
                .bc-setting-list__item-controls
                  %span.bc-control-input.bc-control-input--unlabelled
                    %input.bc-control-input__input{name: 'userblock__checkbox-spiders', type: 'checkbox', id: 'userblock__checkbox-spiders', 'aria-label': 'userblock__checkbox-spiders'}
                      %span.bc-control-input__label-text
            %li.bc-setting-list__item{role: 'group', 'aria-describedby': 'userblock__setting__team-or-researcher-notification-types'}
              .bc-setting-list__item-text{id: 'userblock__setting__team-or-researcher-notification-types'}
                %span.bc-label
                  Someone writes a
                  %strong team note
                  or a researcher
                  %strong replies
              .bc-setting-list__item-controls
                %label.bc-control-input
                  %input.bc-control-input__input(checked){name: 'checkbox-web', type: 'checkbox', 'aria-describedby': 'userblock__setting__team-or-researcher-notification-types'}
                  %span.bc-control-input__label-text
                    Web
                %label.bc-control-input
                  %input.bc-control-input__input{name: 'checkbox-email', type: 'checkbox', 'aria-describedby': 'userblock__setting__team-or-researcher-notification-types'}
                  %span.bc-control-input__label-text
                    Email
            %li.bc-setting-list__item{role: 'group', 'aria-describedby': 'userblock__setting__ponies'}
              .bc-setting-list__item-text{id: 'userblock__setting__ponies'}
                %span.bc-label
                  Receive sporadic
                  %strong ponies
              .bc-setting-list__item-controls
                %label.bc-control-input
                  %input.bc-control-input__input{name: 'sporadic-ponies__off', type: 'radio', 'aria-describedby': 'userblock__setting__ponies'}
                  %span.bc-control-input__label-text
                    Off
                %label.bc-control-input
                  %input.bc-control-input__input(checked){name: 'sporadic-ponies__on', type: 'radio', 'aria-describedby': 'userblock__setting__ponies'}
                  %span.bc-control-input__label-text
                    On

%span.bc-h5 Userblocks in a data table

.bc-table.bc-table--hover
  %table
    %thead
      %tr
        %th Researcher
        %th Valid submissions
        %th Total submissions
        %th Last submitted
        %th Credentials
    %tbody
      %tr
        %td{data: { label: 'researcher' }}
          .bc-userblock
            %img.bc-avatar{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
            .bc-userblock__main
              %span.bc-userblock__title
                DarkieDuck
              .bc-userblock__meta
                %small 56.8%
                %small Costa Rica
        %td{data: { label: 'Valid submissions' }} 18
        %td{data: { label: 'Total submissions' }} 20
        %td{data: { label: 'Last submitted' }} 7 months ago
        %td{data: { label: 'Credentials' }}
          %button.bc-btn.bc-btn--small.bc-btn--secondary
            Assign
      %tr
        %td{data: { label: 'researcher' }}
          .bc-userblock
            %img.bc-avatar{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
            .bc-userblock__main
              %span.bc-userblock__title
                arcwhite
              .bc-userblock__meta
                %small 86.3%
                %small Australia
        %td{data: { label: 'Valid submissions' }} 1000
        %td{data: { label: 'Total submissions' }} 1337
        %td{data: { label: 'Last submitted' }} 2 weeks ago
        %td{data: { label: 'Credentials' }}
          %button.bc-btn.bc-btn--small.bc-btn--secondary
            Assign
      %tr
        %td{data: { label: 'researcher' }}
          .bc-userblock
            %img.bc-avatar{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
            .bc-userblock__main
              %span.bc-userblock__title
                caseyjohnellis
              .bc-userblock__meta
                %small 56.8%
                %small Australia
        %td{data: { label: 'Valid submissions' }} 90
        %td{data: { label: 'Total submissions' }} 100
        %td{data: { label: 'Last submitted' }} 3 hours ago
        %td{data: { label: 'Credentials' }}
          %button.bc-btn.bc-btn--small.bc-btn--secondary
            Assign
      %tr
        %td{data: { label: 'researcher' }}
          .bc-userblock
            %img.bc-avatar{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}
            .bc-userblock__main
              %span.bc-userblock__title
                Mongo
              .bc-userblock__meta
                %small 86.3%
                %small Congo
        %td{data: { label: 'Valid submissions' }} 95
        %td{data: { label: 'Total submissions' }} 100
        %td{data: { label: 'Last submitted' }} 5 months ago
        %td{data: { label: 'Credentials' }}
          %button.bc-btn.bc-btn--small.bc-btn--secondary
            Assign

Usage

Dependencies

Rendered example of AVM banner

Haml markup example of AVM banner

Rendered example of Blankstate

No one has been admitted yet

Haml markup example of Blankstate

Variants

--sm variant

Rendered example of Blankstate

Inbox empty

Haml markup example of Blankstate --sm

--lg variant

Rendered example of Blankstate

We’re waiting for your submission to be marked as valid

Haml markup example of Blankstate --lg

--nobg variant

Rendered example of Blankstate

This is a blank state

Haml markup example of Blankstate --nobg

Inline control group features

Inline control responsive styles

Inline control variants

Inline control states

Rendered example of Inline control group

Haml markup example of Inline control group

Variants

--block variant

Rendered example of Inline control group

Haml markup example of Inline control group --block

--left variant

Rendered example of Inline control group

Haml markup example of Inline control group --left

Code examples

Usage

Dependencies

Rendered example of Login

Log in to Bugcrowd

Haml markup example of Login

Variants

--portal-signup variant

Rendered example of Login

Become a researcher

Haml markup example of Login --portal-signup

--tracker-signup variant

Rendered example of Login

Sign up to get access to Crowdcontrol

Haml markup example of Login --tracker-signup

--tracker-signin variant

Rendered example of Login

Log in to Crowdcontrol

Haml markup example of Login --tracker-signin

Dropdown menu panel React example

bc-element/BcDropdownMenu

Dropdown menu panel dependencies

Program card usage

Program card progressive enhancement

Program card variants

Program card dependencies

Rendered example of Program card

Haml markup example of Program card

Variants

--tk variant

Rendered example of Program card

Haml markup example of Program card --tk

--inactive variant

Rendered example of Program card

Haml markup example of Program card --inactive

--hero variant

Rendered example of Program card

Atlassian

InVision

Haml markup example of Program card --hero

Rendered example of Section header

Haml markup example of Section header

Variants

--unlined variant

Rendered example of Section header

Haml markup example of Section header --unlined

Usage

`--sm` variant

Haml markup example of Blankstate `--sm`

`--lg` variant

Haml markup example of Blankstate `--lg`

`--nobg` variant

Haml markup example of Blankstate `--nobg`

`--block` variant

Haml markup example of Inline control group `--block`

`--left` variant

Haml markup example of Inline control group `--left`

`--portal-signup` variant

Haml markup example of Login `--portal-signup`

`--tracker-signup` variant

Haml markup example of Login `--tracker-signup`

`--tracker-signin` variant

Haml markup example of Login `--tracker-signin`

`--tk` variant

Haml markup example of Program card `--tk`

`--inactive` variant

Haml markup example of Program card `--inactive`

`--hero` variant

Haml markup example of Program card `--hero`

`--unlined` variant

Haml markup example of Section header `--unlined`

`--tk` variant

Haml markup example of Submission card `--tk`