Drift Angular
Search…
Installation and Setup
Stylesheets
Settings
Cards
To use Card, first import
SharedModule in your module.1
import {SharedModule} from '@gaxon/modules';
2
​
3
@NgModule({
4
...
5
imports: [SharedModule, ...],
6
...
7
})
8
export class YourAppModule {
9
}
Copied!
Basic Card
Preview
HTML
1
<bs-card card-title="Card title" card-img-top="assets/images/card/skateboard.jpeg">
2
<!-- Card Text-->
3
<p class="card-text">
4
Some quick example text to build on the
5
card title and make up the bulk of the
6
card's content.
7
</p>
8
<!-- /card text-->
9
​
10
<!-- Card Button-->
11
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
12
<!-- /card button-->
13
</bs-card>
Copied!
Card With Body Only
Preview
HTML
1
<bs-card>
2
​
3
<!-- Card Text-->
4
<p class="card-text">
5
This is some text within a card body. Use
6
it wisely :)
7
</p>
8
<!-- /card text-->
9
​
10
</bs-card>
Copied!
Titles & Links
Preview
HTML
1
<bs-card card-title="Titles & Links">
2
​
3
<h4 class="card-subtitle">Subtitle text</h4>
4
​
5
<!-- Card Text-->
6
<p class="card-text">
7
Some quick example text to build on the
8
card title and make up the bulk of the
9
card's content.
10
</p>
11
<!-- /card text-->
12
​
13
<!-- Card Link-->
14
<a href="javascript:void(0)" class="card-link">Goto Link</a>
15
<a href="javascript:void(0)" class="card-link">Another Link</a>
16
<!-- /card link-->
17
​
18
</bs-card>
Copied!
Card With List Group
Preview
HTML
1
<bs-card card-title="Kitchen Sink" card-img-top="assets/images/card/vegetable.jpeg">
2
​
3
<!-- Card Text-->
4
<p class="card-text lead">
5
Mix and match multiple content types
6
to create the card you need, or throw
7
everything in there.
8
</p>
9
​
10
<p class="card-text">
11
Some quick example text to build on the
12
card title and make up the bulk of the
13
card's content.
14
</p>
15
<!-- /card text-->
16
​
17
<bs-card-outer-body>
18
<!-- List Group -->
19
<ul class="list-group list-group-flush">
20
<li class="list-group-item">Cras justo odio</li>
21
<li class="list-group-item">Dapibus ac facilisis in</li>
22
<li class="list-group-item">Vestibulum at eros</li>
23
</ul>
24
<!-- /list group-->
25
</bs-card-outer-body>
26
​
27
<bs-card-body>
28
<!-- Card Body -->
29
​
30
<!-- Card Button-->
31
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
32
<a href="javascript:void(0)" class="card-link">Card Link</a>
33
<!-- /card button-->
34
​
35
​
36
<!-- /card body -->
37
</bs-card-body>
38
​
39
</bs-card>
Copied!
Card With Tabs
Preview
HTML
TypeScript
1
<bs-card [hasBody]="false">
2
​
3
<!-- Card header -->
4
<bs-card-header class="card-nav">
5
<ul class="card-header-tabs nav nav-tabs" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link" [ngClass]="{active:cardTab === 1}" href="#tab-pane1" (click)="onClickTab($event, 1)">Active</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" [ngClass]="{active:cardTab === 2}" data-toggle="tab" href="#tab-pane2"
11
(click)="onClickTab($event, 2)">Link</a>
12
</li>
13
<li class="nav-item">
14
<a href="#tab-pane3" [ngClass]="{active:cardTab === 3}" class="nav-link disabled"
15
(click)="$event.preventDefault()">Disabled</a>
16
</li>
17
</ul>
18
</bs-card-header>
19
<!-- /card header -->
20
​
21
<!-- Tab Content-->
22
<bs-card-outer-body class="tab-content">
23
​
24
<!-- Tab panel -->
25
<div [ngClass]="{active:cardTab === 1}" class="tab-pane">
26
​
27
<!-- Card Body -->
28
<bs-card-body card-title="Card With Tabs">
29
​
30
<!-- Card Text-->
31
<p class="card-text">
32
Some quick example text to build on the
33
card title and make up the bulk of the
34
card's content.
35
</p>
36
<!-- /card text-->
37
​
38
<!-- Card Link-->
39
<a href="javascript:void(0)" class="card-link">Goto Link</a>
40
<!-- /card link-->
41
​
42
</bs-card-body>
43
<!-- /card body -->
44
​
45
</div>
46
<!-- /tab panel -->
47
​
48
<!-- Tab panel -->
49
<div [ngClass]="{active:cardTab === 2}" class="tab-pane">
50
​
51
<!-- Card Body -->
52
<bs-card-body card-title="Card With Tabs">
53
​
54
<!-- Card Text-->
55
<p class="card-text">
56
Mix and match multiple content types to create the card you need, or throw everything in there.
57
</p>
58
<!-- /card text-->
59
​
60
<!-- Card Link-->
61
<a href="javascript:void(0)" class="card-link">Goto Link</a>
62
<!-- /card link-->
63
​
64
</bs-card-body>
65
<!-- /card body -->
66
​
67
</div>
68
<!-- /tab panel -->
69
​
70
<!-- Tab panel -->
71
<div [ngClass]="{active:cardTab === 3}" class="tab-pane">
72
​
73
<!-- Card Body -->
74
<bs-card-body card-title="Card With Tabs">
75
​
76
<!-- Card Text-->
77
<p class="card-text">
78
Some quick example text to build on the
79
card title and make up the bulk of the
80
card's content.
81
</p>
82
<!-- /card text-->
83
​
84
<!-- Card Link-->
85
<a href="javascript:void(0)" class="card-link">Goto Link</a>
86
<!-- /card link-->
87
​
88
</bs-card-body>
89
<!-- /card body -->
90
​
91
</div>
92
<!-- /tab panel -->
93
​
94
</bs-card-outer-body>
95
<!-- /tab content-->
96
​
97
</bs-card>
Copied!
1
import {Component} from '@angular/core';
2
​
3
@Component({
4
selector: 'app-bs-card',
5
templateUrl: './bs-card.component.html',
6
styleUrls: ['./bs-card.component.scss']
7
})
8
export class BsCardComponent {
9
cardTab = 1;
10
​
11
constructor() {}
12
​
13
onClickTab(event, tab) {
14
event.preventDefault();
15
​
16
this.cardTab = tab;
17
}
18
}
19
​
Copied!
Tabs In Button Style
Preview
HTML
TypeScript
1
<bs-card [hasBody]="false">
2
​
3
<!-- Card header -->
4
<bs-card-header>
5
<ul class="card-header-pills nav nav-pills" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link" [ngClass]="{active:cardPillsTab === 1}" href="#tab-pane4"
8
(click)="onClickPillosTab($event, 1)">Active</a>
9
</li>
10
<li class="nav-item">
11
<a class="nav-link" [ngClass]="{active:cardPillsTab === 2}" href="#tab-pane5"
12
(click)="onClickPillosTab($event, 2)">Link</a>
13
</li>
14
<li class="nav-item" [ngClass]="{active:cardPillsTab === 3}">
15
<a href="#tab-pane6" (click)="$event.preventDefault()" class="nav-link disabled">Disabled</a>
16
</li>
17
</ul>
18
</bs-card-header>
19
<!-- /card header -->
20
​
21
<bs-card-outer-body>
22
<!-- Tab Content-->
23
<div class="tab-content">
24
​
25
<!-- Tab panel -->
26
<div class="tab-pane" [ngClass]="{active:cardPillsTab === 1}">
27
​
28
<!-- Card Body -->
29
<bs-card-body card-title="Tabs In Button Style">
30
​
31
<!-- Card Text-->
32
<p class="card-text">
33
Mix and match multiple content types to create the card you need, or throw everything in there.
34
</p>
35
<!-- /card text-->
36
​
37
<!-- Card Link-->
38
<a href="javascript:void(0)" class="card-link">Goto Link</a>
39
<!-- /card link-->
40
​
41
</bs-card-body>
42
<!-- /card body -->
43
​
44
</div>
45
<!-- /tab panel -->
46
​
47
<!-- Tab panel -->
48
<div class="tab-pane" [ngClass]="{active:cardPillsTab === 2}">
49
​
50
<!-- Card Body -->
51
<bs-card-body card-title="Tabs In Button Style">
52
​
53
<!-- Card Text-->
54
<p class="card-text">
55
Some quick example text to build on the
56
card title and make up the bulk of the
57
card's content.
58
</p>
59
<!-- /card text-->
60
​
61
<!-- Card Link-->
62
<a href="javascript:void(0)" class="card-link">Goto Link</a>
63
<!-- /card link-->
64
​
65
</bs-card-body>
66
<!-- /card body -->
67
​
68
</div>
69
<!-- /tab panel -->
70
​
71
<!-- Tab panel -->
72
<div class="tab-pane" [ngClass]="{active:cardPillsTab === 3}">
73
​
74
<!-- Card Body -->
75
<bs-card-body card-title="Tabs In Button Style">
76
​
77
<!-- Card Text-->
78
<p class="card-text">
79
Some quick example text to build on the
80
card title and make up the bulk of the
81
card's content.
82
</p>
83
<!-- /card text-->
84
​
85
<!-- Card Link-->
86
<a href="javascript:void(0)" class="card-link">Goto Link</a>
87
<!-- /card link-->
88
​
89
</bs-card-body>
90
<!-- /card body -->
91
​
92
</div>
93
<!-- /tab panel -->
94
​
95
</div>
96
<!-- /tab content-->
97
​
98
</bs-card-outer-body>
99
​
100
</bs-card>
Copied!
1
import {Component} from '@angular/core';
2
​
3
@Component({
4
selector: 'app-bs-card',
5
templateUrl: './bs-card.component.html',
6
styleUrls: ['./bs-card.component.scss']
7
})
8
export class BsCardComponent {
9
cardPillsTab = 1;
10
​
11
constructor() {}
12
​
13
onClickPillosTab(event, tab) {
14
event.preventDefault();
15
​
16
this.cardPillsTab = tab;
17
}
18
}
19
​
Copied!
Card With Header & Footer
Preview
HTML
1
<bs-card card-title="Header & Footer">
2
​
3
<!-- Card Header -->
4
<bs-card-header class="h4">Left Aligned Card</bs-card-header>
5
<!-- /card header -->
6
​
7
<!-- Card Body -->
8
​
9
<!-- Card Text-->
10
<p class="card-text">
11
Some quick example text to build on the
12
card title and make up the bulk of the
13
card's content.
14
</p>
15
<!-- /card text-->
16
​
17
<!-- Card Button-->
18
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
19
<!-- /card button-->
20
​
21
<!-- /card body -->
22
​
23
<!-- Card Footer -->
24
<bs-card-footer class="text-muted">2 days ago | footer content</bs-card-footer>
25
<!-- /card footer -->
26
​
27
</bs-card>
Copied!
Card Background Style
Preview
HTML
1
<bs-card class="text-white bg-primary">
2
​
3
<!-- Card Header -->
4
<bs-card-header class="h4 text-white">Header</bs-card-header>
5
<!-- /card header -->
6
​
7
<!-- Card Title-->
8
<h2 class="card-title text-white">Header & Footer</h2>
9
<!-- Card Title-->
10
​
11
<!-- Card Text-->
12
<p class="card-text">
13
Some quick example text to build on the
14
card title and make up the bulk of the
15
card's content.
16
</p>
17
<!-- /card text-->
18
​
19
<!-- Card Footer -->
20
<bs-card-footer>2 days ago | footer content</bs-card-footer>
21
<!-- /card footer -->
22
​
23
</bs-card>
Copied!
Card Image Overlay
Preview
HTML
1
<bs-card card-img="assets/images/card/person-walking.jpeg" class="text-white">
2
​
3
<!-- Card Overlay -->
4
<bs-card-img-overlay>
5
​
6
<h2 class="card-title text-white">Card title</h2>
7
​
8
<!-- Card Text -->
9
<p class="card-text">
10
This is a wider card with supporting text below as a natural lead-in to additional content.
11
This content is a little bit longer.
12
</p>
13
<p class="card-text">Last updated 3 mins ago</p>
14
<!-- /card text -->
15
​
16
</bs-card-img-overlay>
17
<!-- /card overlay -->
18
​
19
</bs-card>
Copied!
Card Border Style
Preview
HTML
1
<bs-card card-title="Header & Footer" class="border border-primary">
2
​
3
<!-- Card Header -->
4
<bs-card-header class="h4 border-bottom border-primary">Header</bs-card-header>
5
<!-- /card header -->
6
​
7
<!-- Card Text-->
8
<p class="card-text">
9
Some quick example text to build on the
10
card title and make up the bulk of the
11
card's content.
12
</p>
13
<!-- /card text-->
14
​
15
<!-- Card Footer -->
16
<bs-card-footer class="border-top border-primary">2 days ago | footer content</bs-card-footer>
17
<!-- /card footer -->
18
​
19
</bs-card>
Copied!
Last modified 2yr ago