Bugcrowd design system: Components

Components are Bugcrowd’s common design and UI elements.

Avatars

Guidance last updated: Feb 19, 2019

Avatars are used to show a thumbnail representation of a user or program.

Avatars should visually clarify the user or organization being represented in the app. Add .bc-avatar to any <img> element or any block/inline-block element with a background-image to make it an avatar.

Avatars best practices

Avatars should be one of 4 sizes:

  • --sm (24 × 24px): use when the medium size is too big for the layout, or when the avatar has less importance
  • The default size (40 x 40px)
  • --lg (72 × 72px): use when multiple avatars are showcased on a page (eg programs list)
  • --xl (128 × 128px): use when an avatar is a single focal point on the page (eg researcher dashboard).

Other stylistic variants:

  • --inline: used to display avatars as an inline component
  • --square: while most avatars are circular, a --square variant is provided for program-related avatars
  • --grouped: used superimpose a smaller, ‘child’ avatar to the top right of the main one.

Avatars accessibility guidelines

Any time an avatar is used to communicate a person or organization/program, it’s important to also include ‘alt text’, unless the name of the user/program is displayed right next to the avatar in text.

For example:

  • alt="Person’s name" if the avatar represents a user
  • alt="Program name" if the avatar represents a program or organization.

Related components

.bc-userblock (Pattern)

Rendered example of Avatars

Default avatar as an img

User-name avatar

Default avatar as a background-image

Haml markup example of Avatars

%p
  Default avatar as an
  %code img
%img.bc-avatar{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}

%p
  Default avatar as a
  %code background-image
.bc-avatar{style: "background-image: url('/assets/profile-tmp.png')"}

Variants

--xs variant

Rendered example of Avatars
User-name avatar
Haml markup example of Avatars --xs
%img.bc-avatar.bc-avatar--xs{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}

--sm variant

Rendered example of Avatars
User-name avatar
Haml markup example of Avatars --sm
%img.bc-avatar.bc-avatar--sm{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}

--lg variant

Rendered example of Avatars
User-name avatar
Haml markup example of Avatars --lg
%img.bc-avatar.bc-avatar--lg{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}

--xl variant

Rendered example of Avatars
User-name avatar
Haml markup example of Avatars --xl
%img.bc-avatar.bc-avatar--xl{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}

--inline variant

Rendered example of Avatars
User-name avatarUser name
Haml markup example of Avatars --inline
%img.bc-avatar.bc-avatar--inline{src: '/assets/profile-tmp.png', alt: 'User-name avatar'} User name

--square variant

Rendered example of Avatars
User-name avatar
Haml markup example of Avatars --square
%img.bc-avatar.bc-avatar--square{src: '/assets/profile-tmp.png', alt: 'User-name avatar'}

--grouped variant

Rendered example of Avatars
Primary avatar Secondary avatar
Primary avatar Secondary avatar
Primary avatar Secondary avatar
Primary avatar Secondary avatar
Haml markup example of Avatars --grouped
.bc-avatar.bc-avatar--grouped.bc-avatar--inline
  %img.bc-avatar{src: '/assets/profile-tmp--generated.png', alt: 'Primary avatar'}
  %img.bc-avatar.bc-avatar--grouped__child{src: '/assets/profile-tmp.png', alt: 'Secondary avatar'}

.bc-avatar.bc-avatar--grouped.bc-avatar--sm.bc-avatar--inline
  %img.bc-avatar.bc-avatar--sm{src: '/assets/profile-tmp--generated.png', alt: 'Primary avatar'}
  %img.bc-avatar.bc-avatar--grouped__child{src: '/assets/profile-tmp.png', alt: 'Secondary avatar'}

.bc-avatar.bc-avatar--grouped.bc-avatar--lg.bc-avatar--inline
  %img.bc-avatar.bc-avatar--lg{src: '/assets/profile-tmp--generated.png', alt: 'Primary avatar'}
  %img.bc-avatar.bc-avatar--grouped__child{src: '/assets/profile-tmp.png', alt: 'Secondary avatar'}

.bc-avatar.bc-avatar--grouped.bc-avatar--inline
  %img.bc-avatar.bc-avatar--square{src: '/assets/profile-tmp--generated.png', alt: 'Primary avatar'}
  %img.bc-avatar.bc-avatar--square.bc-avatar--grouped__child{src: '/assets/profile-tmp.png', alt: 'Secondary avatar'}

Badges

Guidance last updated: Feb 27, 2019

Styles for submission states and priority assignment.

For brevity’s sake the variants have been compiled into one code block example.

Each grouping shows the sub-states (confirmed and unconfirmed). Note the ‘confirmed’ sub-state is the default.

Guidance on variants

  • --unconfirmed: with colored borders and a white background color
  • --text: for word strings (since the priority number badges are monospaced by default)
  • --text--upcased is for word strings that still need to be capitalised.
  • --dark: for when placing badges on a dark background (eg selected submission card state)
  • --success is for ‘tagging’ something as live or successful (eg verified researcher IDs or live, in-scope targets)
  • --failure is for ‘tagging’ something as failed

All the dark variants are grouped at the bottom of the example.

Adding text beside badges

There’s also a class for adding a text ‘label’ (description) for a badge via .bc-badge-label.

Rendered example of Badges

Priority pages

P0 Emergency

P0 Emergency

