Bugcrowd design system: Components

Components are Bugcrowd’s common design and UI elements.

Avatars

Guidance last updated: Jun 5, 2023

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.
  • --accent-border: adds a colored border to the avatar.

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

With the react component

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')"}

%p
  With the react component
%div{'data-react-class': 'BcAvatarExample'}
GitHub: components/_avatars.scss

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'}
GitHub: components/_avatars.scss

--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'}
GitHub: components/_avatars.scss

--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'}
GitHub: components/_avatars.scss

--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'}
GitHub: components/_avatars.scss

--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
GitHub: components/_avatars.scss

--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'}
GitHub: components/_avatars.scss

--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'}
GitHub: components/_avatars.scss

--accent-border variant

Rendered example of Avatars

With accent border img

User-name avatar

With different sizes

User-name avatar User-name avatar User-name avatar User-name avatar
Haml markup example of Avatars --accent-border 
%p
  With accent border
  %code img
%img.bc-avatar.bc-avatar--accent-border{src: '/assets/profile-tmp.png', alt: 'User-name avatar', style: 'border-color: #ff00ff' }

%p
  With different sizes
%img.bc-avatar.bc-avatar--accent-border.bc-avatar--xs{src: '/assets/profile-tmp.png', alt: 'User-name avatar', style: 'border-color: #a6bb33' }
%img.bc-avatar.bc-avatar--accent-border.bc-avatar--sm{src: '/assets/profile-tmp.png', alt: 'User-name avatar', style: 'border-color: #e03400' }
%img.bc-avatar.bc-avatar--accent-border.bc-avatar--lg{src: '/assets/profile-tmp.png', alt: 'User-name avatar', style: 'border-color: #00e0ac' }
%img.bc-avatar.bc-avatar--accent-border.bc-avatar--xl{src: '/assets/profile-tmp.png', alt: 'User-name avatar', style: 'border-color: #5f45ef' }
GitHub: components/_avatars.scss

Badges

Guidance last updated: Jun 5, 2023

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
GitHub: components/_badges.scss

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
GitHub: components/_badges.scss

--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
GitHub: components/_badges.scss

Bar charts

Guidance last updated: Jun 5, 2023

Simple horizontal bar charts.

Use these simple bar graphs to show comparisons between discrete categories.

Bar chart usage guidance

Use a definition list, where the first (and only) definition term (<dt>) is the caption or title of the aggregate bar chart graph. If desired this caption/title can be visually hidden, but it must exist in the markup.

Give a short label for each bar (a span within the definition description (<dd>)).

Bar chart variants

  • The --ruled to adds vertical rules at 10% intervals. Use this when an aggregate bar chart does not have a 100% value to compare against, since it also adds a ‘stop’ rule at 100%.
  • The --severity variant sets bar chart colors matching our P1..5 color schema, provided they are in order of 1–5. You can also manually receive the correct chart color via .bc-barchart--p1..5.

Bar chart limitations

These bar charts are currently very simple. Please note they do not support:

  • Flopping axis/orientation from horiziontal to vertical
  • Multi-line or otherwise long labels
  • Labelling of increments or values along the horizontal axis

If you have complex charting needs we recommend relying on a third-party full-fledged charting library.

Bar chart React configuration

Prop Type Description
data* List A list of data organised as keys and values (labels and percentages)
visuallyHideCaption bool Toggle the visibility of the graph caption
chartSize oneOf(xs, sm, lg) Control the graphical size of the bar chart
ruled bool Apply the `--ruled` variant styles (default is false)
severity bool Apply the `--severity` variant styles (default is false)
children* node The caption/title for the group of bar charts
className string String passed to root container of the component to append to the html class attribute

Props with an asterisk are required.

Rendered example of Bar charts

Favorite animal vote results
Quokkas: 60%
Pangolins: 25%
Capybaras: 15%

Haml markup example of Bar charts 

%dl.bc-barcharts
  %dt.bc-barcharts__caption
    Favorite animal vote results
  %dd.bc-barchart.bc-barchart--60
    %span.bc-barchart__label
      Quokkas: 60%
  %dd.bc-barchart.bc-barchart--25
    %span.bc-barchart__label
      Pangolins: 25%
  %dd.bc-barchart.bc-barchart--15
    %span.bc-barchart__label
      Capybaras: 15%
GitHub: components/_bar-charts.scss

Variants

--ruled variant

