Bugcrowd design system: Containers

Containers are wrappers for other elements.

The reimplementation of Bootstrap’s grid system is included herein.

Accordions

Guidance last updated: May 28, 2018

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.

Accordion React component propTypes

Our accordions are provided as a React component (‘Accordion’).

Accordion properties:

Prop Type Description
targetId string A unique identifier for the component title anchor, used to associate the title to the body content
title object The heading title text for the accordion, passed as an object to support custom markup
children node The markup/content body of the accordion
isOpen boolean The open/close state of the accordion
openOnLoad boolean Sets accordion to be open already on load
openAccordion function Called onClick to open the accordion
closeAccordion function Called onClick to close the accordion

All props except isOpen are required.

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

Grid

Guidance last updated: Feb 8, 2018

A reimplementation of the 12-column Bootstrap 3 grid system.

Our grid setup uses the same classes as the Bootstrap 3 grid system, with one addition/exception (see usage below).

This means you can refer to the Bootstrap 3 grid documentation when building grids.

Grid test file.

Using the grid

The grid’s container(s) must sit in a wrapping element with the class .bc-grid (eg on <body>), but otherwise none of the other grid classes use the .bc- namespace prefix.

If you need a grid that spans the entire width of the viewport use .container-fluid.

Customisations

There are two additions:

  • Custom *-xl-* breakpoint classes which corresponds to the $bc-media-xl breakpoint
  • .container-fluid__container: a fixed-width ‘inner’ container for the full-viewport-width fluid container.

Primary header

Guidance last updated: May 15, 2018

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: Feb 13, 2020

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: Feb 13, 2020

A wrapper for styling rendered Markdown.

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)

Modals

Guidance last updated: Jun 5, 2019

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

The Design System’s modals are powered by a react-redux 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 cheatsheet.

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.

Button strings can be modified by the confirmText and cancelText props respectively.

Similarly either button can be omitted by the showConfirm and showCancel props respectively.

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

Modal configuration

Modals have the following properties:

Prop Type Description
id* string A unique identifier for the component (used to store the the open/closed state in the store)
title* string The heading text for the dialog
showConfirm true/false Used to hide/show the confirmation button (defaults to true)
showCancel true/false Used to hide/show the cancel button (defaults to true)
confirmText string Override the text for the confirmation button
cancelText string Override the text for the cancel button
disableSubmit boolean Disable the submit button
onConfirm function Called when the confirmation button is clicked
onCancel function Called when the cancel button is clicked or the modal is closed by clicking outside
variants object CSS variants for various elements
variants.modal default/large/small Modal (size) variant
variants.confirm secondary/block/caution Confirm button variant
variants.cancel cancel/caution Cancel button variant
reactModalProps object Any additional props you wish to pass to react-modal
children component(s) The markup for the main body of the dialog
headerContent component(s) Additional header content (Note: content will appear directly adjacent to the title)
className string String passed to root container of the component to append to the html class attribute
closeOnConfirm boolean Whether or not to automatically close the modal when you hit the submit button (defaults to true)

Props with an asterisk are required.

To open the modal, dispatch the openModal(id) action.

To stop the user from being able to close the modal by clicking on the overlay, set shouldCloseOnOverlayClick to false in reactModalProps.

import Modal from 'design-system/modal/Modal'
import { openModal } from 'design-system/modal/actions'
...
<Modal
  id='unique-id'
  title='modal-example-title'
  onConfirm={() => console.log('Modal confirmed')}
  onCancel={() => console.log('Modal cancelled')}
  confirmText='update'
  reactModalProps={{shouldCloseOnOverlayClick: false}}
>
  <p>Modal body text</p>
</Modal>
...
<button onClick={() => dispatch(openModal('unique-id'))}>
  Open modal
</button>

For more details, see the modal examples.

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).

Keeping the modal open after clicking confirm

You can prevent the modal from automatically closing when clicking the confirm/submit button by setting the closeOnConfirm prop to false.

This can be helpful when the modal contains a form and you wish to display inline errors without closing and reopening the modal.

Careful: This means you will be responsible for handling the closing of the modal in the onConfirm action.

Additional setup

Reducer

You will need to include the modal reducer in your top-level application reducer, so the modals can properly manage their open/close state.

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: Apr 10, 2018

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 [email protected]

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:[email protected]'}
        [email protected]

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: '[email protected]'}
    .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…