To use Card, first import SharedModule
in your module.
import {SharedModule} from '@gaxon/modules';​@NgModule({...imports: [SharedModule, ...],...})export class YourAppModule {}
<bs-card card-title="Card title" card-img-top="assets/images/card/skateboard.jpeg"><!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Button--><a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a><!-- /card button--></bs-card>
<bs-card>​<!-- Card Text--><p class="card-text">This is some text within a card body. Useit wisely :)</p><!-- /card text-->​</bs-card>
<bs-card card-title="Titles & Links">​<h4 class="card-subtitle">Subtitle text</h4>​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><a href="javascript:void(0)" class="card-link">Another Link</a><!-- /card link-->​</bs-card>
<bs-card card-title="Kitchen Sink" card-img-top="assets/images/card/vegetable.jpeg">​<!-- Card Text--><p class="card-text lead">Mix and match multiple content typesto create the card you need, or throweverything in there.</p>​<p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<bs-card-outer-body><!-- List Group --><ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Vestibulum at eros</li></ul><!-- /list group--></bs-card-outer-body>​<bs-card-body><!-- Card Body -->​<!-- Card Button--><a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a><a href="javascript:void(0)" class="card-link">Card Link</a><!-- /card button-->​​<!-- /card body --></bs-card-body>​</bs-card>
<bs-card [hasBody]="false">​<!-- Card header --><bs-card-header class="card-nav"><ul class="card-header-tabs nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link" [ngClass]="{active:cardTab === 1}" href="#tab-pane1" (click)="onClickTab($event, 1)">Active</a></li><li class="nav-item"><a class="nav-link" [ngClass]="{active:cardTab === 2}" data-toggle="tab" href="#tab-pane2"(click)="onClickTab($event, 2)">Link</a></li><li class="nav-item"><a href="#tab-pane3" [ngClass]="{active:cardTab === 3}" class="nav-link disabled"(click)="$event.preventDefault()">Disabled</a></li></ul></bs-card-header><!-- /card header -->​<!-- Tab Content--><bs-card-outer-body class="tab-content">​<!-- Tab panel --><div [ngClass]="{active:cardTab === 1}" class="tab-pane">​<!-- Card Body --><bs-card-body card-title="Card With Tabs">​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</bs-card-body><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div [ngClass]="{active:cardTab === 2}" class="tab-pane">​<!-- Card Body --><bs-card-body card-title="Card With Tabs">​<!-- Card Text--><p class="card-text">Mix and match multiple content types to create the card you need, or throw everything in there.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</bs-card-body><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div [ngClass]="{active:cardTab === 3}" class="tab-pane">​<!-- Card Body --><bs-card-body card-title="Card With Tabs">​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</bs-card-body><!-- /card body -->​</div><!-- /tab panel -->​</bs-card-outer-body><!-- /tab content-->​</bs-card>
import {Component} from '@angular/core';​@Component({selector: 'app-bs-card',templateUrl: './bs-card.component.html',styleUrls: ['./bs-card.component.scss']})export class BsCardComponent {cardTab = 1;​constructor() {}​onClickTab(event, tab) {event.preventDefault();​this.cardTab = tab;}}​
<bs-card [hasBody]="false">​<!-- Card header --><bs-card-header><ul class="card-header-pills nav nav-pills" role="tablist"><li class="nav-item"><a class="nav-link" [ngClass]="{active:cardPillsTab === 1}" href="#tab-pane4"(click)="onClickPillosTab($event, 1)">Active</a></li><li class="nav-item"><a class="nav-link" [ngClass]="{active:cardPillsTab === 2}" href="#tab-pane5"(click)="onClickPillosTab($event, 2)">Link</a></li><li class="nav-item" [ngClass]="{active:cardPillsTab === 3}"><a href="#tab-pane6" (click)="$event.preventDefault()" class="nav-link disabled">Disabled</a></li></ul></bs-card-header><!-- /card header -->​<bs-card-outer-body><!-- Tab Content--><div class="tab-content">​<!-- Tab panel --><div class="tab-pane" [ngClass]="{active:cardPillsTab === 1}">​<!-- Card Body --><bs-card-body card-title="Tabs In Button Style">​<!-- Card Text--><p class="card-text">Mix and match multiple content types to create the card you need, or throw everything in there.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</bs-card-body><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div class="tab-pane" [ngClass]="{active:cardPillsTab === 2}">​<!-- Card Body --><bs-card-body card-title="Tabs In Button Style">​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</bs-card-body><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div class="tab-pane" [ngClass]="{active:cardPillsTab === 3}">​<!-- Card Body --><bs-card-body card-title="Tabs In Button Style">​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</bs-card-body><!-- /card body -->​</div><!-- /tab panel -->​</div><!-- /tab content-->​</bs-card-outer-body>​</bs-card>
import {Component} from '@angular/core';​@Component({selector: 'app-bs-card',templateUrl: './bs-card.component.html',styleUrls: ['./bs-card.component.scss']})export class BsCardComponent {cardPillsTab = 1;​constructor() {}​onClickPillosTab(event, tab) {event.preventDefault();​this.cardPillsTab = tab;}}​
<bs-card card-title="Header & Footer">​<!-- Card Header --><bs-card-header class="h4">Left Aligned Card</bs-card-header><!-- /card header -->​<!-- Card Body -->​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Button--><a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a><!-- /card button-->​<!-- /card body -->​<!-- Card Footer --><bs-card-footer class="text-muted">2 days ago | footer content</bs-card-footer><!-- /card footer -->​</bs-card>
<bs-card class="text-white bg-primary">​<!-- Card Header --><bs-card-header class="h4 text-white">Header</bs-card-header><!-- /card header -->​<!-- Card Title--><h2 class="card-title text-white">Header & Footer</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Footer --><bs-card-footer>2 days ago | footer content</bs-card-footer><!-- /card footer -->​</bs-card>
<bs-card card-img="assets/images/card/person-walking.jpeg" class="text-white">​<!-- Card Overlay --><bs-card-img-overlay>​<h2 class="card-title text-white">Card title</h2>​<!-- Card Text --><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.This content is a little bit longer.</p><p class="card-text">Last updated 3 mins ago</p><!-- /card text -->​</bs-card-img-overlay><!-- /card overlay -->​</bs-card>
<bs-card card-title="Header & Footer" class="border border-primary">​<!-- Card Header --><bs-card-header class="h4 border-bottom border-primary">Header</bs-card-header><!-- /card header -->​<!-- Card Text--><p class="card-text">Some quick example text to build on thecard title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Footer --><bs-card-footer class="border-top border-primary">2 days ago | footer content</bs-card-footer><!-- /card footer -->​</bs-card>