Components

Alerts

Alerts are used to inform the user of application-wide issues, warnings, or errors. They are also used to provide direct feedback for whether an action was completed successfully or resulted in error.

Inline Alerts

Used for global or persistent alerts related to application-wide issues, warnings, or errors. These alerts may not be dismissible by the user in cases where an action is required, and are always displayed within the main white content container.

alert--toast-actions
alert--info
alert--warning
alert--danger
alert--success

Toast Alerts

Used for providing direct feedback on user actions. These alerts may be dismissible via click and/or should also disappear after a set amount of time.

alert--toast
alert--toast-warning
alert--toast-danger
alert--toast-success
Status  
Info Used to provide the user with more information or additional context
Warning Used to inform the user when they are about to do something that is destructive or when the result of an action is unexpected, but isn't an error
Danger Used to inform the user that something went wrong. The message should explain the problem and try to provide a next step or an alternative if the user needs to take some action in response
Success Used to tell the user when an interaction or task has been completed successfully

 

Best practices

Accessibility

  • Use the proper ARIA role:
    • "alert" if the user's immediate attention is required
    • "alertdialog” if the alert provides actions for the user to perform

Avatars

The avatar component is a circular user photo used in multiple locations throughout the control panel. The avatar component comes in 5 sizes.

avatar--medium
Size Class  
Default .avatar width: 30px, height: 30px
Extra small .avatar--xs width: 14px, height: 14px
Small .avatar--sm width: 24px, height: 24px
Medium .avatar--md width: 50px, height: 50px
Large .avatar--lg width: 70px, height: 70px

Badges

Badges are used to show status. There are a few different types of badges that can be used.

badge
Variant Usage
Primary Used to show neutral status
Secondary Used to show neutral status
Success Used to show positive status
Danger Used to show negative status
Info Used to show informative status
Warning Used to show warning status
Rank Used to show ranking status

Cards

Cards are used to contain information and provide a clear grouping of related information.

card--person

 

Best practices

When to display people in cards vs. a table

  • In general, lists of people should be placed on cards if there is no subnav 2 directly above the listing.

Accessibility

  • Content or UI elements should never be placed on the grey background of the control panel but should always be placed within a card.

Comments

Comments are a component of the activity stream and support HTML.

comment

Popovers

Popovers are floating information panels that describe an item being hovered over. Popovers can contain more information than a tooltip. They can include a heading, paragraph text, or in some cases, an image.

popover

Stat boxes

Stat boxes are at-a-glance indicators of statuses found in people's profiles, in the activities dashboard, when viewing membership types, or on some page types. Stat boxes have two components, the stat and the label. Stats can be numerical or boolean.

stat-boxes

Best Practices

Accessibility

  • Booleans should use the .on-button or .off-button, never words such as “Yes,” “No,” “Is,” or “Is not.”

Tooltip

Tooltips are floating information panels that describe an item being hovered over. Tooltips should contain no more than a sentence of text with no images or links. For longer information, use a popover.

tooltip--top

Modals

A modal appears in an overlay on top of the main content in order to focus content and draw attention. Modals can be used to request more information in order to complete the current interaction or to break up an interaction into simpler steps. Typically modals are used for confirmation dialogs.

Default modal

Used to display simple information. This may only be a heading and text, but it may also include a button.

modal--default

List modal

Used for choosing a list in the people section. From this modal, users can create a new list or add people to a list.

modal--list

Form modal

Used when there is a modal that submits a form. One place this is used is for inviting people to be admins on the control panel.

modal--add-control-panel-user

Add Remove Modal

Used simply for adding or removing people from a list.

modal--add-remove

Best practices

Accessibility
  • Focus
    • When a dialog opens, focus should move to an element inside the dialog
    • When the dialog closes, focus should return to the last focused element
    • While the dialog is open, prevent tabular focus outside of the dialog
  • The element that serves as the dialog container has a role of dialog
    • The dialog container element has aria-modal set to true
  • The dialog should have a value set for the `aria-labelledby` property that refers to a visible dialog title or a label specified by `aria-label`
    • Optionally the `aria-describedby` can be used to provide a description for the dialog
  • Users should be able to use the ESC key to close the dialog

Tables

Tables are used to organize large amounts of related information into categories making them easy to scan.

Standard tables

This is a straight-forward Bootstrap 4 table with table cells set to vertically align center. You can override this by using Bootstrap’s alignment utility classes.

table

Sortable tables

The sortable table allows for reordering of table rows by drag and drop. This table should be used when the order of rows needs to be customizable and mirror the order in which the items exist elsewhere (e.g. navs, featured content sliders).

table_sort

Nested tables

Nested tables have two levels of hierarchy, nesting child rows under a parent row. This table enables a person to take action on all children on the parent row via the action menu, yet also includes an edit link on each child level. Nested tables should only be used when it’s important to display a parent/child relationship between rows, and when there are less than 5 rows of children per parent.

table--nested