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">
<!-- Card Body -->
<bs-card-body card-title="Card With Tabs">
<!-- 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>
<!-- /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 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>
<!-- /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;
}
}
Preview
HTML
TypeScript
<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 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>
<!-- /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 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>
<!-- /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;
}
}
Preview
HTML
<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 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-->
<!-- /card body -->
<!-- Card Footer -->
<bs-card-footer class="text-muted">2 days ago | footer content</bs-card-footer>
<!-- /card footer -->
</bs-card>
Preview
HTML
<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 the
card title and make up the bulk of the
card's content.
</p>
<!-- /card text-->
<!-- Card Footer -->
<bs-card-footer>2 days ago | footer content</bs-card-footer>
<!-- /card footer -->
</bs-card>
Preview
HTML
<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>
Preview
HTML
<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 the
card title and make up the bulk of the
card'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>
Last modified 3yr ago