Rendered example of Bar charts
‘Ruled’ bar chart (inc. 0 & 100%)
100%
75%
50%
25%
0%
Haml markup example of Bar charts --ruled 
%dl.bc-barcharts.bc-barcharts--ruled
  %dt.bc-barcharts__caption
    %strong
      ‘Ruled’ bar chart
    %span.bc-hint
      (inc. 0 &amp; 100%)
  %dd.bc-barchart.bc-barchart--100
    %strong.bc-barchart__label
      100%
  %dd.bc-barchart.bc-barchart--75
    %span.bc-barchart__label
      75%
  %dd.bc-barchart.bc-barchart--50
    %span.bc-barchart__label
      50%
  %dd.bc-barchart.bc-barchart--25
    %span.bc-barchart__label
      25%
  %dd.bc-barchart.bc-barchart--0
    %strong.bc-barchart__label
      0%
GitHub: components/_bar-charts.scss

--severity variant

Rendered example of Bar charts
Priority percentile breakdown
56th  ·  P1
70th  ·  P2
88th  ·  P3
49th  ·  P4
61st  ·  P5
Haml markup example of Bar charts --severity 
%dl.bc-barcharts.bc-barcharts--severity.bc-barcharts--ruled
  %dt.bc-barcharts__caption
    Priority percentile breakdown
  %dd.bc-barchart.bc-barchart--56
    %span.bc-barchart__label
      %span 56<sup>th</sup>
      %span &nbsp;&middot;&nbsp;
      %span P1
  %dd.bc-barchart.bc-barchart--70
    %span.bc-barchart__label
      %span 70<sup>th</sup>
      %span &nbsp;&middot;&nbsp;
      %span P2
  %dd.bc-barchart.bc-barchart--88
    %span.bc-barchart__label
      %span 88<sup>th</sup>
      %span &nbsp;&middot;&nbsp;
      %span P3
  %dd.bc-barchart.bc-barchart--49
    %span.bc-barchart__label
      %span 49<sup>th</sup>
      %span &nbsp;&middot;&nbsp;
      %span P4
  %dd.bc-barchart.bc-barchart--61
    %span.bc-barchart__label
      %span 61<sup>st</sup>
      %span &nbsp;&middot;&nbsp;
      %span P5
GitHub: components/_bar-charts.scss

--xs variant

Rendered example of Bar charts
Favorite animal vote results
Quokkas: 60%
Pangolins: 25%
Capybaras: 15%
Haml markup example of Bar charts --xs 
%dl.bc-barcharts.bc-barcharts--xs
  %dt.bc-barcharts__caption
    Favorite animal vote results
  %dd.bc-barchart.bc-barchart--60
    %span.bc-barchart__label
      Quokkas: 60%
  %dd.bc-barchart.bc-barchart--25
    %span.bc-barchart__label
      Pangolins: 25%
  %dd.bc-barchart.bc-barchart--15
    %span.bc-barchart__label
      Capybaras: 15%
GitHub: components/_bar-charts.scss

--sm variant

Rendered example of Bar charts
Favorite animal vote results
Quokkas: 60%
Pangolins: 25%
Capybaras: 15%
Haml markup example of Bar charts --sm 
%dl.bc-barcharts.bc-barcharts--sm
  %dt.bc-barcharts__caption
    Favorite animal vote results
  %dd.bc-barchart.bc-barchart--60
    %span.bc-barchart__label
      Quokkas: 60%
  %dd.bc-barchart.bc-barchart--25
    %span.bc-barchart__label
      Pangolins: 25%
  %dd.bc-barchart.bc-barchart--15
    %span.bc-barchart__label
      Capybaras: 15%
GitHub: components/_bar-charts.scss

--lg variant

Rendered example of Bar charts
Favorite animal vote results
Quokkas: 60%
Pangolins: 25%
Capybaras: 15%
Haml markup example of Bar charts --lg 
%dl.bc-barcharts.bc-barcharts--lg
  %dt.bc-barcharts__caption
    Favorite animal vote results
  %dd.bc-barchart.bc-barchart--60
    %span.bc-barchart__label
      Quokkas: 60%
  %dd.bc-barchart.bc-barchart--25
    %span.bc-barchart__label
      Pangolins: 25%
  %dd.bc-barchart.bc-barchart--15
    %span.bc-barchart__label
      Capybaras: 15%
GitHub: components/_bar-charts.scss

Data tables

Guidance last updated: Jun 5, 2023

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
  • .bc-table__cell-numeric: for numeric data, eg monetary values.

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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

