Bugcrowd design system: Containers

This version of the documentation is locked from receiving updates. We’re improving it as part of a wider site restructure. Please check back soon.

Containers are wrappers for other elements.

The re-implementation of Bootstrap’s grid system is included herein.

Accordions

Guidance last updated: Sep 4, 2023

Interactive, at default collapsed content blocks that expand upon toggling their title.

Use accordions to hide some content in complex designs where the accordion’s content is important but not vital to be displayed initially.

Title support: the accordion title content is currently built to rely on the padding offset of the Icon Component. If .bc-icon isn’t used the title will be out of alignment with the accordion main body content.

Accordions are provided as a React component (BcAccordion).

Guidance on multiple accordions

You can group accordions, ideally in a list. When doing so give your list container (the <ul> or <ol>) an ARIA role of tablist. Place the accordion component inside the list item (<li>).

Accordions receive the .bc-accordion and .bc-panel classes. This means you can in part style them as a group via .bc-panels plural class and its variants.

Remember to pass unique IDs to each accordion.

Users can open multiple accordions simultaneously (this component does not close other already open accordions).

Possible feature idea: it may be desirable to provide bulk open/close functionality for large groups of accordions.

Open accordions on initial load

Accordions can add friction to accessing information and navigating a user interface.

Accordions can be set to be open by default by providing the openOnLoad property.

It is important to retain discoverability when placing user interface controls within an accordion.

For example: when providing retry buttons to a list of events that have fired, consider having the most recent event’s data and controls already open upon page-load. This way the open accordion’s content allude to the respective controls within each of the subsequent events that are closed in the accordion list.

Rendered example of Accordions

Haml markup example of Accordions

%div{'data-react-class': 'AccordionExample'}

Expandable section

Guidance last updated: Sep 4, 2023

An interactive content container that shows a short preview of the content and hides vertically overflowing content that can be expanded by toggling a button.

Use to provide a short preview of content where the full content is important but not vital to be displayed initially.

Do not hide content that requires user input. These UI patterns should always be immediately visible to the user.

Expandable section React component propTypes

Expandable sections are provided as a React component (BcExpandable).

Expandable section properties:

Prop Type Default Description
height number 200 The maximum height in px (max-height) of the component before content truncates
expandLabel string Show more The expand action button text
collapseLabel string Show less The collapse action button text
wrapperClass string Parent container custom class
containerId string A unique identifier for the container, used to semantically associate the button to the content
children node The markup/content body of the expandable section
buttonContainerStyles object The button container custom inline CSS

The containerId is required.

Primary header

Guidance last updated: Sep 4, 2023

The main header of a page.

The header container holds the Navbar and AVM banner alerts when they spawn.

Header container positioning

The container is set to position: fixed and has a z-index of overlay.

This means the next ‘container’ element that follows after the <header> must receive an offset commensurate in height (at all breakpoints) to ensure that page content is not obscured by the header.

.bc-header handles this by pushing the <main> element down (via a general CSS sibling selector).

When the AVM banner spawns the height of the header increases. To account for this a variant class (.bc-header--avm-active) is provided. Apply this class on AVM spawn to the <header>. This increases the offset for <main> commensurate to the additional height the AVM banner adds to the header.

Header container test file

Two test files are provided to properly test the fixed positioning and z-index:

(These include the Navbar, and AVM banner in the case of Tracker.)

Syntax highlighting

Guidance last updated: Sep 4, 2023

A wrapper for applying syntax highlighting to code blocks.

Rouge is used to power this feature, both here in the docs and in the application allowing researchers and ASEs alike to use this feature in Markdown-parsed <textarea> inputs.

Syntax highlighting usage

The highlighter will parse and apply highlight styles via CSS classes to fenced code blocks that have a language specified, eg

``` ruby
def what?
  42
end
```

would yield:

def what?
  42
end

Syntax highlighting CSS classes

Note that for compatibility reasons this feature does not require the common .bc- class prefix for its .highlight and .language-$lang classes.

Markdown

Guidance last updated: Sep 4, 2023

