Status Grid

The status grid is a 3 or 4 fluid column grid, depending on the number of statuses passed in to the component.

Number of status grid items to show (1 to 8 items are supported):

HTML

<div class="t-content" ng-controller="StatusGridExampleController as ctrl">
    <label for="numStatuses">Number of status grid items to show (1 to 8 items are supported):</label>
    <input type="number"
        id="numStatues"
        ng-model="ctrl.numStatuses">
    <status-grid
        statuses="ctrl.statuses"
        on-status-action="ctrl.onActionClick">
    </status-grid>
</div>

Quad Column Grid

The status grid will adjust itself to have 4 columns at certain sizes.

HTML

<div class="t-content" ng-controller="StatusGridExampleController as ctrl">
    <status-grid statuses="ctrl.eightStatuses"
        on-status-action="ctrl.onActionClick">
    </status-grid>
</div>