Cards
To use Card, first import
SharedModule
in your module.import {SharedModule} from '@gaxon/modules';
@NgModule({
...
imports: [SharedModule, ...],
...
})
export class YourAppModule {
}
Preview
HTML

<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 the
card title and make up the bulk of the
card's content.
</p>
<!-- /card text-->
<!-- Card Button-->
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
<!-- /card button-->
</bs-card>
Preview
HTML

<bs-card>
<!-- Card Text-->
<p class="card-text">
This is some text within a card body. Use
it wisely :)
</p>
<!-- /card text-->
</bs-card>
Preview
HTML

<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 the
card title and make up the bulk of the
card'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>
Preview
HTML

<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 types
to create the card you need, or throw
everything in there.
</p>
<p class="card-text">
Some quick example text to build on the
card title and make up the bulk of the
card'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>
Preview
HTML
TypeScript

<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">