$('.episode-video').on('play', function() { $(document).on('mousemove', handleMouseMove); }); $('.episode-video').on('pause ended', function(e) { $(document).off('mousemove', handleMouseMove); $('.series-nav , .side-navigation-trigger').fadeIn(); clearInterval(_delay); }); //= ../template/css.html Introduction - Concerto Style Guide | DPIM UX Team
Components — Discovery
//= ../template/menu.html

Cards

A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.

Usage

Cards conveniently displays elements that are different in type and sizes in one group. A card collection is a group of cards laid on the same plane.

When to Use

Use cards for the following cases

  • Comprised of multiple data types per card, but coherent in the information each card is conveying
  • Does not require direct comparison among cards
  • Content varies in length, e.g. description, title
  • Content is interactive with multiple actions, e.g. Edit, select, remove on image cards.

    • Use case: Card layout with multiple fields on one card, Asset library’s image card

Bravo: Layout

Card Types Used

As cards are a major component for the CMS, there are multiple types of cards used each with distinct functions.

Form Cards

A Form card has the following components

  • Title: Title of the card. It should represent the purpose of the grouping and the fields inside it.
  • Required fields count: When there is one or more required fields, a number count is displayed next to the title to indicate how many required fields are yet to be filled out. As user completes the required field, the number counts down and disappears when it reaches to 0.
  • Folding icon: On the top-right corner, there is a caret that toggles to open or fold the card. The card is opened when pointing up, and it is closed when pointing down. By folding cards, user can easily navigate the page that can potentially get long.
  • Section subtitles: When fields within a card form further subgroups, there may be a subtitle that helps user to understand the purpose of the corresponding fields is.

Syfy: Nodequeues

Chips

Chips represent complex entities in small blocks such as tags or categories.

Chips are used when there are multiple predefined items the user can select. Once chosen from a dropdown chips can be removed by clicking the delete icon (x) on the chip.

Use Case: Tags and Categories

Bravo: Layout

Overflow menu

If there is not enough room on a card for all menu items, the menu items that would not be used multiple times get collapsed into three vertical dots. Clicking on the dots reveals them again.

Use Case: media card when screen size reduced

USA: Series A-spots and Blocks

//= ../template/js.html