P1 Critical

P1 Critical

P2 High

P2 High

P3 Medium

P3 Medium

P4 Low

P4 Low

P5 Informational

P5 Informational

P6 Really?

P6 Really?

Submission states

New

Triaged

Resolved

Unresolved

Duplicate

Out of scope

Not reproducible

Won’t fix

Not applicable

Success badge

ID Verified Live

Failure badge

Failed Failure

Haml markup example of Badges

%h6.bc-h6 Priority pages

%p
  %span.bc-badge.bc-badge--p0.bc-badge--unconfirmed
    P0
  %span.bc-badge-label
    Emergency
%p
  %span.bc-badge.bc-badge--p0
    P0
  %span.bc-badge.bc-badge--p0.bc-badge--text
    Emergency

%p
  %span.bc-badge.bc-badge--p1.bc-badge--unconfirmed
    P1
  %span.bc-badge-label
    Critical
%p
  %span.bc-badge.bc-badge--p1
    P1
  %span.bc-badge.bc-badge--p1.bc-badge--text
    Critical


%p
  %span.bc-badge.bc-badge--p2.bc-badge--unconfirmed
    P2
  %span.bc-badge-label
    High
%p
  %span.bc-badge.bc-badge--p2
    P2
  %span.bc-badge.bc-badge--p2.bc-badge--text
    High


%p
  %span.bc-badge.bc-badge--p3.bc-badge--unconfirmed
    P3
  %span.bc-badge-label
    Medium
%p
  %span.bc-badge.bc-badge--p3
    P3
  %span.bc-badge.bc-badge--p3.bc-badge--text
    Medium

%p
  %span.bc-badge.bc-badge--p4.bc-badge--unconfirmed
    P4
  %span.bc-badge-label
    Low
%p
  %span.bc-badge.bc-badge--p4
    P4
  %span.bc-badge.bc-badge--p4.bc-badge--text
    Low

%p
  %span.bc-badge.bc-badge--p5.bc-badge--unconfirmed
    P5
  %span.bc-badge-label
    Informational
%p
  %span.bc-badge.bc-badge--p5
    P5
  %span.bc-badge.bc-badge--p5.bc-badge--text
    Informational

%p
  %span.bc-badge.bc-badge--p6.bc-badge--unconfirmed
    P6
  %span.bc-badge-label
    Really?
%p
  %span.bc-badge.bc-badge--p6
    P6
  %span.bc-badge.bc-badge--p6.bc-badge--text
    Really?

%h6.bc-h6 Submission states

%p
  %span.bc-badge.bc-badge--new.bc-badge--text
    New

%p
  %span.bc-badge.bc-badge--triaged.bc-badge--text
    Triaged

%p
  %span.bc-badge.bc-badge--resolved.bc-badge--text
    Resolved

%p
  %span.bc-badge.bc-badge--unresolved.bc-badge--text
    Unresolved

%p
  %span.bc-badge.bc-badge--duplicate.bc-badge--text
    Duplicate

%p
  %span.bc-badge.bc-badge--outofscope.bc-badge--text
    Out of scope

%p
  %span.bc-badge.bc-badge--notreproducible.bc-badge--text
    Not reproducible

%p
  %span.bc-badge.bc-badge--wontfix.bc-badge--text
    Won’t fix

%p
  %span.bc-badge.bc-badge--notapplicable.bc-badge--text
    Not applicable

%h6.bc-h6 Success badge

%p
  %span.bc-badge.bc-badge--success.bc-badge--text
    ID Verified
  %span.bc-badge.bc-badge--success.bc-badge--text.bc-badge--text--upcased
    Live

%h6.bc-h6 Failure badge

%p
  %span.bc-badge.bc-badge--failure.bc-badge--text
    Failed
  %span.bc-badge.bc-badge--failure.bc-badge--text.bc-badge--text--upcased
    Failure

Variants

--counter variant

Rendered example of Badges

4 Cats

237 Dogs

Haml markup example of Badges --counter
%p
  %span.bc-badge.bc-badge--counter
    4
  Cats


%p
  %span.bc-badge.bc-badge--counter.bc-badge--counter--muted
    237
  Dogs

--token variant

Rendered example of Badges

state:new program:hackme

Haml markup example of Badges --token
%p
  %span.bc-badge.bc-badge--token
    state:new
  %span.bc-badge.bc-badge--token
    program:hackme

--dark variant

Rendered example of Badges
Priority pages

P1 P2 P3 P4 P5

Submission states

New Triaged

Resolved Unresolved

Duplicate

Out of scope

Not reproducible

Won’t fix

Not applicable

Success (eg ‘live’) badge

Live

Failure badge

Failed

Dark token badges

state:new program:hackme

Haml markup example of Badges --dark
%h6.bc-h6 Priority pages

%p
  %span.bc-badge.bc-badge--p1.bc-badge--dark
    P1
  %span.bc-badge.bc-badge--p2.bc-badge--dark
    P2
  %span.bc-badge.bc-badge--p3.bc-badge--dark
    P3
  %span.bc-badge.bc-badge--p4.bc-badge--dark
    P4
  %span.bc-badge.bc-badge--p5.bc-badge--dark
    P5

%h6.bc-h6 Submission states

%p
  %span.bc-badge.bc-badge--new.bc-badge--text.bc-badge--dark
    New
  %span.bc-badge.bc-badge--triaged.bc-badge--text.bc-badge--dark
    Triaged

