Guidance last updated:
Aug 14, 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
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' }
Variants
--xs
variant
Rendered example
of Avatars
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
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
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
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
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
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
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' }
--accent-border
variant
Rendered example
of Avatars
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' }
Guidance last updated:
Sep 12, 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 capitalized.
--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
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
Haml markup example
of Badges --token
%p
%span .bc-badge.bc-badge--token
state:new
%span .bc-badge.bc-badge--token
program:hackme
Guidance last updated:
Sep 12, 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 horizontal 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 organized 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%
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 & 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%
--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 ·
%span P1
%dd .bc-barchart.bc-barchart--70
%span .bc-barchart__label
%span 70<sup> th</sup>
%span ·
%span P2
%dd .bc-barchart.bc-barchart--88
%span .bc-barchart__label
%span 88<sup> th</sup>
%span ·
%span P3
%dd .bc-barchart.bc-barchart--49
%span .bc-barchart__label
%span 49<sup> th</sup>
%span ·
%span P4
%dd .bc-barchart.bc-barchart--61
%span .bc-barchart__label
%span 61<sup> st</sup>
%span ·
%span P5
--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%
--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%
--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%
Guidance last updated:
Aug 14, 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
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
--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
--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
--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
--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
--ui
variant
Rendered example
of Data tables
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
--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
--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
--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
Guidance last updated:
Aug 14, 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
Guidance last updated:
Aug 14, 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
Guidance last updated:
Sep 12, 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 relationship 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
Guidance last updated:
Aug 14, 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 --disclose-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
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
--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.
--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
Guidance last updated:
Aug 14, 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
Guidance last updated:
Sep 12, 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
customizations 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
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
Guidance last updated:
Aug 14, 2023
Horizontally or vertically aligned lists of text.
List semantics
Where possible use the correct semantic list type:
<ul>
for un ordered 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
Haml markup example
of List
%ul .bc-list
%li
Foo
%li
Bar
%li
Baz
Variants
--numbered
variant
Rendered example
of List
Item one
Item two
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
Haml markup example
of List --bulleted
%ul .bc-list.bc-list--bulleted
%li
Foo
%li
Bar
%li
Baz
--lined
variant
Rendered example
of List
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
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
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
Guidance last updated:
Aug 14, 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:
Provide the visually-hidden status text a meaningful message (eg “Duplicate search results loading…”
Use role="alert"
and aria-live="assertive"
attributes on the Loader’s container
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
⬣
⬣
⬣
⬣
Loading duplicate submissions
Haml markup example
of Loader
.bc-loader { 'role' : 'alert' , 'aria-live' : 'assertive' }
.bc-loader__hex { 'aria-hidden' : 'true' } ⬣
.bc-loader__hex { 'aria-hidden' : 'true' } ⬣
.bc-loader__hex { 'aria-hidden' : 'true' } ⬣
.bc-loader__hex { 'aria-hidden' : 'true' } ⬣
%span .bc-loader__text
Loading duplicate submissions
Guidance last updated:
Aug 14, 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
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> )
Variants
--small
variant
Rendered example
of Page alerts
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> )
--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
--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.
--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.
Guidance last updated:
Sep 12, 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:
Graphically by updating the inline style
that sets bar’s width as a percentage
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 specified 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:
If providing a visual text completion value, use aria-labelledby
to directly reference the <output>
text (.bc-progress-bar__output
) via its ID
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
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
Variants
--success
variant
Rendered example
of Progress bars
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
--branded
variant
Rendered example
of Progress bars
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
--xs
variant
Rendered example
of Progress bars
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
--sm
variant
Rendered example
of Progress bars
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
--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
--inline
variant
Rendered example
of Progress bars
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
Guidance last updated:
Aug 14, 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
− 4 points
Guidance last updated:
Aug 14, 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
Variants
--xs
variant
Rendered example
of Stat
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
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
--vertical
variant
Rendered example
of Stat
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
--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
--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.
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%
--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.
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%
Guidance last updated:
Aug 14, 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.
Read-only tag
Removable tag
Remove
Removable tag
(disabled)
Remove
Guidance last updated:
Aug 14, 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
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
--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
--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
--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
--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
Guidance last updated:
Aug 14, 2023
A simple trust scoring component for researchers.
Rendered example
of Trust
Newcomer
Haml markup example
of Trust
Variants
--exceptional
variant
Rendered example
of Trust
Exceptional
Haml markup example
of Trust --exceptional
%span .bc-trust.bc-trust--exceptional
Exceptional
--good
variant
Rendered example
of Trust
Good
Haml markup example
of Trust --good
%span .bc-trust.bc-trust--good
Good
--low
variant
Rendered example
of Trust
Low
Haml markup example
of Trust --low
%span .bc-trust.bc-trust--low
Low
--block
variant
Rendered example
of Trust
Exceptional
Haml markup example
of Trust --block
%span .bc-trust.bc-trust--exceptional.bc-trust--block
Exceptional
Guidance last updated:
Aug 14, 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.
Rendered example
of VRT logo
Haml markup example
of VRT logo
%span .bc-vrt-logo
%abbr .bc-helper-sronly { title: 'Vulnerability Rating Taxonomy' }
VRT
Variants
--inline
variant
Rendered example
of VRT logo
VRT
Version 1.8
VRT
Version 1.8
Server-Side > Injection File Inclusion > Local
VRT
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
--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
--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