Card

The card directive creates a small container to highlight important information. Generally, multiple cards are organized together to display information about a collection of related items. For example, cards can present a stack or carousel of to-do items or a matrix of images.

Cards frequently present users with a call to action. They can use visual cues to alert users about the need for action, and they can also include actions directly on the cards.

You can modify cards to handle a variety of scenarios, but they generally consist of three main parts: a title to identify what the card represents, content to display in the body of the card, and an action to let users act on the card. Each item is optional.

Card settings

  • bb-card — Creates a small container to highlight important information.
    • bb-card-selection-toggled(Optional.) Specifies a callback that will be executed when a user toggles the card selection. It has the following arguments:
      • isSelected — Set to true if the card is selected, set to false otherwise.
    • bb-card-size(Optional.) Specifies the size of the card. For a large container, specify large. For a small container, specify small. (Default: large)
    • bb-card-selectable(Optional.) Specifies whether to display a checkbox to the right of the title. Users can select the checkbox for one or more cards to then perform an action on the selected cards.
    • bb-card-selected(Optional.) Specifies whether the card is selected (i.e. its checkbox is checked). When the user selects the card the specified property on your model will be updated accordingly.
    • bb-card-title — Specifies a title to identify the content that the card displays. The title is not required, but we recommend that you include it except in special circumstances. For example, you might exclude the title if a card displays an image with a filename that won't convey anything to users and the image itself is the most important content.
    • bb-card-content — Specifies the content to display in the body of the card. The type of content depends on what the card represents and whether it prompts users to action. Content can consist of some combination of a graph, trend, status, summary information, and guidance text.
    • bb-card-actions — Specifies an action or multiple actions for users to act on the intent of the card. To display a single action, use a button element within bb-card-actions. To display multiple actions, use the bb-context-menu directive within bb-card-actions.

Demo

Large card This card demonstrates the amount of space that is available for a card that uses the default large size. If the content does not require this much space, you can set the card size to small. The type of content to display in the body of a card varies based on what the card represents and whether it prompts users to action. Small card This card demonstrates the reduced amount of space that is available when you set the card size to small. Action 1 Action 2

Markup

<div ng-controller="CardTestController as cardCtrl">
  <bb-card bb-card-size="large" bb-card-selectable="{{cardCtrl.showCheckbox}}" bb-card-selected="cardCtrl.cardSelected">
    <bb-card-title ng-if="cardCtrl.showTitle">Large card</bb-card-title>
    <bb-card-content ng-if="cardCtrl.showContent">
      This card demonstrates the amount of space that is available for a card that uses the default large size. If the content does not require this much space, you can set the card size to small. The type of content to display in the body of a card varies based on what the card represents and whether it prompts users to action.
    </bb-card-content>
    <bb-card-actions ng-if="cardCtrl.showActions">
      <button type="button" class="btn btn-default">Click me</button>
    </bb-card-actions>
  </bb-card>
  <bb-card bb-card-size="small">
    <bb-card-title>Small card</bb-card-title>
    <bb-card-content>
      This card demonstrates the reduced amount of space that is available when you set the card size to small.
    </bb-card-content>
    <bb-card-actions>
      <bb-context-menu>
        <bb-context-menu-item>Action 1</bb-context-menu-item>
        <bb-context-menu-item>Action 2</bb-context-menu-item>
      </bb-context-menu>
    </bb-card-actions>
  </bb-card>
  <div>
    <ul class="list-unstyled">
      <li>
        <label>
          <input type="checkbox" bb-check ng-model="cardCtrl.showTitle" /> Show title
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" bb-check ng-model="cardCtrl.showContent" /> Show content
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" bb-check ng-model="cardCtrl.showActions" /> Show action
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" bb-check ng-model="cardCtrl.showCheckbox" /> Show checkbox
        </label>
      </li>
    </ul>
  </div>
</div>

JavaScript

/* global angular*/

(function () {
    'use strict';

    function CardTestController() {
        var vm = this;

        vm.showTitle = true;
        vm.showContent = true;
        vm.showActions = true;
        vm.showCheckbox = true;
    }

    angular.module('stache')
        .controller('CardTestController', CardTestController);
}());