A wrapper for styling rendered Markdown.

Style guidance

  • Use --bordered variant for Markdown comments shown in activity feed. Its default style is for comments visible to everyone involved in a submission.
  • Use --private variant for Markdown comments visible only between 2 users.
  • Use --bugcrowd-internal variant for Markdown comments only visible to the Bugcrowd team.

Example test file below adapted from John Gruber’s Markdown Syntax page.

Rendered example of Markdown

Markdown: Syntax

Overview

Philosophy

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions. While Markdown's syntax has been influenced by several existing text-to-HTML filters – including Setext, atx, Textile, reStructuredText, Grutatext, and EtText – the single biggest source of inspiration for Markdown's syntax is the format of plain text email.

Block Elements

Paragraphs and Line Breaks

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line – a line containing nothing but spaces or tabs is considered blank.) Normal paragraphs should not be indented with spaces or tabs.

The implication of the "one or more consecutive lines of text" rule is that Markdown supports "hard-wrapped" text paragraphs. This differs significantly from most other text-to-HTML formatters (including Movable Type's "Convert Line Breaks" option) which translate every line break character in a paragraph into a <br /> tag.

When you do want to insert a <br /> break tag using Markdown, you end a line with two or more spaces, then type return.

Headers

Markdown supports two styles of headers, [Setext] [1] and [atx] [2].

Optionally, you may "close" atx-style headers. This is purely cosmetic – you can use this if you think it looks better. The closing hashes don't even need to match the number of hashes used to open the header. (The number of opening hashes determines the header level.)

Blockquotes

Markdown uses email-style > characters for blockquoting. If you're familiar with quoting passages of text in an email message, then you know how to create a blockquote in Markdown. It looks best if you hard wrap the text and put a > before every line:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown allows you to be lazy and only put the > before the first line of a hard-wrapped paragraph:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of >:

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

Blockquotes can contain other Markdown elements, including headers, lists, and code blocks:

This is a header

  1. This is the first list item
  2. This is the second list item

Here's some example code:

return shell_exec("echo $input | $markdown_script");

Any decent text editor should make email-style quoting easy. For example, with BBEdit, you can make a selection and choose Increase Quote Level from the Text menu.

Lists

Markdown supports ordered (numbered) and unordered (bulleted) lists.

Unordered lists use asterisks, pluses, and hyphens – interchangably – as list markers:

  • Red
  • Green
  • Blue

is equivalent to:

  • Red
  • Green
  • Blue

and:

  • Red
  • Green
  • Blue

Ordered lists use numbers followed by periods:

  1. Bird
  2. McHale
  3. Parish

It's important to note that the actual numbers you use to mark the list have no effect on the HTML output Markdown produces. The HTML Markdown produces from the above list is:

If you instead wrote the list in Markdown like this:

  1. Bird
  2. McHale
  3. Parish

or even:

  1. Bird
  2. McHale
  3. Parish

you'd get the exact same HTML output. The point is, if you want to, you can use ordinal numbers in your ordered Markdown lists, so that the numbers in your source match the numbers in your published HTML. But if you want to be lazy, you don't have to.

To make lists look nice, you can wrap items with hanging indents:

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
  • Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

But if you want to be lazy, you don't have to:

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
  • Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

  1. This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

  2. Suspendisse id sem consectetuer libero luctus adipiscing.

It looks nice if you indent every line of the subsequent paragraphs, but here again, Markdown will allow you to be lazy:

  • This is a list item with two paragraphs.

    This is the second paragraph in the list item. You're only required to indent the first line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • Another item in the same list.

To put a blockquote within a list item, the blockquote's > delimiters need to be indented:

  • A list item with a blockquote:

    This is a blockquote inside a list item.

To put a code block within a list item, the code block needs to be indented twice – 8 spaces or two tabs:

  • A list item with a code block:

    <code goes here>
    

Code Blocks

Pre-formatted code blocks are used for writing about programming or markup source code. Rather than forming normal paragraphs, the lines of a code block are interpreted literally. Markdown wraps a code block in both <pre> and <code> tags.

To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.

This is a normal paragraph:

This is a code block.

Here is an example of AppleScript:

tell application "Foo"
    beep
end tell

A code block continues until it reaches a line that is not indented (or the end of the article).

Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities. This makes it very easy to include example HTML source code using Markdown – just paste it and indent it, and Markdown will handle the hassle of encoding the ampersands and angle brackets. For example, this:

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Regular Markdown syntax is not processed within code blocks. E.g., asterisks are just literal asterisks within a code block. This means it's also easy to use Markdown to write about Markdown's own syntax.

```
tell application "Foo"
    beep
end tell
```

Tables

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1

Horizontal rule


Inline/span Elements

Markdown supports two style of links: inline and reference.

In both styles, the link text is delimited by [square brackets].

To create an inline link, use a set of regular parentheses immediately after the link text's closing square bracket. Inside the parentheses, put the URL where you want the link to point, along with an optional title for the link, surrounded in quotes. For example:

This is an example inline link.

This link has no title attribute.

Links missing a href or ones without a value won’t receive link styles, eg: dead link.

Emphasis

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. Text wrapped with one * or _ will be wrapped with an HTML <em> tag; double *'s or _'s will be wrapped with an HTML <strong> tag. E.g., this input:

single asterisks

single underscores

double asterisks

double underscores

Code

To indicate a span of code, wrap it with backtick quotes (`). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:

Use the printf() function.

Images

User-name avatar

Haml markup example of Markdown

.bc-markdown
  :markdown
    # Markdown: Syntax

    ## Overview

    ### Philosophy

    Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

    Readability, however, is emphasized above all else. A Markdown-formatted
    document should be publishable as-is, as plain text, without looking
    like it's been marked up with tags or formatting instructions. While
    Markdown's syntax has been influenced by several existing text-to-HTML
    filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html),
    [Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of
    inspiration for Markdown's syntax is the format of plain text email.

    ## Block Elements

    ### Paragraphs and Line Breaks

    A paragraph is simply one or more consecutive lines of text, separated
    by one or more blank lines. (A blank line is any line that looks like a
    blank line -- a line containing nothing but spaces or tabs is considered
    blank.) Normal paragraphs should not be indented with spaces or tabs.

    The implication of the "one or more consecutive lines of text" rule is
    that Markdown supports "hard-wrapped" text paragraphs. This differs
    significantly from most other text-to-HTML formatters (including Movable
    Type's "Convert Line Breaks" option) which translate every line break
    character in a paragraph into a `<br />` tag.

    When you *do* want to insert a `<br />` break tag using Markdown, you
    end a line with two or more spaces, then type return.

    ### Headers

    Markdown supports two styles of headers, [Setext] [1] and [atx] [2].

    Optionally, you may "close" atx-style headers. This is purely
    cosmetic -- you can use this if you think it looks better. The
    closing hashes don't even need to match the number of hashes
    used to open the header. (The number of opening hashes
    determines the header level.)


    ### Blockquotes

    Markdown uses email-style `>` characters for blockquoting. If you're
    familiar with quoting passages of text in an email message, then you
    know how to create a blockquote in Markdown. It looks best if you hard
    wrap the text and put a `>` before every line:

    > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
    > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
    > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
    >
    > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
    > id sem consectetuer libero luctus adipiscing.

    Markdown allows you to be lazy and only put the `>` before the first
    line of a hard-wrapped paragraph:

    > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

    > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
    id sem consectetuer libero luctus adipiscing.

    Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
    adding additional levels of `>`:

    > This is the first level of quoting.
    >
    > > This is nested blockquote.
    >
    > Back to the first level.

    Blockquotes can contain other Markdown elements, including headers, lists,
    and code blocks:

    > ## This is a header
    >
    > 1.   This is the first list item
    > 2.   This is the second list item
    >
    > Here's some example code:
    >
    >     return shell_exec("echo $input | $markdown_script");

    Any decent text editor should make email-style quoting easy. For
    example, with BBEdit, you can make a selection and choose Increase
    Quote Level from the Text menu.


    ### Lists

    Markdown supports ordered (numbered) and unordered (bulleted) lists.

    Unordered lists use asterisks, pluses, and hyphens -- interchangably
    -- as list markers:

    *   Red
    *   Green
    *   Blue

    is equivalent to:

    +   Red
    +   Green
    +   Blue

    and:

    -   Red
    -   Green
    -   Blue

    Ordered lists use numbers followed by periods:

    1.  Bird
    2.  McHale
    3.  Parish

    It's important to note that the actual numbers you use to mark the
    list have no effect on the HTML output Markdown produces. The HTML
    Markdown produces from the above list is:

    If you instead wrote the list in Markdown like this:

    1.  Bird
    1.  McHale
    1.  Parish

    or even:

    3. Bird
    1. McHale
    8. Parish

    you'd get the exact same HTML output. The point is, if you want to,
    you can use ordinal numbers in your ordered Markdown lists, so that
    the numbers in your source match the numbers in your published HTML.
    But if you want to be lazy, you don't have to.

    To make lists look nice, you can wrap items with hanging indents:

    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
        viverra nec, fringilla in, laoreet vitae, risus.
    *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
        Suspendisse id sem consectetuer libero luctus adipiscing.

    But if you want to be lazy, you don't have to:

    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
    *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.

    List items may consist of multiple paragraphs. Each subsequent
    paragraph in a list item must be indented by either 4 spaces
    or one tab:

    1.  This is a list item with two paragraphs. Lorem ipsum dolor
        sit amet, consectetuer adipiscing elit. Aliquam hendrerit
        mi posuere lectus.

        Vestibulum enim wisi, viverra nec, fringilla in, laoreet
        vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
        sit amet velit.

    2.  Suspendisse id sem consectetuer libero luctus adipiscing.

    It looks nice if you indent every line of the subsequent
    paragraphs, but here again, Markdown will allow you to be
    lazy:

    *   This is a list item with two paragraphs.

        This is the second paragraph in the list item. You're
    only required to indent the first line. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit.

    *   Another item in the same list.

    To put a blockquote within a list item, the blockquote's `>`
    delimiters need to be indented:

    *   A list item with a blockquote:

        > This is a blockquote
        > inside a list item.

    To put a code block within a list item, the code block needs
    to be indented *twice* -- 8 spaces or two tabs:

    *   A list item with a code block:

            <code goes here>

    ### Code Blocks

    Pre-formatted code blocks are used for writing about programming or
    markup source code. Rather than forming normal paragraphs, the lines
    of a code block are interpreted literally. Markdown wraps a code block
    in both `<pre>` and `<code>` tags.

    To produce a code block in Markdown, simply indent every line of the
    block by at least 4 spaces or 1 tab.

    This is a normal paragraph:

        This is a code block.

    Here is an example of AppleScript:

        tell application "Foo"
            beep
        end tell

    A code block continues until it reaches a line that is not indented
    (or the end of the article).

    Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
    are automatically converted into HTML entities. This makes it very
    easy to include example HTML source code using Markdown -- just paste
    it and indent it, and Markdown will handle the hassle of encoding the
    ampersands and angle brackets. For example, this:

        <div class="footer">
            &copy; 2004 Foo Corporation
        </div>

    Regular Markdown syntax is not processed within code blocks. E.g.,
    asterisks are just literal asterisks within a code block. This means
    it's also easy to use Markdown to write about Markdown's own syntax.

        ```
        tell application "Foo"
            beep
        end tell
        ```

    ### Tables

    | Tables   |      Are      |  Cool |
    |----------|:-------------:|------:|
    | col 1 is |  left-aligned | $1600 |
    | col 2 is |    centered   |   $12 |
    | col 3 is | right-aligned |    $1 |


    ### Horizontal rule

    ---


    ## Inline/span Elements

    ### Links

    Markdown supports two style of links: *inline* and *reference*.

    In both styles, the link text is delimited by [square brackets].

    To create an inline link, use a set of regular parentheses immediately
    after the link text's closing square bracket. Inside the parentheses,
    put the URL where you want the link to point, along with an *optional*
    title for the link, surrounded in quotes. For example:

    This is [an example](http://example.com/) inline link.

    [This link](http://example.net/) has no title attribute.

    Links missing a `href` or ones without a value won’t receive link styles, eg: [dead link]().


    ### Emphasis

    Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
    emphasis. Text wrapped with one `*` or `_` will be wrapped with an
    HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
    `<strong>` tag. E.g., this input:

    *single asterisks*

    _single underscores_

    **double asterisks**

    __double underscores__


    ### Code

    To indicate a span of code, wrap it with backtick quotes (`` ` ``).
    Unlike a pre-formatted code block, a code span indicates code within a
    normal paragraph. For example:

    Use the `printf()` function.


    ### Images

    ![User-name avatar](/assets/profile-tmp.png)

Variants

--bordered variant

Rendered example of Markdown

This is the content of a public message visible to everyone involved in the submission.

Hi cornelius,

Great find! Thanks for reporting the issue to us and for the detailed report. The SQL reporting service which was responsible for the vulnerability was taken offline, I filed the other ticket as duplicate since both hosts were pointing to the same vulnerable service.

Happy hunting!


More (color) test content…

Code inside a paragraph test: 🤖 "bleep bloop"

  • foo
  • bar
  • baz

Code block:

code…
    block…
…test

Table:

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1

Blockquote…

Haml markup example of Markdown --bordered
.bc-markdown.bc-markdown--bordered
  :markdown
    *This is the content of a public message visible to everyone involved in the submission.*

    Hi **cornelius**,

    Great find! Thanks for reporting the issue to us and for the detailed report. The SQL reporting service which was responsible for the vulnerability was taken offline, I filed the other ticket as duplicate since both hosts were pointing to the same vulnerable service.

    Happy hunting!

    ***

    **More (color) test content…**

    Code inside a paragraph test: `🤖 "bleep bloop"`

    - `foo`
    - `bar`
    - `baz`

    Code block:

        code…
            block…
        …test

    Table:

    | Tables     |      Are      |  Cool |
    |------------|:-------------:|------:|
    | col `1` is |  left-aligned | $1600 |
    | col `2` is |    centered   |   $12 |
    | col `3` is | right-aligned |    $1 |

    > Blockquote…

--private variant

Rendered example of Markdown

This is the content of a private message visible only between 2 user types.

Hi cornelius,

Great find! Thanks for reporting the issue to us and for the detailed report. The SQL reporting service which was responsible for the vulnerability was taken offline, I filed the other ticket as duplicate since both hosts were pointing to the same vulnerable service.

Happy hunting!


More (color) test content…

Code inside a paragraph test: 🤖 "bleep bloop"

  • foo
  • bar
  • baz

Code block:

code…
    block…
…test

Table:

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1

Blockquote…

Haml markup example of Markdown --private
.bc-markdown.bc-markdown--bordered.bc-markdown--private
  :markdown
    *This is the content of a private message visible only between 2 user types.*

    Hi **cornelius**,

    Great find! Thanks for reporting the issue to us and for the detailed report. The SQL reporting service which was responsible for the vulnerability was taken offline, I filed the other ticket as duplicate since both hosts were pointing to the same vulnerable service.

    Happy hunting!

    ***

    **More (color) test content…**

    Code inside a paragraph test: `🤖 "bleep bloop"`

    - `foo`
    - `bar`
    - `baz`

    Code block:

        code…
            block…
        …test

    Table:

    | Tables     |      Are      |  Cool |
    |------------|:-------------:|------:|
    | col `1` is |  left-aligned | $1600 |
    | col `2` is |    centered   |   $12 |
    | col `3` is | right-aligned |    $1 |

    > Blockquote…

--bugcrowd-internal variant

Rendered example of Markdown

This is the content of an internal note visible only to Bugcrowd team.

Hey team,

Great meeting with customer team! Please add your meeting notes regarding this submission here.


More (color) test content…

Code inside a paragraph test: 🤖 "bleep bloop"

  • foo
  • bar
  • baz

Code block:

code…
    block…
…test

Table:

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1

Blockquote…

Haml markup example of Markdown --bugcrowd-internal
.bc-markdown.bc-markdown--bordered.bc-markdown--bugcrowd-internal
  :markdown
    *This is the content of an internal note visible only to Bugcrowd team.*

    Hey **team**,

    Great meeting with customer team! Please add your meeting notes regarding this submission here.

    ***

    **More (color) test content…**

    Code inside a paragraph test: `🤖 "bleep bloop"`

    - `foo`
    - `bar`
    - `baz`

    Code block:

        code…
            block…
        …test

    Table:

    | Tables     |      Are      |  Cool |
    |------------|:-------------:|------:|
    | col `1` is |  left-aligned | $1600 |
    | col `2` is |    centered   |   $12 |
    | col `3` is | right-aligned |    $1 |

    > Blockquote…

Modals

Guidance last updated: Sep 12, 2023

Modals are in-page popups that hold actions or information directly subordinate to the page.

The Design System’s modals are powered by a component that wraps react-modal, applies our styles, and maps the opening and closing of the modal to redux actions.

Modal usage guidance

Don’t use use modals

  • For features that could exist easily within the page
  • For stepped process flows
  • For documentation
  • For interstitials
  • As a decluttering strategy.

Documentation exception cases may include providing a keyboard shortcut cheat sheet.

Do use modals

  • For process steps that avoid interrupting the workflow of the application
  • For process steps that require an action before being able to resume regular usage of the application
  • As an additional step [often the final step] to warn users of important or irrevocable actions.

Modal buttons

If a modal has functionality that either creates, updates, or deletes anything use ‘Cancel’ as the close button text string.

Use the most applicable term for the confirm action button text string, eg

  • ‘Save’
  • ‘Save as duplicate’
  • ‘Confirm account deletion’
  • ‘Reward researcher’.

Informational modals should simply have a single ‘Close’ button.

The confirm button should align to the right side of the footer after the cancel button.

Applying custom styles to modals

You can pass additional custom classes via the className prop to into the bc-modal container.

Use custom classes primarily to style custom modal body content.

Careful: avoid overriding the main wrapper classes of the modal component (eg .bc-overlay, .bc-modal, .bc-modal__header, et cetera).

Additional setup

aria-hidden and setAppElement

When the model is open, the aria-hidden attribute needs to be applied to the rest of the background content so assistive technologies know to ignore that information.

You will need to have a container element, inside <body>, that contains all the content on the page, with a unique ID. This means your DOM structure will look something like:

<body>
  <div id="content">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</body>

Then you need to tell the modal component which element to add aria-hidden to. This must be done only once and it needs to happen before any modals are rendered.

Modal.setAppElement('#content')

Now when the modal is opened, your DOM structure will look something like:

<html>
  <head>...</head>
  <body class="ReactModal__Body--open">
    <div id="content" aria-hidden="true">
      <header>...</header>
      <main>...</main>
      <footer>...</footer>
    </div>
    <div>...modal stuff...</div>
  </body>
</html>

Modal sizing and browser support

Modal defaults

The default modal scales in total height with the content.

If the modal’s main content extends to a height greater than the current viewport, the main space will receive a scroll bar.

The modal’s footer will always be positioned (absolute) at the bottom of the modal and thus visible to the user even if the main content or viewport trigger scroll bars.

The current default and --sm variant modals have scrolling issues in IE11.

Large modal variant

This variant spawns with a height equal to 90% of the viewport [height].

Use this modal if you know you will load a considerable amount of content into the modal’s __main, eg Tracker’s ‘De-duplication’ modal in Submission Inbox.

This modal variant does support scrolling for IE11 unlike the others.

Small modal variant

This variant spawns with a smaller width, closer to the top of the page.

It scales in height automatically.

Use this modal for confirmation checks on irrevocable actions, or alternatively the default size if the modal itself holds further actions.

Rendered example of Modals

Haml markup example of Modals

%div{'data-react-class': 'ModalExample'}

Variants

--lg variant

Rendered example of Modals
Haml markup example of Modals --lg
%div{'data-react-class': 'ModalExampleLarge'}

--sm variant

Rendered example of Modals
Haml markup example of Modals --sm
%div{'data-react-class': 'ModalExampleSmall'}

Panels

Guidance last updated: Sep 4, 2023

Flexible containers for info panes and various interactive widgets.

Panels are multi-purpose containers for a variety of content.

Use a panel to contain and wrap content and related UI components both in the main content space, or in a sidebar.

Use the --action variant if your panel contains interactive elements, eg a form. There is a --lined variant that is identical in style to the action variant (bordered header and footer) which is offered for semantic reasons.

The title of the panel has one fixed font-size.

Panels container class

There is a [plural] .bc-panels container class that provides a wrapper for a group of panels.

It has one variant: .bc-panels--tiled, which uses flexbox to provide a tiled layout. You’ll need to use the Grid container classes to define the grid setup.

Rendered example of Panels

Need help?

View documentation

Our support team is available 9am to 5pm, Monday to Friday PST. Please send us an email if you need assistance!

Email support@bugcrowd.com

Haml markup example of Panels

.bc-panel
  .bc-panel__header
    %span.bc-panel__title
      Need help?
  .bc-panel__main
    %p
      %a{href: 'https://docs.bugcrowd.com/'}
        View documentation
    %p
      Our support team is available 9am to 5pm, Monday to Friday PST. Please
      send us an email if you need assistance!
    %p
      Email
      %a{href: 'mailto:support@bugcrowd.com'}
        support@bugcrowd.com

Variants

--action variant

Rendered example of Panels
Invite a team member

Be careful who you invite as new members will be able to see vulnerability information.

Haml markup example of Panels --action
%form.bc-panel.bc-panel--action
  .bc-panel__header
    %span.bc-panel__title
      Invite a team member
  .bc-panel__main
    .email
      %label.bc-label{for: 'example--panel-email'}
        Their email adddress:
      %input.bc-text-input.bc-text-input--block{name: 'example--panel-email', id: 'example--panel-email', type: 'text', placeholder: 'recipient@domain.com'}
    .role
      %label.bc-label{for: 'example--panel-dropdown'}
        User role:
      .bc-dropdown.bc-dropdown--block
        %select{id: 'example--panel-dropdown', class: 'bc-dropdown__select'}
          %option{value: '1'}
            Viewer
          %option{value: '1'}
            Analyst
          %option{value: '3'}
            Admin
    .bc-page-alert.bc-page-alert--warning.bc-page-alert--small
      %p
        Be careful who you invite as new members will be able to see vulnerability information.
  .bc-panel__footer
    %button.bc-btn.bc-btn.bc-btn--small(disabled)
      Invite
    %button.bc-btn.bc-btn--tertiary.bc-btn--small
      Cancel

--shadow variant

Rendered example of Panels
Confirm program access

You are entering staff mode. We won’t ask for confirmation again until the session expires.

Haml markup example of Panels --shadow
.bc-panel.bc-panel--shadow.bc-panel--lined
  .bc-panel__header
    %span.bc-panel__title
      Confirm program access
  .bc-panel__main
    %p
      You are entering staff mode. We won’t ask for confirmation again until the
      session expires.
    %button.bc-btn.bc-btn--small.bc-btn--block
      Give me access
  .bc-panel__footer
    %p
      %a{href: 'javascript:void(0)'}
        View your access grants

--interactive variant

Rendered example of Panels
Haml markup example of Panels --interactive
%ul.bc-panels
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      .bc-panel__footer
        %p
          Duis aute irure dolor in reprehenderit.
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex. In voluptate velit esse cillum.
      .bc-panel__footer
        %p
          I’m the program footer.
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur.
      .bc-panel__footer
        %p
          Boy, it sure is quiet here.
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
      .bc-panel__footer
        %p
          There are usually actions here…

--tiled variant

Rendered example of Panels
  • Lorem ipsum dolor sit amet, consectetur adipisicing 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. In voluptate velit esse cillum.

  • 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 Panels --tiled
%ul.row.bc-panels.bc-panels--tiled
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      .bc-panel__footer
        %p
          Duis aute irure dolor in reprehenderit.
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex. In voluptate velit esse cillum.
      .bc-panel__footer
        %p
          I’m the program footer.
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur.
      .bc-panel__footer
        %p
          Boy, it sure is quiet here.
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
      .bc-panel__footer
        %p
          There are usually actions here…

--lined variant

Rendered example of Panels
Here is your summary
Lorem ipsum dolor sit amet
Eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Eiusmod tempor incididunt ut labore et dolore magna aliqua.
Your program
Lorem ipsum dolor sit amet
Eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Eiusmod tempor incididunt ut labore et dolore magna aliqua.
Target information
Lorem ipsum dolor sit amet
Eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Eiusmod tempor incididunt ut labore et dolore magna aliqua.
Haml markup example of Panels --lined
.bc-panel.bc-panel--lined
  .bc-panel__header
    %span.bc-panel__title
      Here is your summary
  .bc-panel__main
    %dl
      %dt Lorem ipsum dolor sit amet
      %dd Eiusmod tempor incididunt ut labore et dolore magna aliqua.
    %dl
      %dt Lorem ipsum dolor sit amet
      %dd Eiusmod tempor incididunt ut labore et dolore magna aliqua.


.bc-panel.bc-panel--lined
  .bc-panel__header.bc-panel__header-actions
    %span.bc-panel__title
      Your program
    %button.bc-btn.bc-btn--small.bc-btn--secondary Edit
  .bc-panel__main
    %dl
      %dt Lorem ipsum dolor sit amet
      %dd Eiusmod tempor incididunt ut labore et dolore magna aliqua.
    %dl
      %dt Lorem ipsum dolor sit amet
      %dd Eiusmod tempor incididunt ut labore et dolore magna aliqua.


.bc-panel.bc-panel--lined
  .bc-panel__header.bc-panel__header-actions
    %span.bc-panel__title
      Target information
    .bc-panel__header-actions-group
      %button.bc-btn.bc-btn--small.bc-btn--tertiary Clear
      %button.bc-btn.bc-btn--small.bc-btn--secondary Edit
  .bc-panel__main
    %dl
      %dt Lorem ipsum dolor sit amet
      %dd Eiusmod tempor incididunt ut labore et dolore magna aliqua.
    %dl
      %dt Lorem ipsum dolor sit amet
      %dd Eiusmod tempor incididunt ut labore et dolore magna aliqua.

Responsive media

Guidance last updated: Sep 4, 2023

A container for preserving video and image aspect ratios.

Use for videos with 4:3 or 16:9 aspect ratios or for maintaining an image’s existing width–height ratio.

Rendered example of Responsive media

A 800 by 600 pixel placeholder image

Haml markup example of Responsive media

.bc-responsive-media
  %image{src: 'https://via.placeholder.com/800x600', alt: 'A 800 by 600 pixel placeholder image'}

Variants

--vid-4x3 variant

Rendered example of Responsive media
Haml markup example of Responsive media --vid-4x3
.bc-responsive-media.bc-responsive-media--video.bc-responsive-media--video-4x3
  %iframe.bc-responsive-media__video(allowfullscreen){title: '4:3 YouTube video embed test', src: 'https://www.youtube-nocookie.com/embed/o-mCm7V7Jxo', frameborder: '0', allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', :allowfullscreen => true}

--vid-16x9 variant

Rendered example of Responsive media
Haml markup example of Responsive media --vid-16x9
.bc-responsive-media.bc-responsive-media--video.bc-responsive-media--video-16x9
  %iframe.bc-responsive-media__video(allowfullscreen){title: '16:9 YouTube video embed test', src: 'https://www.youtube-nocookie.com/embed/Z5gPgcfQGd4', frameborder: '0', allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'}