Tab Card
The tab card displays a collection of tabbed views for selection.
ESPN INSIDER/ESPN THE MAGAZINE
Pricing Plan
Sub Plan A
Renewal Pricing Plan
N/A
Add Date
4/21/17 12:49PM
Renewal Count
0
Renewal Source
N/A
Discount
100$
Amount
$0.00
Status
Expiration Date
8/25/17
Coupon
N/A
Discount
qa
Amount
$0.00
Status
Expiration Date
8/25/17
Coupon
N/A
- HTML
<div class="t-content" style="width: 900px; height: 300px;" ng-controller="tabCardExampleController as ctrl"> <div class="c-tabCard l-vertical"> <div class="c-tabCard-header"> <div class="c-heading"> <div class="c-heading-titleArea"> <div class="c-tabCard-heading c-heading-label">ESPN INSIDER/ESPN THE MAGAZINE</div> </div> <div class="c-button c-button--icon"> <inv-icon glyph="'ellipsis-h'"></inv-icon> </div> </div> </div> <div class="l-vertical-scrollParent"> <div class="c-tabCard-container l-vertical-growAndScroll"> <div class="c-tabCard-content" ng-show="ctrl.tabs[0].active"> <div class="c-definitions"> <div class="c-definition"> <div class="c-definition-term">Pricing Plan</div> <div class="c-definition-value">Sub Plan A</div> </div> <div class="c-definition"> <div class="c-definition-term">Renewal Pricing Plan</div> <div class="c-definition-value">N/A</div> </div> <div class="c-definition"> <div class="c-definition-term">Add Date</div> <div class="c-definition-value">4/21/17 12:49PM</div> </div> <div class="c-definition"> <div class="c-definition-term">Renewal Count</div> <div class="c-definition-value">0</div> </div> <div class="c-definition"> <div class="c-definition-term">Renewal Source</div> <div class="c-definition-value">N/A</div> </div> </div> </div> <div ng-show="ctrl.tabs[1].active"> <div class="c-tabCard-item"> <div class="c-definitions"> <div class="c-definition"> <div class="c-definition-term">Discount</div> <div class="c-definition-value">100$</div> </div> <div class="c-definition"> <div class="c-definition-term">Amount</div> <div class="c-definition-value">$0.00</div> </div> <div class="c-definition"> <div class="c-definition-term">Status</div> <div class="c-definition-value"><simple-status is-active="false"></simple-status></div> </div> <div class="c-definition"> <div class="c-definition-term">Expiration Date</div> <div class="c-definition-value">8/25/17</div> </div> <div class="c-definition"> <div class="c-definition-term">Coupon</div> <div class="c-definition-value">N/A</div> </div> </div> <div class="c-tabCard-divider c-divider c-divider--horizontal"></div> </div> <div class="c-tabCard-item"> <div class="c-definitions"> <div class="c-definition"> <div class="c-definition-term">Discount</div> <div class="c-definition-value">qa</div> </div> <div class="c-definition"> <div class="c-definition-term">Amount</div> <div class="c-definition-value">$0.00</div> </div> <div class="c-definition"> <div class="c-definition-term">Status</div> <div class="c-definition-value"><simple-status is-active="true"></simple-status></div> </div> <div class="c-definition"> <div class="c-definition-term">Expiration Date</div> <div class="c-definition-value">8/25/17</div> </div> <div class="c-definition"> <div class="c-definition-term">Coupon</div> <div class="c-definition-value">N/A</div> </div> </div> </div> </div> <div ng-show="ctrl.tabs[2].active"></div> <div ng-show="ctrl.tabs[3].active"></div> </div> <inv-tab-panel class="c-tabCard-footer" tabs="ctrl.tabs" on-tab-selected="ctrl.tabSelected" top-highlight="true"></inv-tab-panel> </div> </div> </div>