--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-numeric{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-numeric{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-numeric{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-numeric{data: { label: 'amount' }} 28,900
        %td{data: { label: 'status' }} Completed
GitHub: components/_data-tables.scss

Display type

Guidance last updated: Jun 5, 2023

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
GitHub: components/_display-type.scss

Headings

Guidance last updated: Jun 5, 2023

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
GitHub: components/_headings.scss

Hints

Guidance last updated: Jun 5, 2023

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
GitHub: components/_hints.scss

Icon

Guidance last updated: Jun 5, 2023

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.

Icon variants

The following variants are available:

  • --after: positioning variant to place the icon on the right of the string
  • --align-top: positioning variant to anchor the icon to the top of a multi-line paragraph
  • --hidden-text: visually hides text string. Ensure the string is nested in another child <span>
  • --disclose and --dislose--partial: disclose.io safe harbor icons
  • --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 / requirement satisfied / eligible icon
  • --requirement: requirement (unsatisfied) / ineligible icon
  • --blocker-created: active blocker icon
  • --blocker-resolved: resolved blocker icon
  • --invisible: invisible (eye) icon
  • --search: magnifier icon
  • --notification: bell icon
  • --github: GitHub logo icon
  • --stackoverflow: Stack Overflow logo icon
  • --pentesterlab: Pentesterlab logo icon
  • --target: Target icon
  • --api: API icon
  • --hardware: Hardware icon
  • --ios: iOS icon
  • --android: Android icon
  • --iot: IoT icon
  • --website: Website icon
  • --user: Person icon
  • --user-group: Group icon
  • --public: Public icon
  • --bugcrowd-internal: Bugcrowd internal icon
  • --clock: Clock icon
  • --task-list: Task list icon
  • --activity-feed: Activity feed icon

Rendered example of Icon

Managed by Bugcrowd

Safe harbor

Partial safe harbor

On-Demand program

Markdown supported

Authenticated with SSO

SSRF in login.aspx

Heads up…

Careful…

XYZ cannot be undefined.

Successful / Requirement satisfied / Eligible

Requirement (unsatisfied) / Ineligible

Blocker created

Blocker resolved

Not visible to researchers

Search

Notification

@github

@stackoverflow

@stackexchange

@pentesterlab

Target

API

Hardware

iOS

Android

IoT

Website

User

User group

Public

Bugcrowd internal

Clock

Task list

Activity feed

Haml markup example of Icon 

%p
  %span.bc-icon
    Managed by Bugcrowd

%p
  %span.bc-icon.bc-icon--disclose
    Safe harbor

%p
  %span.bc-icon.bc-icon--disclose--partial
    Partial safe harbor

%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
    Successful / Requirement satisfied / Eligible

%p
  %span.bc-icon.bc-icon--requirement
    Requirement (unsatisfied) / Ineligible

%p
  %span.bc-icon.bc-icon--blocker-created
    Blocker created

%p
  %span.bc-icon.bc-icon--blocker-resolved
    Blocker resolved

%p
  %span.bc-icon.bc-icon--invisible
    Not visible to researchers

%p
  %span.bc-icon.bc-icon--search
    Search

%p
  %span.bc-icon.bc-icon--notification
    Notification

%p
  %span.bc-icon.bc-icon--github
    %a{href: 'https://github.com', rel: 'external'}
      @github

%p
  %span.bc-icon.bc-icon--stackoverflow
    %a{href: 'https://stackoverflow.com', rel: 'external'}
      @stackoverflow

%p
  %span.bc-icon.bc-icon--stackexchange
    %a{href: 'https://stackexchange.com', rel: 'external'}
      @stackexchange

%p
  %span.bc-icon.bc-icon--pentesterlab
    %a{href: 'https://pentesterlab.com/', rel: 'external'}
      @pentesterlab

%p
  %span.bc-icon.bc-icon--target
    Target

%p
  %span.bc-icon.bc-icon--api
    API

%p
  %span.bc-icon.bc-icon--hardware
    Hardware

%p
  %span.bc-icon.bc-icon--ios
    iOS

%p
  %span.bc-icon.bc-icon--android
    Android

%p
  %span.bc-icon.bc-icon--iot
    IoT

%p
  %span.bc-icon.bc-icon--website
    Website

%p
  %span.bc-icon.bc-icon--user
    User

%p
  %span.bc-icon.bc-icon--user-group
    User group

%p
  %span.bc-icon.bc-icon--public
    Public

%p
  %span.bc-icon.bc-icon--bugcrowd-internal
    Bugcrowd internal

%p
  %span.bc-icon.bc-icon--clock
    Clock

%p
  %span.bc-icon.bc-icon--task-list
    Task list

%p
  %span.bc-icon.bc-icon--activity-feed
    Activity feed
GitHub: components/_icon.scss

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
GitHub: components/_icon.scss

--align-top variant

Rendered example of Icon
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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Haml markup example of Icon --align-top 
%span.bc-icon.bc-icon--info.bc-icon--align-top
  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 laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
GitHub: components/_icon.scss

--hidden-text variant

Rendered example of Icon

Warning

Safe harbor

Search

Haml markup example of Icon --hidden-text 
%p
  %span.bc-icon.bc-icon--warning.bc-icon--hidden-text
    %span
      Warning

%p
  %span.bc-icon.bc-icon--disclose.bc-icon--hidden-text
    %span
      Safe harbor

%p
  %span.bc-icon.bc-icon--search.bc-icon--hidden-text
    %span
      Search
GitHub: components/_icon.scss

Keyboard keys

Guidance last updated: Jun 5, 2023

Styles for the <kdb> element.

Use to style keyboard keys when providing hot-key or keyboard support hint text.

Using keyboard keys

Use the HTML5 <kbd> element.

Only provide keys that are actually present on standardized keyboards.

Rendered example of Keyboard keys

Use Tab or ← → to navigate

Haml markup example of Keyboard keys 

%span.bc-hint
  Use
  %kbd.bc-kbd Tab
  or
  %kbd.bc-kbd ←
  %kbd.bc-kbd →
  to navigate
GitHub: components/_keyboard-keys.scss

Labeled divider

Guidance last updated: Jun 5, 2023

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'}}
GitHub: components/_labeled-divider.scss
Guidance last updated: Jun 5, 2023

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
  • Either inline (horizontal) or vertical layout.

Rendered example of Link list

Haml markup example of Link list 

%ul.bc-link-list
  %li
    %a{href: 'javascript:void(0)'}
      Foo
  %li
    %a{href: 'javascript:void(0)'}
      Bar
  %li
    %a{href: 'javascript:void(0)'}
      Baz
GitHub: components/_link-list.scss

Variants

--inline variant

Rendered example of Link list
Haml markup example of Link list --inline 
%ul.bc-link-list.bc-link-list--inline
  %li
    %a{href: 'javascript:void(0)'}
      Foo
  %li
    %a{href: 'javascript:void(0)'}
      Bar
  %li
    %a{href: 'javascript:void(0)'}
      Baz
GitHub: components/_link-list.scss

List

Guidance last updated: Jun 5, 2023

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
GitHub: components/_list.scss

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
GitHub: components/_list.scss

--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
GitHub: components/_list.scss

--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
GitHub: components/_list.scss

--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
GitHub: components/_list.scss

--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
GitHub: components/_list.scss

--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
GitHub: components/_list.scss

--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
GitHub: components/_list.scss

Loader

Guidance last updated: Jun 5, 2023

A loading animation (and hidden status message).

Use a Loader animation to indicate the user should wait for a user interface action to complete (eg the loading of dynamic search query results).

Using a Loader animation

  • Place the animation in visual proximity to the triggering UI element or would-be content space.
  • Use a single Loader at a time.
  • The animation should gracefully disappear when the action is complete.

Loader accessibility

Use ARIA live regions to announce the loading states:

  1. Provide the visually-hidden status text a meaningful message (eg “Duplicate search results loading…”
  2. Use role="alert" and aria-live="assertive" attributes on the Loader’s container
  3. On the container of the content (or interface) that is currently loading, add:
    • aria-live="polite"
    • toggle: aria-busy="true" for content that is currently loading; false for content that has loaded.

Rendered example of Loader

Haml markup example of Loader 

.bc-loader{'role': 'alert', 'aria-live': 'assertive'}
  .bc-loader__hex{'aria-hidden': 'true'} &#x2B23;
  .bc-loader__hex{'aria-hidden': 'true'} &#x2B23;
  .bc-loader__hex{'aria-hidden': 'true'} &#x2B23;
  .bc-loader__hex{'aria-hidden': 'true'} &#x2B23;
  %span.bc-loader__text
    Loading duplicate submissions
GitHub: components/_loader.scss

Page alerts

Guidance last updated: Jun 5, 2023

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.

Rendered example of Page alerts

Accessibility reading

  1. The Disability Discrimination Act (1992)
  2. The Web Content Accessibility Guidelines 2 (WCAG)

Haml markup example of Page alerts 

.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>)
GitHub: components/_page-alerts.scss

Variants

--small variant

Rendered example of Page alerts

Accessibility reading

  1. The Disability Discrimination Act (1992)
  2. The Web Content Accessibility Guidelines 2 (WCAG)
Haml markup example of Page alerts --small 
.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>)
GitHub: components/_page-alerts.scss

--success variant

Rendered example of Page alerts
Success: submission received

Thanks! Your submission ID is: 

43dcabd6d51b88895e84895f266402806fed556bc00057a522d02da46c287a79
Haml markup example of Page alerts --success 
.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
GitHub: components/_page-alerts.scss

--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 
.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.
GitHub: components/_page-alerts.scss

--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 
.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.
GitHub: components/_page-alerts.scss

Progress bars

Guidance last updated: Jun 5, 2023

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 with 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

  • --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
  • --inline: aligns the progress bar and label text horizontally

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-progress-bar__output) via its ID
    2. When not providing a visual <output>, pass the same [human-readable] string as the aria-label

Displaying label text with progress bars

  • Use .bc-progress-bar__output to display a label text above or below the progress bar.
  • Use .bc-helper-righttext to right align the label text.
  • Use .bc-helper-centeredtext to center align the label text.

Rendered example of Progress bars

70% complete
35% complete

Haml markup example of Progress bars 

.bc-progress-bar
  .bc-progress-bar__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
  %span.bc-progress-bar__output{id: 'progress-bar-output-above'}
    %output
      70% 
    complete
  .bc-progress-bar__bar{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '70', 'aria-valuetext': '70% complete', 'aria-labelledby': 'progress-bar-output-above'}
    %span.bc-progress-bar__value{style: 'width:70%'}

.bc-progress-bar
  .bc-progress-bar__bar{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '35', 'aria-valuetext': '35% complete', 'aria-labelledby': 'progress-bar-output'}
    %span.bc-progress-bar__value{style: 'width:35%'}
  %span.bc-progress-bar__output{id: 'progress-bar-output'}
    %output
      35% 
    complete
GitHub: components/_progress-bars.scss

Variants

--success variant

Rendered example of Progress bars
100% complete
Haml markup example of Progress bars --success 
.bc-progress-bar.bc-progress-bar--success
  .bc-progress-bar__bar{'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--success
  .bc-progress-bar__bar{'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-progress-bar__output{id: 'progress-bar-success-label'}
    %output
      100%
    complete
GitHub: components/_progress-bars.scss

--branded variant

Rendered example of Progress bars
20% complete
Haml markup example of Progress bars --branded 
.bc-progress-bar.bc-progress-bar--branded
  .bc-progress-bar__bar{'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--branded
  .bc-progress-bar__bar{'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-progress-bar__output{id: 'progress-bar-branded-label'}
    %output
      20%
    complete
GitHub: components/_progress-bars.scss

--xs variant

Rendered example of Progress bars
50% complete
Haml markup example of Progress bars --xs 
.bc-progress-bar.bc-progress-bar--xs
  .bc-progress-bar__bar{'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--xs
  .bc-progress-bar__bar{'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-progress-bar__output{id: 'progress-bar-xs-label'}
    %output
      50%
    complete
GitHub: components/_progress-bars.scss

--sm variant

Rendered example of Progress bars
50% complete
Haml markup example of Progress bars --sm 
.bc-progress-bar.bc-progress-bar--sm
  .bc-progress-bar__bar{'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--sm
  .bc-progress-bar__bar{'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-progress-bar__output{id: 'progress-bar-sm-label'}
    %output
      50%
    complete
GitHub: components/_progress-bars.scss

--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
  .bc-progress-bar__bar{'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--lg
  .bc-progress-bar__bar{'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-progress-bar__output{id: 'progress-bar-lg-label'}
    Updating the Omega Inhibitor:
    %output
      75%
    complete
GitHub: components/_progress-bars.scss

--inline variant

Rendered example of Progress bars
90% complete
Haml markup example of Progress bars --inline 
.bc-progress-bar.bc-progress-bar--inline
  .bc-progress-bar__bar{'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '90', 'aria-valuetext': '90% complete', 'aria-labelledby': 'progress-bar-output-inline'}
    %span.bc-progress-bar__value{style: 'width:90%'}
  %span.bc-progress-bar__output{id: 'progress-bar-output-inline'}
    %output
      90% 
    complete
GitHub: components/_progress-bars.scss

Rewards

Guidance last updated: Jun 5, 2023

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
GitHub: components/_rewards.scss

Stat

Guidance last updated: Jun 5, 2023

Styling for important stats.

Use stats to display a series of titled data points.

Stat markup

Preferably group the items as an unsorted list (<ul>) instead of with <div>s.

Stat variants

  • --xs: Decrease font size.
  • --lg Increase font size.
  • --inline: Aligns the title and figure horizontally in a row. This removes the even distribution of stats horizontally.
  • --vertical: Aligns stats vertically in a column.
  • --unlined: Removes the left border in each subsequent stat in ≥md and top border in <md.
  • --uptrend: Changes text color to green, to be used for an ‘up-trending’ number or percentage.
  • --downtrend: Changes text color to red, to be used for a ‘down-trending’ number or percentage.

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
GitHub: components/_stat.scss

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
GitHub: components/_stat.scss

--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
GitHub: components/_stat.scss

--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
GitHub: components/_stat.scss

--vertical variant

Rendered example of Stat

Vertical

With `--unlined` variant

With `--inline` variant

  • 13 vulnerabilities
  • 81.2% accuracy
  • 2.75 average severity
  • $8,127.00 total rewarded
Haml markup example of Stat --vertical 
.row
  .col-md-4
    %h3 Vertical
    %ul.bc-stats.bc-stats--vertical
      %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

  .col-md-4
    %h3 With `--unlined` variant
    %ul.bc-stats.bc-stats--vertical.bc-stats--unlined
      %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

  .col-md-4
    %h3 With `--inline` variant
    %ul.bc-stats.bc-stats--inline.bc-stats--vertical
      %li.bc-stat
        %span.bc-stat__fig
          13
        %span.bc-stat__title
          vulnerabilities
      %li.bc-stat
        %span.bc-stat__fig
          81.2%
        %span.bc-stat__title
          accuracy
      %li.bc-stat
        %span.bc-stat__fig
          2.75
        %span.bc-stat__title
          average severity
      %li.bc-stat
        %span.bc-stat__fig
          $8,127.00
        %span.bc-stat__title
          total rewarded
GitHub: components/_stat.scss

--unlined variant

Rendered example of Stat
Haml markup example of Stat --unlined 
%ul.bc-stats.bc-stats--unlined
  %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
GitHub: components/_stat.scss

--uptrend variant

Rendered example of Stat
50% over previous 90 days
50% over previous 90 days
50% over previous 90 days

Summary

Vulnerabilities

18
50% over previous 90 days

Accuracy

81.2%
10.2 over previous 90 days

Average severity

2.75
0.6 over previous 90 days

Total rewarded

$8,127.00
20.2% over previous 90 days

90 days summary Showing changes over previous period.

Vulnerabilities

18
50%

Accuracy

81.2%
10.2

Average severity

2.75
0.6

Total rewarded

$8,127.00
20.2%
Haml markup example of Stat --uptrend 
.bc-stats.bc-stats--inline.bc-stats--xs
  .bc-stat.bc-stat--uptrend
    %span.bc-stat__fig.bc-icon.bc-icon--uptrend
      50%
    %span.bc-stat__title
      over previous 90 days
.bc-stats.bc-stats--inline
  .bc-stat.bc-stat--uptrend
    %span.bc-stat__fig.bc-icon.bc-icon--uptrend
      50%
    %span.bc-stat__title
      over previous 90 days
.bc-stats.bc-stats--inline.bc-stats--lg
  .bc-stat.bc-stat--uptrend
    %span.bc-stat__fig.bc-icon.bc-icon--uptrend
      50%
    %span.bc-stat__title
      over previous 90 days

%h4.bc-h5
  Summary

.bc-stats.bc-stats
  .bc-stat
    %h4.bc-stat__title
      Vulnerabilities
    %span.bc-stat__fig
      18
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            50%
          %span.bc-stat__title
            over previous 90 days
  .bc-stat
    %h4.bc-stat__title
      Accuracy
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            10.2
          %span.bc-stat__title
            over previous 90 days
  .bc-stat
    %h4.bc-stat__title
      Average severity
    %span.bc-stat__fig
      2.75
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            0.6
          %span.bc-stat__title
            over previous 90 days
  .bc-stat
    %h4.bc-stat__title
      Total rewarded
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            20.2%
          %span.bc-stat__title
            over previous 90 days

%h4.bc-h5
  90 days summary
  %span.bc-hint 
    Showing changes over previous period.

.bc-stats.bc-stats--lg
  .bc-stat
    %h4.bc-stat__title
      Vulnerabilities
    %span.bc-stat__fig
      18
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            50%
  .bc-stat
    %h4.bc-stat__title
      Accuracy
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            10.2
  .bc-stat
    %h4.bc-stat__title
      Average severity
    %span.bc-stat__fig
      2.75
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            0.6
  .bc-stat
    %h4.bc-stat__title
      Total rewarded
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--uptrend
          %span.bc-stat__fig.bc-icon.bc-icon--uptrend
            20.2%
GitHub: components/_stat.scss

--downtrend variant

Rendered example of Stat
50% over previous 90 days
50% over previous 90 days
50% over previous 90 days

Summary

Vulnerabilities

18
50% over previous 90 days

Accuracy

81.2%
10.2 over previous 90 days

Average severity

2.75
0.6 over previous 90 days

Total rewarded

$8,127.00
20.2% over previous 90 days

90 days summary Showing changes over previous period.

Vulnerabilities

18
50%

Accuracy

81.2%
10.2

Average severity

2.75
0.6

Total rewarded

$8,127.00
20.2%
Haml markup example of Stat --downtrend 
.bc-stats.bc-stats--inline.bc-stats--xs
  .bc-stat.bc-stat--downtrend
    %span.bc-stat__fig.bc-icon.bc-icon--downtrend
      50%
    %span.bc-stat__title
      over previous 90 days
.bc-stats.bc-stats--inline
  .bc-stat.bc-stat--downtrend
    %span.bc-stat__fig.bc-icon.bc-icon--downtrend
      50%
    %span.bc-stat__title
      over previous 90 days
.bc-stats.bc-stats--inline.bc-stats--lg
  .bc-stat.bc-stat--downtrend
    %span.bc-stat__fig.bc-icon.bc-icon--downtrend
      50%
    %span.bc-stat__title
      over previous 90 days

%h4.bc-h5
  Summary

.bc-stats
  .bc-stat
    %h4.bc-stat__title
      Vulnerabilities
    %span.bc-stat__fig
      18
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            50%
          %span.bc-stat__title
            over previous 90 days
  .bc-stat
    %h4.bc-stat__title
      Accuracy
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            10.2
          %span.bc-stat__title
            over previous 90 days
  .bc-stat
    %h4.bc-stat__title
      Average severity
    %span.bc-stat__fig
      2.75
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            0.6
          %span.bc-stat__title
            over previous 90 days
  .bc-stat
    %h4.bc-stat__title
      Total rewarded
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            20.2%
          %span.bc-stat__title
            over previous 90 days

%h4.bc-h5
  90 days summary
  %span.bc-hint 
    Showing changes over previous period.
    
.bc-stats.bc-stats--lg
  .bc-stat
    %h4.bc-stat__title
      Vulnerabilities
    %span.bc-stat__fig
      18
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            50%
  .bc-stat
    %h4.bc-stat__title
      Accuracy
    %span.bc-stat__fig
      81.2%
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            10.2
  .bc-stat
    %h4.bc-stat__title
      Average severity
    %span.bc-stat__fig
      2.75
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            0.6
  .bc-stat
    %h4.bc-stat__title
      Total rewarded
    %span.bc-stat__fig
      $8,127.00
    %span.bc-stat__info
      .bc-stats.bc-stats--inline.bc-stats--xs
        .bc-stat.bc-stat--downtrend
          %span.bc-stat__fig.bc-icon.bc-icon--downtrend
            20.2%
GitHub: components/_stat.scss

Tags

Guidance last updated: Jun 5, 2023

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

Use tags to add taxonomical data to Submissions and Targets.

Implementing tags

  • Use .bc-tag when marking up a single, stand-alone tag
  • Use sorted or unsorted lists when grouping tags, applying the .bc-tags class to the list wrapper

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.

Rendered example of Tags

Read-only tag Removable tag Removable tag (disabled)
  • Web
  • Tomcat
  • Rails
  • CMS
  • API

Haml markup example of Tags 

%span.bc-tag
  %span Read-only tag

%span.bc-tag
  %span Removable tag
  %button.bc-btn.bc-btn--cross{'aria-label': 'Remove tag'}
    %span Remove

%span.bc-tag
  %span
    Removable tag
    %span.bc-hint.bc-helper-inline
      (disabled)
  %button.bc-btn.bc-btn--cross(disabled){'aria-label': 'Remove tag'}
    %span Remove

%ul.bc-tags
  %li.bc-tag
    %span Web
    %button.bc-btn.bc-btn--cross(disabled){'aria-label': 'Remove tag'}
      %span Remove
  %li.bc-tag
    %span Tomcat
    %button.bc-btn.bc-btn--cross{'aria-label': 'Remove tag'}
      %span Remove
  %li.bc-tag
    %span Rails
    %button.bc-btn.bc-btn--cross{'aria-label': 'Remove tag'}
      %span Remove
  %li.bc-tag
    %span
      %abbr CMS
    %button.bc-btn.bc-btn--cross{'aria-label': 'Remove tag'}
      %span Remove
  %li.bc-tag
    %span
      %abbr API
    %button.bc-btn.bc-btn--cross{'aria-label': 'Remove tag'}
      %span Remove
GitHub: components/_tags.scss

Trend

Guidance last updated: Jun 5, 2023

Styles for positive or negative changes in a metric.

Use to show at glance whether a metric has changed over time.

Trend React component

✅ There is a React implementation for this component: <BcTrend />.

Trend markup

Trend component styles do not provide any semantics, so the direction of the change (positive or negative) should also be indicated at minimum using a visually hidden string.

Trend variants

The default state indicates no change.

Change variants:

  • .bc-trend--up
  • .bc-trend--down

Size variants:

  • .bc-trend--sm (14px base font size)
  • .bc-trend--lg (18px base font size)
  • .bc-trend--xl (24px base font size)

Rendered example of Trend

no change

Haml markup example of Trend 

%span.bc-trend
  no change
GitHub: components/_trend.scss

Variants

--up variant

Rendered example of Trend
42% increase
Haml markup example of Trend --up 
%span.bc-trend.bc-trend--up
  42%
  %span.bc-helper-sronly
    increase
GitHub: components/_trend.scss

--down variant

Rendered example of Trend
24% decrease
Haml markup example of Trend --down 
%span.bc-trend.bc-trend--down
  24%
  %span.bc-helper-sronly
    decrease
GitHub: components/_trend.scss

--sm variant

Rendered example of Trend
42% increase
Haml markup example of Trend --sm 
%span.bc-trend.bc-trend--up.bc-trend--sm
  42%
  %span.bc-helper-sronly
    increase
GitHub: components/_trend.scss

--lg variant

Rendered example of Trend
9001% increase
Haml markup example of Trend --lg 
%span.bc-trend.bc-trend--up.bc-trend--lg
  9001%
  %span.bc-helper-sronly
    increase
GitHub: components/_trend.scss

--xl variant

Rendered example of Trend
9001% increase
Haml markup example of Trend --xl 
%span.bc-trend.bc-trend--up.bc-trend--xl
  9001%
  %span.bc-helper-sronly
    increase
GitHub: components/_trend.scss

Trust

Guidance last updated: Jun 5, 2023

A simple trust scoring component for researchers.

Rendered example of Trust

Newcomer

Haml markup example of Trust 

%span.bc-trust
  Newcomer
GitHub: components/_trust.scss

Variants

--exceptional variant

Rendered example of Trust
Exceptional
Haml markup example of Trust --exceptional 
%span.bc-trust.bc-trust--exceptional
  Exceptional
GitHub: components/_trust.scss

--good variant

Rendered example of Trust
Good
Haml markup example of Trust --good 
%span.bc-trust.bc-trust--good
  Good
GitHub: components/_trust.scss

--low variant

Rendered example of Trust
Low
Haml markup example of Trust --low 
%span.bc-trust.bc-trust--low
  Low
GitHub: components/_trust.scss

--block variant

Rendered example of Trust
Exceptional
Haml markup example of Trust --block 
%span.bc-trust.bc-trust--exceptional.bc-trust--block
    Exceptional
GitHub: components/_trust.scss
Guidance last updated: Jun 5, 2023

The Vulnerability Rating Taxonomy (VRT) logotype.

Use to insert simple a SVG image of the VRT logo.

VRT logo semantics

  • Use appropriate markup for the component
  • Use the <abbr> abbreviation tag to hold the ‘VRT’ text
    • Define the first instance of a <abbr> with a title attribute per <section>
  • Apply the screen-reader only utility helper class to the nested <abbr>

VRT logo sizing

The default, --small and --large size variants feature square viewports, sized in rems.

The --inline variant is rectangular and is sized in ems to scale with the inlined text it precedes. Avoid combining the size variants with the inline variant — instead scale the containing element for the inlined text.

GitHub: components/_vrt-logo.scss

Variants

--inline variant

Rendered example of VRT logo
Version 1.8
Version 1.8
Server-Side > Injection File Inclusion > Local

Version 1.8

Haml markup example of VRT logo --inline 
%span.bc-hint
  %span.bc-vrt-logo.bc-vrt-logo--inline
    %abbr.bc-helper-sronly{title: 'Vulnerability Rating Taxonomy'}
      VRT
  %span Version 1.8

%dl
  %dt
    %span.bc-vrt-logo.bc-vrt-logo--inline
      %abbr.bc-helper-sronly{title: 'Vulnerability Rating Taxonomy'}
        VRT
    %span Version 1.8
  %dd
    Server-Side > Injection File Inclusion > Local

%h4.bc-h4
  %span.bc-vrt-logo.bc-vrt-logo--inline
    %abbr.bc-helper-sronly{title: 'Vulnerability Rating Taxonomy'}
      VRT
  %span Version 1.8
GitHub: components/_vrt-logo.scss

--small variant

Rendered example of VRT logo
Haml markup example of VRT logo --small 
%span.bc-vrt-logo.bc-vrt-logo--small
  %abbr.bc-helper-sronly{title: 'Vulnerability Rating Taxonomy'}
    VRT
GitHub: components/_vrt-logo.scss

--large variant

Rendered example of VRT logo
Haml markup example of VRT logo --large 
%span.bc-vrt-logo.bc-vrt-logo--large
  %abbr.bc-helper-sronly{title: 'Vulnerability Rating Taxonomy'}
    VRT
GitHub: components/_vrt-logo.scss