Bugcrowd Design System

Bugcrowd Design System

Search/

Panels

Last modified:

Flexible containers for info panes and various interactive widgets.

Back to top

Example of Panels - default

<div class="bc-panel">
  <div class="bc-panel__header">
    <span class="bc-panel__title"> Need help? </span>
  </div>
  <div class="bc-panel__main">
    <p>
      <a href="https://docs.bugcrowd.com/"> View documentation </a>
    </p>
    <p> Our support team is available 9am to 5pm, Monday to Friday PST. Please send us an email if you need assistance! </p>
    <p> Email <a href="mailto:support@bugcrowd.com"> support@bugcrowd.com </a>
    </p>
  </div>
</div>
Open in Playroom

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

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.

Design

Last modified:

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.

Accessibility

Last modified:

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

Rationale

Last modified:

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

See also

Last modified:

  • Tabs (Navigation)