Drift Angular
Search…
Drift Angular
Overview
Package Content
Installation and Setup
Setup Environment
Setup Project
Setup Layout
Deployment
Structure
Folders and Files Structure
Layouts
Drift Icons
Stylesheets
Overview
Sass Variables
Layouts & Theme
Fonts
Colors
Back Ground Images
Margin & Paddings
Theme Customization
RTL Version
Settings
Template Setting
Customize Horizontal Menu
Customize Vertical Menu
Create a Page
Define Routes
Root Loader
RTL
Internationalization
Components
Alerts
Badges
Breadcrumbs
Buttons
Button Group
Cards
Card Group
Collapse
Dropdowns
Progress Bar
Tabs
Powered By GitBook
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!
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!
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!
Components - Previous
Button Group
Next - Components
Card Group
Last modified 1yr ago
Copy link
Contents
Basic Card
Card With Body Only
Titles & Links
Card With List Group
Card With Tabs
Tabs In Button Style
Card With Header & Footer
Card Background Style
Card Image Overlay
Card Border Style