Key info

The key info directive highlights important information. It can display any type of content but generally highlights details such as important summary numbers. The directive displays its main value in large, bold text, and it displays a corresponding label in smaller, plain text. By default, the directive uses a vertical layout with the label under the primary value, but you can also use a horizontal layout with the label to the side of the primary value.

Key info settings

  • bb-key-info — Highlights important information such as summary numbers.
    • bb-key-info-layout(Optional.) Indicates whether to display key info in a vertical layout with the label under the primary value or in a horizontal layout with the label beside the primary value. To display key info horizontally, set this property to horizontal. (Default: vertical)
    • bb-key-info-value — Specifies the primary content to display in large, bold text.
    • bb-key-info-label — Specifies a label to display in smaller, plain text under or beside the primary value.

Demo

Vertical example

This is a default sample value. This is a default sample label. This is another default sample value. This is another default sample label.

Horizontal example

This is a horizontal sample value. This is a horizontal sample label.

Markup

<div ng-controller="KeyInfoTestController as keyInfoCtrl">
  <h3>Vertical example</h3>
  
  <bb-key-info>
    <bb-key-info-value>
      This is a default sample value.
    </bb-key-info-value>
    <bb-key-info-label>
      This is a default sample label.
    </bb-key-info-label>
  </bb-key-info>
  <bb-key-info>
    <bb-key-info-value>
      This is another default sample value.
    </bb-key-info-value>
    <bb-key-info-label>
      This is another default sample label.
    </bb-key-info-label>
  </bb-key-info>
  
  <h3>Horizontal example</h3>
  
  <bb-key-info bb-key-info-layout="horizontal">
    <bb-key-info-value>
      This is a horizontal sample value.
    </bb-key-info-value>
    <bb-key-info-label>
      This is a horizontal sample label.
    </bb-key-info-label>
  </bb-key-info>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function KeyInfoTestController() {
        var vm = this;
        vm.layout = 'horizontal';

    }

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