%p
  %span.bc-badge.bc-badge--resolved.bc-badge--text.bc-badge--dark
    Resolved
  %span.bc-badge.bc-badge--unresolved.bc-badge--text.bc-badge--dark
    Unresolved

%p
  %span.bc-badge.bc-badge--duplicate.bc-badge--text.bc-badge--dark
    Duplicate

%p
  %span.bc-badge.bc-badge--outofscope.bc-badge--text.bc-badge--dark
    Out of scope

%p
  %span.bc-badge.bc-badge--notreproducible.bc-badge--text.bc-badge--dark
    Not reproducible

%p
  %span.bc-badge.bc-badge--wontfix.bc-badge--text.bc-badge--dark
    Won’t fix

%p
  %span.bc-badge.bc-badge--notapplicable.bc-badge--text.bc-badge--dark
    Not applicable

%h6.bc-h6 Success (eg ‘live’) badge

%p
  %span.bc-badge.bc-badge--success.bc-badge--text.bc-badge--text--upcased.bc-badge--dark
    Live

%h6.bc-h6 Failure badge

%p
  %span.bc-badge.bc-badge--failure.bc-badge--text.bc-badge--text--upcased.bc-badge--dark
    Failed

%h6.bc-h6 Dark token badges

%p
  %span.bc-badge.bc-badge--token.bc-badge--dark
    state:new
  %span.bc-badge.bc-badge--token.bc-badge--dark
    program:hackme

Data tables

Guidance last updated: Sep 25, 2018

Responsive tables for displaying tabular data.

Use to group tabular data (eg listing users, financial information, etc.).

Data table responsive features

These tables are built to be responsive, breaking each row down int a block at small viewport sizes to avoid horizontal scrolling or forcing the page width out to extend past the grid container.

To achieve this at <md the table headings (th) are hidden, but re-inserted into each row’s block via data labels.

To ensure your table is responsive remember to add a corresponding data label for each th — this should be identical to the title.

Data table variants

The following stylistic variants are available:

  • --ui: resets the colors of links/anchors to black
  • --striped: adds zebra-striping to each even row
  • --small: lowers the text size of the entire table
  • --unruled: removes the border-bottom from each row
  • --bordered: wraps entire table inside a panel
  • --columns: adds vertical borders for each column and intended usage with the --bordered variant
  • --unresponsive: sets table to use fixed layout on all breakpoints (turns off default responsive behavior)
  • --sticky: position: sticky sets either the first td or all th cells to position: sticky once it reaches the top of the scroll area (depending on media breakpoint).

Using bc-table–unresponsive: This should only be used when table contains minimal data that will not overflow on the smallest breakpoint.

Using bc-table–sticky: This variant doesn’t yet support chaining with bc-table--unresponsive and only works in some browsers.

Data table cell variants

The following stylistic variants are available for formatting individual table cells and should be applied directly on each th and td.

  • .bc-table__th-abbr: sets text-transform to uppercase
  • .bc-table__cell-right: sets text-align to right.

Rendered example of Data tables

ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed

Haml markup example of Data tables

.bc-table
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

Variants

--small variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --small
.bc-table.bc-table--small
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--striped variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --striped
.bc-table.bc-table--striped
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--bordered variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --bordered
.bc-table.bc-table--bordered
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--columns variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --columns
.bc-table.bc-table--columns
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--hover variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --hover
.bc-table.bc-table--hover
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--ui variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --ui
.bc-table.bc-table--ui
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }}
          %a{href: '3'}
            arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }}
          %a{href: '3'}
            codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }}
          %a{href: '3'}
            caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }}
          %a{href: '3'}
            known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--unruled variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --unruled
.bc-table.bc-table--unruled
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--unresponsive variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --unresponsive
.bc-table.bc-table--unresponsive
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

--sticky variant

