Card styles

When an app imports a card, the BlackBerry 10 OS controls the visual transition on and off the screen, but it also controls the peek behavior that allows the user to look at the card under the card that's currently displayed. The BlackBerry 10 OS manages the transition and the peek behavior based on the card's style.

Composers, pickers, and previewers

You can use three different styles of card in your app: composers for creating and editing content, pickers for choosing existing content, and previewers for viewing existing content. The style of card you use determines how the BlackBerry 10 OS transitions between the app and the card, how peeking is handled, and the general task that a card performs. Each card style has associated visual style guidelines.

The following image shows picker, composer, and previewer cards:

Examples of a picker, composer, and previewer.

Card transitions

A card transitions on or off the screen in a beautiful animation. The cards appears on the screen as sliding in either from the bottom or from the right side. Previewers slide in from the right side, while composers and pickers slide in from the bottom of the screen.

The following image shows the transition style of composers and pickers:

Screens showing the transition style of composers and pickers.

The following image shows the transition style of previewers:

Screens showing the transition style of previewers.

Peeking

Peeking is the ability for a user to see under a card, by using a gesture. There are two ways in which a user can peek under the card:

  • Parent peek: The user slides a finger right to reveal the screen that lies immediately under the card.

  • Root peek: The user slides a finger right on the action bar to reveal the app at the bottom of the stack of cards.

The following image shows the parent and root peek:

Screens showing parent and root peek.

Not all card styles support both peek types. Composer and picker cards support only parent peek, and previewer cards support both types.

UI consideration for cards

For a great user experience, here are some guidelines to consider if you want to use cards in your app:

Description Composers Previewers Pickers
Button(s) in the title bar of the screen Yes No Yes
Action bar at the bottom of the screen No Yes Yes
Supports context menu Yes Yes No

To learn what the action bar, context menu, and buttons are, see The basics in the UI Guidelines for BlackBerry 10.

When you create a card, you must add support for both landscape and portrait orientation so that the card follows the orientation of your app.

Last modified: 2014-09-30



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus