Used to deliver Access Vending Machine status alerts to application users.
AVM alerts are positioned at the top
of the page.
These alerts do not have a dismiss function; they are only removed once the
related status is resolved or changes.
Usage
The banner is expected to be used alongside the full-width .container-fluid
grid class, and should be placed in the fixed position header in Tracker.
Dependencies
bc-grid
bc-btn
Rendered example
of AVM banner
Unlimited support access expires soon:
access to all programs will expire in 3 hours.
Haml markup example
of AVM banner
.container-fluid.bc-avm-banner.container-fluid__container.bc-avm-banner__message%span.bc-avm-banner__title
Unlimited support access expires soon:
%span.bc-avm-banner__body
access to all programs will expire in 3 hours.
.bc-avm-banner__actions%button.bc-btn.bc-btn--secondary.bc-btn--small
Renew
%button.bc-btn.bc-btn--secondary.bc-btn--small
Revoke
Blank slates are for when there is no content within a page or section. Use them
as placeholders to tell users why there is no content. Ideally, blank slates
should provide a call-to-action to see or add content.
Add .bc-avatar to a <img> to add images in your blank state.
Rendered example
of Blankstate
No one has been admitted yet
Claim a spot by submitting a unique, valid vulnerability.
.bc-blankstate.bc-panel%h4.bc-blankstate__title
No one has been admitted yet
%p.bc-blankstate__description
Claim a spot by submitting a unique, valid vulnerability.
%a.bc-btn.bc-btn--secondary.bc-btn--small
Submit report
Variants
--sm variant
Rendered example
of Blankstate
Inbox empty
You have no new notifications.
Haml markup example
of Blankstate --sm
.bc-blankstate.bc-blankstate--sm.bc-panel%h4.bc-blankstate__title
Inbox empty
%p.bc-blankstate__description
You have no new notifications.
--lg variant
Rendered example
of Blankstate
We’re waiting for your submission to be marked as valid
We’ll update your stats page once you have at least one confirmed
vulnerability. Manage your submitted vulnerabilities below.
.bc-blankstate.bc-blankstate--lg.bc-panel%h4.bc-blankstate__title
We’re waiting for your submission to be marked as valid
%p.bc-blankstate__description
We’ll update your stats page once you have at least one confirmed
vulnerability. Manage your submitted vulnerabilities below.
%a.bc-btn.bc-btn--secondary.bc-btn--small
Manage submissions
--nobg variant
Rendered example
of Blankstate
This is a blank state
Use it to provide information when no there is no content.
.bc-blankstate.bc-blankstate--nobg.bc-panel%h4.bc-blankstate__title
This is a blank state
%p.bc-blankstate__description
Use it to provide information when no there is no content.
%a.bc-btn.bc-btn--secondary.bc-btn--small
Related action
.bc-login.bc-panel.bc-panel--action.bc-panel__header%h4.bc-panel__title
Become a researcher
%p
Already have an account?
%a{href: "javascript:void(0)"}Log in
%form.bc-panel__main.bc-form.bc-helper-nomargin.bc-form__group%fieldset.bc-fieldset.bc-fieldset--visible%legend.bc-fieldset__legend
New researcher account details
%label.bc-label{for: 'user-name'}
Username
%input.bc-text-input.bc-text-input--block{name: 'user-name',id: 'user-name',type: 'text',placeholder: 'Username'}%label.bc-label{for: 'user-email'}
Email address
%input.bc-text-input.bc-text-input--block{name: 'user-email',id: 'user-email',type: 'text',placeholder: 'Email'}%label.bc-label{for: 'user-pwd'}
Password
%input.bc-text-input.bc-text-input--block{name: 'user-pwd',id: 'user-pwd',type: 'text',placeholder: 'Password'}%label.bc-label{for: 'user-pwd-confirm'}
Password confirmation
%input.bc-text-input.bc-text-input--block{name: 'user-pwd-confirm',id: 'user-pwd-confirm',type: 'text',placeholder: 'Confirm password'}%label.bc-control-input%input.bc-control-input__input(checked){name: 'user-profile-public-boolean',type: 'checkbox'}%span.bc-control-input__label-text
Make my researcher profile public
%label.bc-control-input%input.bc-control-input__input{name: 'user-profile-public-boolean',type: 'checkbox'}%span.bc-control-input__label-text
I agree to the
%a{href: "/terms-and-conditions/"}Terms & Conditions
and
%a{href: "/standard-disclosure-terms/"}Standard Disclosure Terms
.bc-form__footer%button.bc-btn.bc-btn--positive.bc-btn--large
Sign up
.bc-login.bc-panel.bc-panel--action.bc-panel__header%h4.bc-panel__title
Sign up to get access to Crowdcontrol
%p
Already have an account?
%a{href: "javascript:void(0)"}Log in
%form.bc-panel__main.bc-form.bc-helper-nomargin.bc-form__group%fieldset.bc-fieldset.bc-fieldset--visible%legend.bc-fieldset__legend
Tell us about your organization
%p.bc-hint
An organization allows you to create and run your own security programs
with the crowd.
%label.bc-label{for: 'org-name'}
Organization name
%input.bc-text-input.bc-text-input--block{name: 'org-name',id: 'org-name',type: 'text',placeholder: 'Organization name'}%label.bc-label{for: 'org-phone'}
Organization phone (optional)
%input.bc-text-input.bc-text-input--number.bc-text-input--block{name: 'org-phone',id: 'org-phone',type: 'tel',placeholder: 'Phone number'}.bc-form__group%fieldset.bc-fieldset.bc-fieldset--visible%legend.bc-fieldset__legend
Organization account details
%p.bc-hint
Your account is used when replying to researchers and validating reports.
%label.bc-label{for: 'org-display-name'}
Organization display name
%input.bc-text-input.bc-text-input--block{name: 'org-display-name',id: 'org-display-name',type: 'text',placeholder: 'Organization display name'}%label.bc-label{for: 'org-email'}
Organization email address
%input.bc-text-input.bc-text-input--block{name: 'org-email',id: 'org-email',type: 'text',placeholder: 'Email'}%label.bc-label{for: 'org-pwd'}
Organization password
%input.bc-text-input.bc-text-input--block{name: 'org-pwd',id: 'org-pwd',type: 'text',placeholder: 'Password'}%label.bc-label{for: 'org-pwd-confirm'}
Organization password confirmation
%input.bc-text-input.bc-text-input--block{name: 'org-pwd-confirm',id: 'org-pwd-confirm',type: 'text',placeholder: 'Confirm password'}.bc-form__footer%button.bc-btn.bc-btn--positive.bc-btn--large
Sign up
.bc-login.bc-panel.bc-panel--action.bc-panel__header%h4.bc-panel__title
Log in to Crowdcontrol
%p
or
%a{href: "javascript:void(0)"}create an account
%form.bc-panel__main.bc-form.bc-helper-nomargin.bc-form__group%fieldset.bc-fieldset.bc-fieldset--visible%legend.bc-fieldset__legend
Your account login details
%p.bc-hint
Logging in with <abbrtitle='Security Assertion Markup Language'>SAML</abbr>? Only enter your email.
.bc-form__group%label.bc-label{for: 'crowdcontrol-email'}
Your account email
%input.bc-text-input.bc-text-input--block{name: 'crowdcontrol-email',id: 'crowdcontrol-email',type: 'text',placeholder: 'Email address'}.bc-form__group%label.bc-label{for: 'crowdcontrol-pwd'}
Your account password
%input.bc-text-input.bc-text-input--block{name: 'crowdcontrol-pwd',id: 'crowdcontrol-pwd',type: 'text',placeholder: 'Password'}.bc-form__group%button.bc-btn.bc-btn--block
Log in
.bc-panel__footer%a.bc-hint{href: "javascript:void(0)"}Forgot your password?
Panel-like cards for displaying information about a Program.
Program cards in Portal also provide either the submit report or accept
invite call to actions.
In Tracker Program cards provide quick links to submissions in the processing,
to review, and to fix states, a view brief icon link to that program’s
brief, and AVM actions as required.
Default type: Researcher Portal cards are the default Program card style.
Program card usage
When giving a list of programs ensure each program is a list item within either
a sorted or unsorted list.
Program card progressive enhancement
The logo backdrop is a link that provides a duplicate anchor to the program
brief or summary (between Portal and Tracker respectively).
It’s intended to provide visual users a large, clickable region to view more
information.
But due to the duplication in the markup, we need to actually hide this extra
link from assistive technologies. Note the markup, which:
Removes the anchor from the tab order via tabindex="-1"
Sets aria-hidden="true" to mark as being irrelevant/hidden.
Program card variants
There are three variants:
Tracker Program cards: bc-program-card--tk
‘Hero’ or banner-style Program cards: bc-program-card--hero
Inactive or disabled Program cards: bc-program-card--inactive
The --hero program cards can be applied to both the base and the Tracker
variant.
Dash is digital cash; Dash Messaging is messaging with digital cash attached.
Kudos
per vulnerability
Managed by Bugcrowd
Haml markup example
of Program card
%ul.row.bc-panels.bc-panels--tiled%li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-panel.bc-panel--lined.bc-panel--interactive.bc-program-card__header%a.bc-program-card__logo-backdrop{href: '#',tabindex: '-1','aria-hidden':'true',style: 'background-color: #F4F5F7;'}%img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72',alt: 'logo'}%h4.bc-panel__title%a{href: '#'}
Caffeine
%p.bc-program-card__byline
Caffeine is a social broadcasting platform for gaming, entertainment, and the creative arts.
.bc-program-card__main.bc-panel__main%ul.bc-stats.bc-stats--xs%li.bc-stat.bc-program-card__reward%span.bc-stat__title
$10,000
%span.bc-stat__info
reward pool
%li.bc-stat.bc-program-card__date%span.bc-stat__title%time{datetime: '2018-08-01T-01:00'}
Aug 01, 2018 at 00:00 PST
%span.bc-stat__info
start of program —%span.bc-program-card__important
25 spots left!
.bc-program-card__footer.bc-panel__footer.bc-panel__footer-actions%button.bc-btn.bc-btn--positive.bc-btn--small
Accept invite
%button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow{'aria-label':'Follow this program','type':'button'}%span Follow
%li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-panel.bc-panel--lined.bc-panel--interactive.bc-program-card__header%a.bc-program-card__logo-backdrop{href: '#',tabindex: '-1','aria-hidden':'true',style: 'background-color: #87C4E7;'}%img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72',alt: 'logo'}%h4.bc-panel__title%a{href: '#'}
You Need a Budget (YNAB)
%span.bc-badge.bc-badge--text.bc-badge--p4
Joinable
%p.bc-program-card__byline
YNAB’s Responsible Disclosure Program
.bc-program-card__main%ul.bc-stats.bc-stats--xs%li.bc-stat.bc-program-card__reward%span.bc-stat__title
Points
%span.bc-stat__info
per vulnerability
%li.bc-stat.bc-program-card__date%span.bc-stat__title%time{datetime: '2018-01-01T-01:00'}
Jan 01, 2018 at 00:00 PST
%span.bc-stat__info
end of program —%span.bc-program-card__important
Ending soon
%li.bc-stat.bc-icon%span Managed by Bugcrowd
.bc-program-card__footer.bc-panel__footer.bc-panel__footer-actions%a.bc-btn.bc-btn--small.bc-btn--tertiary{href: '#'}
Submit report
%button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow.bc-btn--follow-active{'aria-label':'Follow this program','type':'button'}%span Follow
%li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-panel.bc-panel--lined.bc-panel--interactive.bc-program-card__header%a.bc-program-card__logo-backdrop{href: '#',tabindex: '-1','aria-hidden':'true',style: 'background-color: #1D74CE;'}%img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72',alt: 'logo'}%h4.bc-panel__title%a{href: '#'}
1Password
%span.bc-badge.bc-badge--text.bc-badge--success
New
%p.bc-program-card__byline
1Password is the world’s best password manager. Perfect for protecting your business, team, and family.
.bc-program-card__main%ul.bc-stats.bc-stats--xs%li.bc-stat.bc-program-card__reward%span.bc-stat__title
$100 – $10,000
%span.bc-stat__info
per vulnerability
%li.bc-stat.bc-program-card__bonus%span.bc-stat__title
$100,000
%span.bc-stat__info
bonus available
%li.bc-stat.bc-icon%span Managed by Bugcrowd
.bc-program-card__footer.bc-panel__footer.bc-panel__footer-actions%a.bc-btn.bc-btn--small.bc-btn--tertiary{href: '#'}
Submit report
%button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow.bc-btn--follow{'aria-label':'Follow this program','type':'button'}%span Follow
%li.col-xs-12.col-sm-6.col-md-4.col-lg-3.col-xl-2.bc-program-card.bc-panel.bc-panel--lined.bc-panel--interactive.bc-program-card__header%a.bc-program-card__logo-backdrop{href: '#',tabindex: '-1','aria-hidden':'true',style: 'background-color: #1A1A1A;'}%img.bc-avatar.bc-avatar--lg.bc-avatar--square.bc-program-card__logo{src: 'https://via.placeholder.com/72x72',alt: 'logo'}%h4.bc-panel__title%a{href: '#'}
Dash Messaging
%p.bc-program-card__byline
Dash is digital cash; Dash Messaging is messaging with digital cash attached.
.bc-program-card__main%ul.bc-stats.bc-stats--xs%li.bc-stat.bc-program-card__reward%span.bc-stat__title
Kudos
%span.bc-stat__info
per vulnerability
%li.bc-stat.bc-icon%span Managed by Bugcrowd
.bc-program-card__footer.bc-panel__footer.bc-panel__footer-actions%a.bc-btn.bc-btn--small.bc-btn--tertiary{href: '#'}
Submit report
%button.bc-btn.bc-btn--small.bc-btn--tertiary.bc-btn--icon.bc-btn--icon-hidden-text.bc-btn--follow.bc-btn--follow{'aria-label':'Follow this program','type':'button'}%span Follow
Section headers hold headings, subheadings, introductory text, and actions like buttons and dropdowns.
Section headers are built to clearly distinguish multiple <article>s or
<section>s from one another, while locating high-level actions near these
headings.
Section headers are used as the titles of each major section of a page in the
interface.
To create a consistent user experience, the section header pattern always holds
the heading, subheading, and introductory text on the left while any related
actions are positioned to the right [at ≥ desktop breakpoints].
Within a section header, the .bc-h1..6 heading classes:
Retain their top margin
Have their bottom margins all set to 0.5rem, unless they are followed by
another element.
You can place any of these six heading classes into this header.
An --unlined variant is available for when the bottom border is not necessary.
Rendered example
of Section header
Reward history
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
Programs
Upcoming payments
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
Haml markup example
of Section header
%header.bc-section-header.bc-section-header__heading%h1.bc-h1 Reward history
%p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
.bc-section-header__actions.bc-inline-control-group%button.bc-btn
Export PDF
%button.bc-btn.bc-btn--secondary
Export CSV
%header.bc-section-header.bc-section-header__heading%h3.bc-h3 Programs
.bc-section-header__actions%label.bc-label{for: 'section-header_program-reward-filter',class: 'bc-helper-sronly'}
Filter reward type:
.bc-dropdown%select{id: 'section-header_program-reward-filter',class: 'bc-dropdown__select'}%option{value: '1'}
Newest
%option{value: '2'}
Reward amount
%option{value: '3'}
Alphabetical
%header.bc-section-header.bc-section-header__heading%h5.bc-h5 Upcoming payments
%p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
Variants
--unlined variant
Rendered example
of Section header
Participating researchers
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
Participating researchers
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco.
Participating researchers
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
Haml markup example
of Section header --unlined
%header.bc-section-header.bc-section-header--unlined.bc-section-header__heading%h1.bc-h1 Participating researchers
%p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
.bc-section-header__actions.bc-inline-control-group%button.bc-btn
Export PDF
%button.bc-btn.bc-btn--secondary
Export CSV
%header.bc-section-header.bc-section-header--unlined.bc-section-header__heading%h3.bc-h3 Participating researchers
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco.
.bc-section-header__actions.bc-inline-control-group.bc-inline-control-group--left%button.bc-btn.bc-btn--small
Weekly
%button.bc-btn.bc-btn--small
Monthly
%button.bc-btn.bc-btn--small.bc-btn--active
Quarterly
%button.bc-btn.bc-btn--small
Yearly
%header.bc-section-header.bc-section-header--unlined.bc-section-header__heading%h5.bc-h5 Participating researchers
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore.
%ul.bc-panels%li.bc-submission-card%a.bc-panel.bc-panel--interactive{href: '/','aria-labelledby':'title-id-3861c017c962e29203b869aa35f83bc8'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-3861c017c962e29203b869aa35f83bc8'}
Programming the port won't do anything, we need to back up the
redundant RSS capacitor!
%p.bc-submission-card__meta%span
Bugcrowd Ongoing
%span
Created on 10/05/2017
%div%span.bc-badge.bc-badge--p1.bc-badge--unconfirmed
P1
%span.bc-badge.bc-badge--new.bc-badge--text
New
.bc-submission-card__footer%div%span.bc-reward.bc-reward--blankstate
Still being assessed
%span.bc-submission-card__notifications
Comments
%span.bc-badge.bc-badge--counter.bc-badge--counter-muted
0
%li.bc-submission-card%a.bc-panel.bc-panel--interactive{href: '/','aria-labelledby':'title-id-e10bb00a074416d61be0f30c1f5017cc'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-e10bb00a074416d61be0f30c1f5017cc'}
We need to back up the digital JBOD microchip!
%p.bc-submission-card__meta%span
Bugcrowd Secret
%span
Created on 10/05/2017
%span
Updated 8 minutes ago
%div%span.bc-badge.bc-badge--p2
P2
%span.bc-badge.bc-badge--duplicate.bc-badge--text
Duplicate
.bc-submission-card__footer%div%span.bc-reward.bc-reward--none
$0
%span.bc-reward.bc-reward--points
10 points
%span.bc-submission-card__notifications
Comments
%span.bc-badge.bc-badge--counter.bc-badge--counter-muted
11
%li.bc-submission-card%a.bc-panel.bc-panel--interactive{href: '/','aria-labelledby':'title-id-54478465ef3fd1c4f32298f413051cb5'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-54478465ef3fd1c4f32298f413051cb5'}
We need to synthesize the wireless CSS pixel!
%p.bc-submission-card__meta%span
Bugcrowd On-demand
%span
Created on 08/30/2017
%span
Updated on 05/10/2018
%div%span.bc-badge.bc-badge--p1
P1
%span.bc-badge.bc-badge--resolved.bc-badge--text
Resolved
.bc-submission-card__footer%div%span.bc-reward
$1,900
%span.bc-reward.bc-reward--points
20 points
%span.bc-submission-card__notifications
Comments
%span.bc-badge.bc-badge--counter.bc-badge--counter-muted
4
%li.bc-submission-card%a.bc-panel.bc-panel--interactive{href: '/','aria-labelledby':'title-id-9600cdcba1120ee65dc5259f86b73a99'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-9600cdcba1120ee65dc5259f86b73a99'}
Compressing the transmitter won’t do anything, we need to calculate
the back-end HDD interface and then manipulate the ROM strings to
get an overflow!
%p.bc-submission-card__meta%span
Bugcrowd Hack Me
%span
Created on 08/30/2017
%span
Updated on 05/10/2018
%div%span.bc-badge.bc-badge--p5
P5
%span.bc-badge.bc-badge--outofscope.bc-badge--text
Out of scope
.bc-submission-card__footer%div%span.bc-reward.bc-reward--none
$0
%span.bc-reward.bc-reward--points.bc-reward--negative−4 points
%span.bc-submission-card__notifications
Comments
%span.bc-badge.bc-badge--counter.bc-badge--counter-muted
3
%li.bc-submission-card%a.bc-panel.bc-panel--interactive{href: '/','aria-labelledby':'title-id-ff4c00d914f549e7d487e61399907e6c'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-ff4c00d914f549e7d487e61399907e6c'}
Try to program the XML pixel, maybe it will override the bluetooth
firewall
%p.bc-submission-card__meta%span
Bugcrowd Ongoing
%span
Created on 9/28/2017
%span
Updated 4 days ago
%div%span.bc-badge.bc-badge--p4.bc-badge--unconfirmed
P4
%span.bc-badge.bc-badge--triaged.bc-badge--text
Triaged
.bc-submission-card__footer%div%span.bc-reward.bc-reward--blankstate
Still being assessed
%span.bc-submission-card__notifications
Comments
%span.bc-badge.bc-badge--counter.bc-badge--counter-muted
14
Variants
--tk variant
Rendered example
of Submission card
Programming the port won’t do anything, we need to back up the
redundant RSS capacitor!
Compressing the transmitter won’t do anything, we need to calculate
the back-end HDD interface and then manipulate the ROM strings to
get an overflow!
08/30/2017
ch1ckenw1ngs
84.1%
Try to program the XML pixel, maybe it will override the bluetooth
firewall
9/28/2017
tommedhurst
99.8%
Haml markup example
of Submission card --tk
.row.col-xs-12.col-md-5.col-lg-4%ul.bc-panels%li.bc-submission-card.bc-submission-card--tk.bc-panel.bc-panel--interactive{role: 'link',tabindex: '0',onclick: '',onkeydown: '','aria-labelledby':'title-id-0da12d78a0c3a46ba0341ce17bc76cc0'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-0da12d78a0c3a46ba0341ce17bc76cc0'}
Programming the port won’t do anything, we need to back up the
redundant RSS capacitor!
.bc-submission-card__meta%span
18 hours ago
%span
ch1ckenw1ngs
%span
100%
.bc-submission-card__footer.bc-submission-card__props.bc-submission-card__state%div%span.bc-badge.bc-badge--p1.bc-badge--unconfirmed
P1
%span.bc-badge.bc-badge--new.bc-badge--text
New
.bc-submission-card__icons%span.bc-badge.bc-badge--counter
1
%span.bc-icon.bc-icon--blocker-created.bc-submission-card__blocker%span Blocker created
%li.bc-submission-card.bc-submission-card--tk.bc-submission-card--tk-selected.bc-panel.bc-panel--interactive{role: 'link',tabindex: '0',onclick: '',onkeydown: '','aria-labelledby':'title-id-3e784b86099c6640e383613fbe3a4b4e'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-3e784b86099c6640e383613fbe3a4b4e'}
We need to back up the digital JBOD microchip!
.bc-submission-card__meta%span
About a week ago
%span
tommedhurst
%span
71.2%
.bc-submission-card__dupe%a.bc-icon.bc-icon--duplicate{href: '#'}
Compressing the transmitter won’t do anythin….bc-submission-card__footer.bc-submission-card__props.bc-submission-card__state%div%span.bc-badge.bc-badge--p2
P2
%span.bc-badge.bc-badge--wontfix.bc-badge--text
Won’t fix
%span.bc-badge.bc-badge--duplicate.bc-badge--text
Duplicate
.bc-submission-card__icons%span.bc-badge.bc-badge--counter
11
%span.bc-icon.bc-icon--blocker-resolved.bc-submission-card__blocker%span Blocker resolved
%li.bc-submission-card.bc-submission-card--tk.bc-panel.bc-panel--interactive{role: 'link',tabindex: '0',onclick: '',onkeydown: '','aria-labelledby':'title-id-182a4df2eed3fe18647f40c7b9203c8f'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-182a4df2eed3fe18647f40c7b9203c8f'}
We need to synthesize the wireless CSS pixel!
.bc-submission-card__meta%span
08/30/2017
%span
faykus
%span
49.8%
.bc-submission-card__footer%div%span.bc-badge.bc-badge--p1
P1
%span.bc-badge.bc-badge--resolved.bc-badge--text
Resolved
%div%span.bc-badge.bc-badge--counter
4
%li.bc-submission-card.bc-submission-card--tk.bc-panel.bc-panel--interactive{role: 'link',tabindex: '0',onclick: '',onkeydown: '','aria-labelledby':'title-id-bc3875ad67b03af6989a43afbe4c7ff2'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-bc3875ad67b03af6989a43afbe4c7ff2'}
Compressing the transmitter won’t do anything, we need to calculate
the back-end HDD interface and then manipulate the ROM strings to
get an overflow!
.bc-submission-card__meta%span
08/30/2017
%span
ch1ckenw1ngs
%span
84.1%
.bc-submission-card__footer%div%span.bc-badge.bc-badge--p5
P5
%span.bc-badge.bc-badge--outofscope.bc-badge--text
Out of scope
%div%span.bc-badge.bc-badge--counter
3
%li.bc-submission-card.bc-submission-card--tk.bc-panel.bc-panel--interactive{role: 'link',tabindex: '0',onclick: '',onkeydown: '','aria-labelledby':'title-id-b4d1747d9976dd6cd94dbac011884b64'}.bc-submission-card__main%h3.bc-submission-card__title{id: 'title-id-b4d1747d9976dd6cd94dbac011884b64'}
Try to program the XML pixel, maybe it will override the bluetooth
firewall
.bc-submission-card__meta%span
9/28/2017
%span
tommedhurst
%span
99.8%
.bc-submission-card__footer%div%span.bc-badge.bc-badge--p4.bc-badge--unconfirmed
P4
%span.bc-badge.bc-badge--triaged.bc-badge--text
Triaged
%div%span.bc-badge.bc-badge--counter
14
Versatile avatars with names/titles and associated metadata.
Use to group avatar, name, and metadata together, in table cells, lists, and in large ‘hero’ panes.
Userblock features
__title class for the primary data point (usually the user’s name)
__meta optional class for additional <small> data points
__actions optional class for call-to-action functions
.bc-userblocks plural container class for multiple userblocks.
.bc-userblock vertically centers its contents, therefore it is up to
implementers to make sure the size of .bc-avatar aligns well with the content.
Userblock usage
Userblocks within data tables aligns avatars with titles. Avatars are aligned to the top of the block when additional data points are added.
Data-table support: Do not use –lg/–xl userblock variants in bc-table.
TODO:
add note about using in:
tables
lists (plural)
panels
add note about using the Avatar component dependency and its variants
…?
Userblock dependencies
.bc-avatar
Rendered example
of Userblock
Userblocks (list)
DarkieDuck
RebeccaPurple
86.7%
Estonia
deleted_user(0001) (deactivated)
Removed from program
Mongo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae non
provident minima! Fugiat pariatur debitis ea officia perferendis dolor
rerum veritatis aspernatur, delectus blanditiis tempore sint incidunt
rem quas in.
86.7%
Congo
ID verified
Background-checked
Singular userblock, in --xl
Mongo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
86.7%
Congo
ID verified
Background-checked
Userblocks in a panel
DarkieDuck
56.8%
Australia
Someone writes a
team note
or a researcher
replies
Receive sporadic
ponies
Userblocks in a data table
Researcher
Valid submissions
Total submissions
Last submitted
Credentials
DarkieDuck
56.8%
Costa Rica
18
20
7 months ago
arcwhite
86.3%
Australia
1000
1337
2 weeks ago
caseyjohnellis
56.8%
Australia
90
100
3 hours ago
Mongo
86.3%
Congo
95
100
5 months ago
Haml markup example
of Userblock
%span.bc-h5 Userblocks (list)
%ul.bc-userblocks%li.bc-userblock%img.bc-avatar.bc-avatar--sm.bc-avatar{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
DarkieDuck
.bc-userblock__actions%button.bc-btn.bc-btn--small.bc-btn--secondary
Add
%button.bc-btn.bc-btn--small.bc-btn--tertiary
Remove
%li.bc-userblock%img.bc-avatar.bc-avatar{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
RebeccaPurple
.bc-userblock__meta%small 86.7%
%small Estonia
.bc-userblock__actions%button.bc-btn.bc-btn--small.bc-btn--secondary
Add
%button.bc-btn.bc-btn--small.bc-btn--tertiary
Remove
%li.bc-userblock.bc-userblock--lg%img.bc-avatar.bc-avatar--lg{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
deleted_user(0001) (deactivated)
.bc-userblock__meta%small
Removed from program
.bc-userblock__actions%button.bc-btn.bc-btn--secondary
Add
%button.bc-btn.bc-btn--tertiary
Remove
%li.bc-userblock.bc-userblock--xl%img.bc-avatar.bc-avatar--xl{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%h2.bc-userblock__title
Mongo
.bc-userblock__meta%p
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae non
provident minima! Fugiat pariatur debitis ea officia perferendis dolor
rerum veritatis aspernatur, delectus blanditiis tempore sint incidunt
rem quas in.
%small 86.7%
%small Congo
%span.bc-icon.bc-icon--success
ID verified
%span.bc-icon.bc-icon--success
Background-checked
%span.bc-h5 Singular userblock, in --xl
.bc-userblock.bc-userblock--xl%img.bc-avatar.bc-avatar--xl{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%h2.bc-userblock__title
Mongo
.bc-userblock__meta%p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
%small 86.7%
%small Congo
%span.bc-icon.bc-icon--success
ID verified
%span.bc-icon.bc-icon--success
Background-checked
%span.bc-h5 Userblocks in a panel
.row.col-xs-12.col-md-8%ul.bc-userblocks%li.bc-panel.bc-panel--shadow.bc-panel--action.bc-panel__header.bc-userblock%img.bc-avatar.bc-avatar--lg{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
DarkieDuck
.bc-userblock__meta%small 56.8%
%small Australia
.bc-userblock__actions.bc-switch-input.bc-switch-input--justify%label.bc-switch-input__inline-label{for: 'switch-block'}%span.bc-label
Public researcher profile
.bc-switch-input__toggle%input.bc-switch-input__switch{name: 'switch',type: 'checkbox',id: 'switch-block'}%span.bc-switch-input__switch-text.bc-switch-input__switch-text--hidden
Turn this setting
%span.bc-switch-input__on On
%span.bc-switch-input__off Off
.bc-panel__main%ul.bc-setting-list%li.bc-setting-list__item.bc-switch-input.bc-switch-input--justify%label.bc-switch-input__inline-label{for: 'userblock__switch-block-eg1'}%span.bc-label
Activity on
%strong subscribed
submissions
.bc-switch-input__toggle%input.bc-switch-input__switch(checked){name: 'switch',type: 'checkbox',id: 'userblock__switch-block-eg1'}%span.bc-switch-input__switch-text
Turn this setting
%span.bc-switch-input__on On
%span.bc-switch-input__off Off
%li.bc-setting-list__item.bc-switch-input.bc-switch-input--justify%label.bc-switch-input__inline-label{for: 'userblock__switch-block-eg2'}%span.bc-label
Team members
%strong @mention
me
.bc-switch-input__toggle%input.bc-switch-input__switch{name: 'switch',type: 'checkbox',id: 'userblock__switch-block-eg2'}%span.bc-switch-input__switch-text
Turn this setting
%span.bc-switch-input__on On
%span.bc-switch-input__off Off
%li.bc-setting-list__item.bc-switch-input.bc-switch-input--justify%label.bc-switch-input__inline-label{for: 'userblock__switch-block-eg3'}%span.bc-label
I’m
%strong assigned
to a submission
.bc-switch-input__toggle%input.bc-switch-input__switch(checked){name: 'switch',type: 'checkbox',id: 'userblock__switch-block-eg3'}%span.bc-switch-input__switch-text
Turn this setting
%span.bc-switch-input__on On
%span.bc-switch-input__off Off
%li.bc-setting-list__item%label.bc-setting-list__control-input-label{for: 'userblock__checkbox-spiders'}.bc-setting-list__item-text%span.bc-label
Receive sporadic
%strong spiders
.bc-setting-list__item-controls%span.bc-control-input.bc-control-input--unlabelled%input.bc-control-input__input{name: 'userblock__checkbox-spiders',type: 'checkbox',id: 'userblock__checkbox-spiders','aria-label':'userblock__checkbox-spiders'}%span.bc-control-input__label-text%li.bc-setting-list__item{role: 'group','aria-describedby':'userblock__setting__team-or-researcher-notification-types'}.bc-setting-list__item-text{id: 'userblock__setting__team-or-researcher-notification-types'}%span.bc-label
Someone writes a
%strong team note
or a researcher
%strong replies
.bc-setting-list__item-controls%label.bc-control-input%input.bc-control-input__input(checked){name: 'checkbox-web',type: 'checkbox','aria-describedby':'userblock__setting__team-or-researcher-notification-types'}%span.bc-control-input__label-text
Web
%label.bc-control-input%input.bc-control-input__input{name: 'checkbox-email',type: 'checkbox','aria-describedby':'userblock__setting__team-or-researcher-notification-types'}%span.bc-control-input__label-text
Email
%li.bc-setting-list__item{role: 'group','aria-describedby':'userblock__setting__ponies'}.bc-setting-list__item-text{id: 'userblock__setting__ponies'}%span.bc-label
Receive sporadic
%strong ponies
.bc-setting-list__item-controls%label.bc-control-input%input.bc-control-input__input{name: 'sporadic-ponies__off',type: 'radio','aria-describedby':'userblock__setting__ponies'}%span.bc-control-input__label-text
Off
%label.bc-control-input%input.bc-control-input__input(checked){name: 'sporadic-ponies__on',type: 'radio','aria-describedby':'userblock__setting__ponies'}%span.bc-control-input__label-text
On
%span.bc-h5 Userblocks in a data table
.bc-table.bc-table--hover%table%thead%tr%th Researcher
%th Valid submissions
%th Total submissions
%th Last submitted
%th Credentials
%tbody%tr%td{data: {label: 'researcher'}}.bc-userblock%img.bc-avatar{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
DarkieDuck
.bc-userblock__meta%small 56.8%
%small Costa Rica
%td{data: {label: 'Valid submissions'}} 18
%td{data: {label: 'Total submissions'}} 20
%td{data: {label: 'Last submitted'}} 7 months ago
%td{data: {label: 'Credentials'}}%button.bc-btn.bc-btn--small.bc-btn--secondary
Assign
%tr%td{data: {label: 'researcher'}}.bc-userblock%img.bc-avatar{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
arcwhite
.bc-userblock__meta%small 86.3%
%small Australia
%td{data: {label: 'Valid submissions'}} 1000
%td{data: {label: 'Total submissions'}} 1337
%td{data: {label: 'Last submitted'}} 2 weeks ago
%td{data: {label: 'Credentials'}}%button.bc-btn.bc-btn--small.bc-btn--secondary
Assign
%tr%td{data: {label: 'researcher'}}.bc-userblock%img.bc-avatar{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
caseyjohnellis
.bc-userblock__meta%small 56.8%
%small Australia
%td{data: {label: 'Valid submissions'}} 90
%td{data: {label: 'Total submissions'}} 100
%td{data: {label: 'Last submitted'}} 3 hours ago
%td{data: {label: 'Credentials'}}%button.bc-btn.bc-btn--small.bc-btn--secondary
Assign
%tr%td{data: {label: 'researcher'}}.bc-userblock%img.bc-avatar{src: '/assets/profile-tmp.png',alt: 'User-name avatar'}.bc-userblock__main%span.bc-userblock__title
Mongo
.bc-userblock__meta%small 86.3%
%small Congo
%td{data: {label: 'Valid submissions'}} 95
%td{data: {label: 'Total submissions'}} 100
%td{data: {label: 'Last submitted'}} 5 months ago
%td{data: {label: 'Credentials'}}%button.bc-btn.bc-btn--small.bc-btn--secondary
Assign