Bugcrowd design system: Patterns

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

AVM banner

Guidance last updated: Mar 27, 2023

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

Rendered example of AVM banner

Unlimited support access expires soon: access to all programs will expire in 3 hours.

Haml markup example of AVM banner 

.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
GitHub: patterns/_avm-banner.scss

Blankstate

Guidance last updated: Mar 27, 2023

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
GitHub: patterns/_blankstate.scss

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.
GitHub: patterns/_blankstate.scss

--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
GitHub: patterns/_blankstate.scss

--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
GitHub: patterns/_blankstate.scss

Inline control group

Guidance last updated: Mar 27, 2023

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
  • --duo: optimised variant for when there are just two buttons
  • --left: aligns the text of buttons to the left at <sm

The --duo variant is to be deprecated. Consider using a Segmented control instead.

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

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
GitHub: patterns/_inline-control-group.scss

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
GitHub: patterns/_inline-control-group.scss

--duo variant

Rendered example of Inline control group
Select an assignee
Haml markup example of Inline control group --duo 
.bc-fieldset
  .bc-fieldset__legend
    Select an assignee
  .bc-inline-control-group.bc-inline-control-group--duo
    %label.bc-control-input
      %input.bc-control-input__input{name: 'radio-ctrl-grp-eg--duo', type: 'radio'}
      %span.bc-btn
        Assign myself
    %label.bc-control-input
      %input.bc-control-input__input{name: 'radio-ctrl-grp-eg--duo', type: 'radio'}
      %span.bc-btn
        Assign someone else
GitHub: patterns/_inline-control-group.scss

--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
GitHub: patterns/_inline-control-group.scss

Login

Guidance last updated: Mar 27, 2023

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

Rendered example of Login

Haml markup example of Login 

.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
GitHub: patterns/_login.scss

Variants

--portal-signup variant

Rendered example of Login
Haml markup example of Login --portal-signup 
.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
GitHub: patterns/_login.scss

--tracker-signup variant

Rendered example of Login
Haml markup example of Login --tracker-signup 
.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
GitHub: patterns/_login.scss

--tracker-signin variant

Rendered example of Login
Haml markup example of Login --tracker-signin 
.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?
GitHub: patterns/_login.scss
Guidance last updated: Mar 27, 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: Mar 27, 2023

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
    • start of program — 25 spots left!

  • You Need a Budget (YNAB)

    Joinable

    YNAB’s Responsible Disclosure Program

    • Points per vulnerability
    • 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: 'http://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: 'http://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: 'http://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: 'http://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
GitHub: patterns/_program-card.scss

Variants

--tk variant

Rendered example of Program card
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: 'http://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: 'http://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: 'http://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: 'http://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
GitHub: patterns/_program-card.scss

--inactive variant

Rendered example of Program card
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: 'http://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: 'http://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
GitHub: patterns/_program-card.scss

--hero variant

Rendered example of Program card

Atlassian

New

Collaboration tools for teams of all sizes.

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

InVision

Demo

On-Demand (Private) — 8 days remaining

View program brief
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: 'http://via.placeholder.com/128x128', alt: 'logo'}
        .bc-program-card--hero__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: 'http://via.placeholder.com/128x128', alt: 'logo'}
        .bc-program-card--hero__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
GitHub: patterns/_program-card.scss

Section header

Guidance last updated: Mar 27, 2023

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

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.bc-inline-control-group--duo
      %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.
GitHub: patterns/_section-header.scss

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.bc-inline-control-group--duo
      %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.
GitHub: patterns/_section-header.scss

Submission card

Guidance last updated: Mar 27, 2023

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
GitHub: patterns/_submission-card.scss

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
GitHub: patterns/_submission-card.scss

Userblock

Guidance last updated: Mar 27, 2023

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)
  • User-name avatar
    DarkieDuck
  • User-name avatar
    RebeccaPurple
    86.7% Estonia
  • User-name avatar
    deleted_user(0001) (deactivated)
    Removed from program
  • User-name avatar

    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
User-name avatar

Mongo

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

86.7% Congo
ID verified Background-checked
Userblocks in a panel
  • User-name avatar
    DarkieDuck
    56.8% Australia
    • Someone writes a team note or a researcher replies
    • Receive sporadic ponies
Userblocks in a data table
Researcher Valid submissions Total submissions Last submitted Credentials
User-name avatar
DarkieDuck
56.8% Costa Rica
18 20 7 months ago
User-name avatar
arcwhite
86.3% Australia
1000 1337 2 weeks ago
User-name avatar
caseyjohnellis
56.8% Australia
90 100 3 hours ago
User-name avatar
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
GitHub: patterns/_userblock.scss