Rendered example of Data tables
ID Researcher Amount ($) Status
1 arcwhite 33,000 Completed
2 codesoda 31,000 Completed
3 caseyjohnellis 29,500 Completed
4 known_issue_import 28,900 Completed
Haml markup example of Data tables --sticky
.bc-table.bc-table--sticky
  %table
    %thead
      %tr
        %th.bc-table__th-abbr ID
        %th Researcher
        %th.bc-table__cell-right Amount ($)
        %th Status
    %tbody
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 1
        %td{data: { label: 'researcher' }} arcwhite
        %td.bc-table__cell-right{data: { label: 'amount' }} 33,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 2
        %td{data: { label: 'researcher' }} codesoda
        %td.bc-table__cell-right{data: { label: 'amount' }} 31,000
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 3
        %td{data: { label: 'researcher' }} caseyjohnellis
        %td.bc-table__cell-right{data: { label: 'amount' }} 29,500
        %td{data: { label: 'status' }} Completed
      %tr
        %td.bc-table__th-abbr{data: { label: 'id' }} 4
        %td{data: { label: 'researcher' }} known_issue_import
        %td.bc-table__cell-right{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed

Display type

Guidance last updated: Sep 21, 2017

Use these display type classes to arbitrarily size text at display sizes.

These classes scale up in font-size in relation to their class names; the bigger the number, the larger the font-size (to a cap of 10).

These classes can be used on inline elements like span since this class provides display: block.

Rendered example of Display type

h6 display type 1
h6 display type 2
h6 display type 3
h6 display type 4
h6 display type 5
h5 display type 6

h4 display type 7

h3 display type 8

h2 display type 9

h1 display type 10

span display type 1 span display type 2 span display type 3 span display type 4 span display type 5 span display type 6 span display type 7 span display type 8 span display type 9 span display type 10

Haml markup example of Display type

// display type on h1–h6
%h6.bc-display-type-1 h6 display type 1
%h6.bc-display-type-2 h6 display type 2
%h6.bc-display-type-3 h6 display type 3
%h6.bc-display-type-4 h6 display type 4
%h6.bc-display-type-5 h6 display type 5
%h5.bc-display-type-6 h5 display type 6
%h4.bc-display-type-7 h4 display type 7
%h3.bc-display-type-8 h3 display type 8
%h2.bc-display-type-9 h2 display type 9
%h1.bc-display-type-10 h1 display type 10

// display type on spans
%span.bc-display-type-1 span display type 1
%span.bc-display-type-2 span display type 2
%span.bc-display-type-3 span display type 3
%span.bc-display-type-4 span display type 4
%span.bc-display-type-5 span display type 5
%span.bc-display-type-6 span display type 6
%span.bc-display-type-7 span display type 7
%span.bc-display-type-8 span display type 8
%span.bc-display-type-9 span display type 9
%span.bc-display-type-10 span display type 10

Headings

Guidance last updated: Sep 21, 2017

Use these heading classes set text styles for h1 to h6.

Apply these to all headings, ideally with the corresponding class.

If you need to arbitrarily size headings, feel to use another class, or resort to the .bc-display-type classes.

Rendered example of Headings

heading handgloves 1

heading handgloves 2

heading handgloves 3

heading handgloves 4

heading handgloves 5
heading handgloves 6

Haml markup example of Headings

// headings on h1–h6
%h1.bc-h1 heading handgloves 1
%h2.bc-h2 heading handgloves 2
%h3.bc-h3 heading handgloves 3
%h4.bc-h4 heading handgloves 4
%h5.bc-h5 heading handgloves 5
%h6.bc-h6 heading handgloves 6

Hints

Guidance last updated: Jan 9, 2019

Hints are subdued text style used for secondary or tertiary text.

Use hints to style additional instructions or descriptive text in forms.

When adding descriptive text for a given element consider establishing a relationshiup between the element to the hint text using aria-describedby.

Apply to any other text elements as needed.

Rendered example of Hints

Become a researcher

Already have an account? Log in

Haml markup example of Hints

%h1.bc-h5
  Become a researcher
%span.bc-hint
  Already have an account?
  %a{href: "#"}
    Log in

Icon

Guidance last updated: Sep 17, 2018

A SVG icon mark displayed inline before or after some text.

The default icon used is a Bugcrowd logo (16×16 pixels) for noting programs managed by Bugcrowd and employee users in CrowdControl.

The bc-icon class can be applied directly to a link when necessary. Note though that link colors have been reset to the -secondary color.

Variant examples: Due to the number of variants, they have been grouped into a single markup example below.

Variants

The following variants are available:

  • --after: positioning variant to place the icon on the right of the string
  • --ongoing: infinity loop icon
  • --on-demand: lightning strike/flash icon
  • --markdown: markdown logo
  • --sso: authenticated with SSO icon
  • --duplicate: Submission duplicate icon
  • --info: informational message icon
  • --warning: warning message icon
  • --error: error message icon
  • --success: success message icon

Rendered example of Icon

Managed by Bugcrowd

Managed by Bugcrowd

On-Demand program

Markdown supported

Authenticated with SSO

SSRF in login.aspx

Heads up…

Careful…

XYZ cannot be undefined.

Submission successful

Haml markup example of Icon

%p
  %span.bc-icon
    Managed by Bugcrowd

%p
  %span.bc-icon.bc-icon--after
    Managed by Bugcrowd

%p
  %span.bc-icon.bc-icon--on-demand
    On-Demand program

%p
  %a{href: 'javascript:void(0)', class: 'bc-icon bc-icon--markdown'}
    Markdown supported

%p
  %span.bc-icon.bc-icon--sso
    Authenticated with SSO

%p
  %a{href: 'javascript:void(0)', class: 'bc-icon bc-icon--duplicate'}
    SSRF in login.aspx

%p
  %span.bc-icon.bc-icon--info
    Heads up…

%p
  %span.bc-icon.bc-icon--warning
    Careful…

%p
  %span.bc-icon.bc-icon--error
    XYZ cannot be undefined.

%p
  %span.bc-icon.bc-icon--success
    Submission successful

Variants

--after variant

Rendered example of Icon
ASE Willy Wonka, Hacker MD
Haml markup example of Icon --after
%span.bc-icon.bc-icon--after
  ASE Willy Wonka, Hacker MD

Labeled divider

Guidance last updated: Jan 14, 2018

Use to visually separate content in different states (e.g., read vs. unread).

The data-divider-text attribute sets the text for this component.

It should reference the state of the content below the divider.

Rendered example of Labeled divider


Haml markup example of Labeled divider

%hr.bc-labeled-divider{data: {'divider-text': 'read'}}
Guidance last updated: Feb 12, 2019

Horizontally or vertically aligned lists of text, with support for links.

Use this component as a base when styling lists of things.

This simple component is usable standalone, or in combination with other classes from the design system. Feel free to use and then override with your customisations as necessary (eg overriding the background color).

To be deprecated

Features

Provides:

  • Support for links inside the list
  • Dark color support, including for links
  • Either inline (horizontal) or vertical layout.

Variants

--inline variant

--dark variant

List

Guidance last updated: Mar 13, 2019

Horizontally or vertically aligned lists of text.

List semantics

Where possible use the correct semantic list type:

  • <ul> for unordered lists
  • <ol> for ordered lists

Styling Lists

  • The --numbered and --bulleted variants are mutually exclusive
  • The spacing variants (--compact & --spacious) are mutually exclusive and can be chained with all other variants
  • The --middot variant extends the --inline variant’s styles, omitting the need to chain these two classes together
  • The --lined variant should not be used with the --inline or --middot variants

Do not use this component to style list patterns, such as submission cards.

Rendered example of List

  • Foo
  • Bar
  • Baz

Haml markup example of List

%ul.bc-list
  %li
    Foo
  %li
    Bar
  %li
    Baz

Variants

--numbered variant

Rendered example of List
  1. Item one
  2. Item two
  3. Item three
Haml markup example of List --numbered
%ol.bc-list.bc-list--numbered
  %li
    Item one
  %li
    Item two
  %li
    Item three

--bulleted variant

Rendered example of List
  • Foo
  • Bar
  • Baz
Haml markup example of List --bulleted
%ul.bc-list.bc-list--bulleted
  %li
    Foo
  %li
    Bar
  %li
    Baz

--lined variant

Rendered example of List
  • Foo
  • Bar
  • Baz
Haml markup example of List --lined
%ul.bc-list.bc-list--lined
  %li
    Foo
  %li
    Bar
  %li
    Baz

--inline variant

Rendered example of List
  • handgloves
  • rebeccapurple
  • hamburgefonstiv
Haml markup example of List --inline
%ul.bc-list.bc-list--inline
  %li
    handgloves
  %li
    rebeccapurple
  %li
    hamburgefonstiv

--middot variant

Rendered example of List
  • handgloves
  • rebeccapurple
  • hamburgefonstiv
Haml markup example of List --middot
%ul.bc-list.bc-list--middot
  %li
    handgloves
  %li
    rebeccapurple
  %li
    hamburgefonstiv

--compact variant

Rendered example of List
  • Foo
  • Bar
  • Baz

  • Foo
  • Bar
  • Baz

  • Foo
  • Bar
  • Baz

  • Foo
  • Bar
  • Baz
Haml markup example of List --compact
%ul.bc-list.bc-list--compact
  %li
    Foo
  %li
    Bar
  %li
    Baz

%br

%ul.bc-list.bc-list--lined.bc-list--compact
  %li
    Foo
  %li
    Bar
  %li
    Baz

%br

%ul.bc-list.bc-list--inline.bc-list--compact
  %li
    Foo
  %li
    Bar
  %li
    Baz

%br

%ul.bc-list.bc-list--middot.bc-list--compact
  %li
    Foo
  %li
    Bar
  %li
    Baz

--spacious variant

Rendered example of List
  • Foo
  • Bar
  • Baz

  • Foo
  • Bar
  • Baz

  • Foo
  • Bar
  • Baz

  • Foo
  • Bar
  • Baz
Haml markup example of List --spacious
%ul.bc-list.bc-list--spacious
  %li
    Foo
  %li
    Bar
  %li
    Baz

%br

%ul.bc-list.bc-list--lined.bc-list--spacious
  %li
    Foo
  %li
    Bar
  %li
    Baz

%br

%ul.bc-list.bc-list--inline.bc-list--spacious
  %li
    Foo
  %li
    Bar
  %li
    Baz

%br

%ul.bc-list.bc-list--middot.bc-list--spacious
  %li
    Foo
  %li
    Bar
  %li
    Baz

Page alerts

Guidance last updated: Jan 9, 2019

Use page alerts to give feedback to the user about an action or state.

If your page alerts can appear dynamically use ARIA, eg when notifying a user of an error.

Page alert accessibility

When using Page alerts to display important information on state change, such as error message handling for invalid form inputs, it is important to programmatically tie the alert to the component that is the cause of the message.

For more information see the Forms section on error handling.

Page alert variants

There are 4 types of Page alerts:

  • Informational [default]: Use when notifying the user of neutral information about the system
  • --success: Use to inform the user about successful or completed actions
  • --warning: Use to warn the user about important system information that deserves caution
  • --error: Use when you need to alert the user about an error in the system that needs immediate attention.

Page alert React props

PageAlert have the following properties:

Prop Type Description
title string The content or heading text
children node The markup for the main body
liveRegion true/false When true, overrides the aria-live attribute to off (defaults to false)
variant default/success/warning/error CSS variants for various icon and color section on the left
small true/false PageAlert (size) variant
alertProps object Any additional props you wish to pass to PageAlert

All props are optional.

Rendered example of Page alerts

Haml markup example of Page alerts

%div{'data-react-class': 'PageAlert', 'data-react-props': '{"title": "Accessibility reading"}'}

.bc-page-alert
  %h4.bc-h5 Accessibility reading
  %ol
    %li
      The
      %a{href: 'https://www.legislation.gov.au/Latest/C2016C00763'}
        Disability Discrimination Act (1992)
    %li
      The
      %a{href: 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/'}
        Web Content Accessibility Guidelines 2 (<abbr>WCAG</abbr>)

Variants

--small variant

Rendered example of Page alerts
Haml markup example of Page alerts --small
%div{'data-react-class': 'PageAlert', 'data-react-props': '{"title": "Accessibility reading", "small": "true"}'}

.bc-page-alert.bc-page-alert--small
  %h4.bc-h5 Accessibility reading
  %ol
    %li
      The
      %a{href: 'https://www.legislation.gov.au/Latest/C2016C00763'}
        Disability Discrimination Act (1992)
    %li
      The
      %a{href: 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/'}
        Web Content Accessibility Guidelines 2 (<abbr>WCAG</abbr>)

--success variant

Rendered example of Page alerts
Success: submission received

Thanks! Your submission ID is:

43dcabd6d51b88895e84895f266402806fed556bc00057a522d02da46c287a79
Haml markup example of Page alerts --success
%div{'data-react-class': 'PageAlert', 'data-react-props': '{"title": "Success: submission received", "variant": "success", "liveRegion": "true"}'}

.bc-page-alert.bc-page-alert--success{'aria-live': 'polite'}
  %h6.bc-h5 Success: submission received
  %p
    Thanks! Your submission ID is:
  %pre
    %code
      43dcabd6d51b88895e84895f266402806fed556bc00057a522d02da46c287a79

--warning variant

Rendered example of Page alerts
Warning: out of scope target

The target URL is not listed as being in-scope. You can continue, but you may lose points.

Haml markup example of Page alerts --warning
%div{'data-react-class': 'PageAlert', 'data-react-props': '{"title": "Warning: out of scope target", "variant": "warning", "liveRegion": "true"}'}

.bc-page-alert.bc-page-alert--warning{'aria-live': 'polite'}
  %h6.bc-h5 Warning: out of scope target
  %p
    The target <abbr>URL</abbr> is not listed as being in-scope. You can
    continue, but you may lose points.

--error variant

Rendered example of Page alerts
An error has occurred

Oh no! The EPROM matrix adapter has fallen off the back of the ute — it’s gone for good now. Either acquire a new one, or use duct-tape.

Haml markup example of Page alerts --error
%div{'data-react-class': 'PageAlert', 'data-react-props': '{"title": "An error has occurred", "variant": "error", "liveRegion": "true"}'}

.bc-page-alert.bc-page-alert--error{'aria-live': 'polite'}
  %h6.bc-h5 An error has occurred
  %p
    Oh no! The EPROM matrix adapter has fallen off the back of the ute — it’s
    gone for good now. Either acquire a new one, or use duct-tape.

Progress bars

Guidance last updated: May 13, 2019

A horizontal bar that displays the progression of a task or activity.

Use progress bars to communicate the current status of an ongoing process.

Updating the progress bar value

The current value is communicated in two main ways:

  1. Graphically by updating the inline style that sets bar’s width as a percentage
  2. With ARIA markup using aria-valuenow, and optionally — in addition — aria-valuetext

If the current value cannot be accurately communicated as a number, use aria-valuetext in addition to aria-valuenow.

If desired, the current value can also be displayed beneath the progress bar as an <output>. When doing this, establish a labelling relationship between the .bc-progress-bar and the <output> using aria-labelledby. When providing additional labelling or context, wrap only the current value inside the <output> tag. If the text value is omitted, you can use aria-label instead to provide additional context.

Progress bar variants

  • --labelled: use to visually show the decriptive label (optional) and <output> below the progress bar
  • --success: changes the progression color to green (success)
  • --branded changes the progression color to bugcrowd’s brand (orange)
  • --xs: lowers the height (extra-small) of the progress bar
  • --sm: lowers the height of the progress bar
  • --lg: increases the height of the progress bar

Progress bar accessibility

  • The progressbar role provides context to the markup used
  • The range is provided by aria-valuemin and aria-valuemax
  • The current value is specificied using aria-valuenow (assistive technologies render this value as a percentage between aria-valuemin and aria-valuemax)
  • More context to the value can be given using aria-valuetext — to be used in addition to aria-valuenow — when merely providing the current value as a percentage is inadequate to communicate context
  • Further context via an ARIA label can be given, using one of the following methods:
    1. If providing a visual text completion value, use aria-labelledby to directly reference the <output> text (.bc-hint) via its ID
    2. When not providing a visual <output>, pass the same [human-readable] string as the aria-label

Showing label text below progress bars

By default progress text (.bc-hint) is visually hidden. Chain the .bc-progress-bar--labelled variant class to show label below the progress bar.

Height and spacing issue: this component has a set height which impacts the vertical spacing when providing a visual text output. This component will be lightly refactored to improve vertical spacing support.

Rendered example of Progress bars

35% complete

Haml markup example of Progress bars

.bc-progress-bar{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '25', 'aria-valuetext': 'Mixing the chocolate: 25% complete'}
  %span.bc-progress-bar__value{style: 'width:25%'}

.bc-progress-bar.bc-progress-bar--labelled{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '35', 'aria-valuetex': '35% complete', 'aria-labelledby': 'progress-bar-output'}
  %span.bc-progress-bar__value{style: 'width:35%'}
  %span.bc-hint{id: 'progress-bar-output'}
    %output.bc-progress-bar__output
      35%
    complete

Variants

--success variant

Rendered example of Progress bars
100% complete
Haml markup example of Progress bars --success
.bc-progress-bar.bc-progress-bar--success{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '45', 'aria-valuetext': 'Uploading attachment.txt: 45% complete'}
  %span.bc-progress-bar__value{style: 'width:45%'}

.bc-progress-bar.bc-progress-bar--labelled.bc-progress-bar--success{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '100', 'aria-labelledby': 'progress-bar-success-label'}
  %span.bc-progress-bar__value{style: 'width:100%'}
  %span.bc-hint{id: 'progress-bar-success-label'}
    %output.bc-progress-bar__output
      100%
    complete

--branded variant

Rendered example of Progress bars
20% complete
Haml markup example of Progress bars --branded
.bc-progress-bar.bc-progress-bar--branded{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuetext': 'Progress: 80%', 'aria-label': 'Uploading attachment.png'}
  %span.bc-progress-bar__value{style: 'width:80%'}

.bc-progress-bar.bc-progress-bar--labelled.bc-progress-bar--branded{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuetext': '20% complete', 'aria-labelledby': 'progress-bar-branded-label'}
  %span.bc-progress-bar__value{style: 'width:20%'}
  %span.bc-hint{id: 'progress-bar-branded-label'}
    %output.bc-progress-bar__output
      20%
    complete

--xs variant

Rendered example of Progress bars
50% complete
Haml markup example of Progress bars --xs
.bc-progress-bar.bc-progress-bar--xs{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '10', 'aria-valuetext': 'Uploading attachment.jpg: 10% complete'}
  %span.bc-progress-bar__value{style: 'width:10%'}

.bc-progress-bar.bc-progress-bar--labelled.bc-progress-bar--xs{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '50', 'aria-labelledby': 'progress-bar-xs-label'}
  %span.bc-progress-bar__value{style: 'width:50%'}
  %span.bc-hint{id: 'progress-bar-xs-label'}
    %output.bc-progress-bar__output
      50%
    complete

--sm variant

Rendered example of Progress bars
50% complete
Haml markup example of Progress bars --sm
.bc-progress-bar.bc-progress-bar--sm{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '10', 'aria-valuetext': 'Uploading PoC.py: 10% complete', 'aria-label': 'Uploading PoC.py'}
  %span.bc-progress-bar__value{style: 'width:10%'}

.bc-progress-bar.bc-progress-bar--labelled.bc-progress-bar--sm{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '50', 'aria-valuetext': '50% complete', 'aria-labelledby': 'progress-bar-sm-label'}
  %span.bc-progress-bar__value{style: 'width:50%'}
  %span.bc-hint{id: 'progress-bar-sm-label'}
    %output.bc-progress-bar__output
      50%
    complete

--lg variant

Rendered example of Progress bars
Updating the Omega Inhibitor: 75% complete
Haml markup example of Progress bars --lg
.bc-progress-bar.bc-progress-bar--lg{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '30', 'aria-valuetext': 'Updating the cache: 30% complete'}
  %span.bc-progress-bar__value{style: 'width:30%'}

.bc-progress-bar.bc-progress-bar--labelled.bc-progress-bar--lg{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '75', 'aria-valuetext': 'Updating the Omega Inhibitor: 75% complete', 'aria-labelledby': 'progress-bar-lg-label'}
  %span.bc-progress-bar__value{style: 'width:75%'}
  %span.bc-hint{id: 'progress-bar-lg-label'}
    Updating the Omega Inhibitor:
    %output.bc-progress-bar__output
      75%
    complete

Rewards

Guidance last updated: Apr 18, 2018

For displaying monetary and point rewards.

Rendered example of Rewards

Still being assessed

$0

$1,500.00

6 points

−4 points

Haml markup example of Rewards

%p
  %span.bc-reward.bc-reward--blankstate
    Still being assessed

%p
  %span.bc-reward.bc-reward--none
    $0

%p
  %span.bc-reward
    $1,500.00

%p
  %span.bc-reward.bc-reward--points
    6 points

%p
  %span.bc-reward.bc-reward--points.bc-reward--negative
    &minus;4 points

Stat

Guidance last updated: Mar 29, 2018

Styling for important stats.

Use stats to display a series of titled data points.

Stat markup

Preferably group the items as a list instead of with <div>s.

Rendered example of Stat

Haml markup example of Stat

%ul.bc-stats
  %li.bc-stat
    %span.bc-stat__title
      Vulnerabilities
    %span.bc-stat__fig
      13
  %li.bc-stat
    %span.bc-stat__title
      Accuracy
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__info
      %a{href: '#'}
        About accuracy
  %li.bc-stat
    %span.bc-stat__title
      Average severity
    %span.bc-stat__fig
      2.75
    %span.bc-stat__info
      %a{href: '#'}
        About severity
  %li.bc-stat
    %span.bc-stat__title
      Total rewarded
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__info
      %a{href: '#'}
        See program rewards

Variants

--xs variant

Rendered example of Stat

Vulnerabilities

13

Accuracy

81.2% About accuracy

Average severity

2.75 About severity

Total rewarded

$8,127.00 See program rewards
Haml markup example of Stat --xs
.bc-stats.bc-stats--xs
  .bc-stat
    %h4.bc-stat__title
      Vulnerabilities
    %span.bc-stat__fig
      13
  .bc-stat
    %h4.bc-stat__title
      Accuracy
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__info
      %a{href: '#'}
        About accuracy
  .bc-stat
    %h4.bc-stat__title
      Average severity
    %span.bc-stat__fig
      2.75
    %span.bc-stat__info
      %a{href: '#'}
        About severity
  .bc-stat
    %h4.bc-stat__title
      Total rewarded
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__info
      %a{href: '#'}
        See program rewards

--lg variant

Rendered example of Stat

Vulnerabilities

13

Accuracy

81.2% About accuracy

Average severity

2.75 About severity

Total rewarded

$8,127.00 See program rewards
Haml markup example of Stat --lg
.bc-stats.bc-stats--lg
  .bc-stat
    %h4.bc-stat__title
      Vulnerabilities
    %span.bc-stat__fig
      13
  .bc-stat
    %h4.bc-stat__title
      Accuracy
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__info
      %a{href: '#'}
        About accuracy
  .bc-stat
    %h4.bc-stat__title
      Average severity
    %span.bc-stat__fig
      2.75
    %span.bc-stat__info
      %a{href: '#'}
        About severity
  .bc-stat
    %h4.bc-stat__title
      Total rewarded
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__info
      %a{href: '#'}
        See program rewards

--inline variant

Rendered example of Stat
13 vulnerabilities
81.2% accuracy
2.75 average severity
$8,127.00 total rewarded
13 vulnerabilities
81.2% accuracy
2.75 average severity
$8,127.00 total rewarded
13 vulnerabilities
81.2% accuracy
2.75 average severity
$8,127.00 total rewarded
Haml markup example of Stat --inline
.bc-stats.bc-stats--xs.bc-stats--inline
  .bc-stat
    %span.bc-stat__fig
      13
    %span.bc-stat__title
      vulnerabilities
  .bc-stat
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__title
      accuracy
  .bc-stat
    %span.bc-stat__fig
      2.75
    %span.bc-stat__title
      average severity
  .bc-stat
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__title
      total rewarded

.bc-stats.bc-stats--inline
  .bc-stat
    %span.bc-stat__fig
      13
    %span.bc-stat__title
      vulnerabilities
  .bc-stat
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__title
      accuracy
  .bc-stat
    %span.bc-stat__fig
      2.75
    %span.bc-stat__title
      average severity
  .bc-stat
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__title
      total rewarded

.bc-stats.bc-stats--lg.bc-stats--inline
  .bc-stat
    %span.bc-stat__fig
      13
    %span.bc-stat__title
      vulnerabilities
  .bc-stat
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__title
      accuracy
  .bc-stat
    %span.bc-stat__fig
      2.75
    %span.bc-stat__title
      average severity
  .bc-stat
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__title
      total rewarded

Tags

Guidance last updated: Dec 7, 2018

Styles for taxonomical keywords that fall into single or multiple categories.

Use tags to add taxonomical data to Submissions and Targets.

Theme support: This feature doesn’t yet have color theme support.

Implementing tags

  • Use .bc-tag when marking up stand-alone tags
  • Use sorted or unsorted lists when grouping tags, applying the .bc-tags class to the list wrapper
  • Add the .bc-tag--remove variant when building up a tag that can be removed.

Tag markup

Note the tag string itself is expected to sit in a child <span>, nested inside .bc-tag.

Interactive [removable] tags

Add a button to remove a tag:

  • Nest the <button> with the .bc-btn.bc-btn--cross classes inside .bc-tag, after the <span>.
  • Remember to nest the <span>Remove</span> inside the <button>. This is required to visually position the x icon and obviates any need for additional ARIA markup.

Rendered example of Tags

Singular view only tag
Foobar
Singular removable tag
Foobar
View only tags in a grouped list
  • Web
  • Tomcat
  • Rails
  • CMS
  • API
Removable tags in a grouped list
  • Web
  • Tomcat
  • Rails
  • CMS
  • API

Haml markup example of Tags

%h6.bc-h6 Singular view only tag
%span.bc-tag
  %span Foobar

%h6.bc-h6 Singular removable tag
%span.bc-tag.bc-tag--removable
  %span Foobar
  %button.bc-btn.bc-btn--cross
    %span Remove

%h6.bc-h6 View only tags in a grouped list
%ul.bc-tags
  %li.bc-tag
    %span Web
  %li.bc-tag
    %span Tomcat
  %li.bc-tag
    %span Rails
  %li.bc-tag
    %span CMS
  %li.bc-tag
    %span API

%h6.bc-h6 Removable tags in a grouped list
%ul.bc-tags
  %li.bc-tag.bc-tag--removable
    %span Web
    %button.bc-btn.bc-btn--cross
      %span Remove
  %li.bc-tag.bc-tag--removable
    %span Tomcat
    %button.bc-btn.bc-btn--cross
      %span Remove
  %li.bc-tag.bc-tag--removable
    %span Rails
    %button.bc-btn.bc-btn--cross
      %span Remove
  %li.bc-tag.bc-tag--removable
    %span CMS
    %button.bc-btn.bc-btn--cross
      %span Remove
  %li.bc-tag.bc-tag--removable
    %span API
    %button.bc-btn.bc-btn--cross
      %span Remove