Drift Angular
Search…
Card Group
To use Card Group, 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 Groups

Preview
Html
1
<!-- Card Group -->
2
<div class="card-group mb-8">
3
4
<!-- Card -->
5
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/vegetable.jpeg', caption: 'Vegetable'}">
6
<!-- Card Text-->
7
<p class="card-text">
8
This is a wider card with supporting text below as a natural lead-in to additional content. This
9
content
10
is a little bit longer.
11
</p>
12
<!-- /card text-->
13
14
<!-- Card Text-->
15
<p class="card-text">
16
<small class="text-muted">Last updated 3 mins ago</small>
17
</p>
18
<!-- /card text-->
19
20
</bs-card>
21
<!-- /card -->
22
23
<!-- Card -->
24
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/plant.jpeg', caption: 'plant'}">
25
26
<!-- Card Text-->
27
<p class="card-text">
28
Some quick example text to build on the
29
card title and make up the bulk of the
30
card's content.
31
</p>
32
<!-- /card text-->
33
34
<!-- Card Text-->
35
<p class="card-text">
36
<small class="text-muted">Last updated 3 mins ago</small>
37
</p>
38
<!-- /card text-->
39
40
</bs-card>
41
<!-- /card -->
42
43
<!-- Card -->
44
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/coffee-cookies.jpeg', caption: 'Coffee'}">
45
46
<!-- Card Text-->
47
<p class="card-text">
48
This is a wider card with supporting text below as a natural lead-in to additional content. This card
49
has even longer content than the first to show that equal height action.
50
</p>
51
<!-- /card text-->
52
53
<!-- Card Text-->
54
<p class="card-text">
55
<small class="text-muted">Last updated 3 mins ago</small>
56
</p>
57
<!-- /card text-->
58
59
</bs-card>
60
<!-- /card -->
61
62
</div>
63
<!-- /card group -->
Copied!

Decks Card Groups

Preview
HTML
1
<div class="card-deck mb-8">
2
3
<!-- Card -->
4
<bs-card card-title="Card Title"
5
[card-img-top]="{url:'assets/images/card/asphalt-balancing.jpeg', caption: 'Balancing'}">
6
7
<!-- Card Text-->
8
<p class="card-text">
9
This is a wider card with supporting text below as a natural lead-in to additional content. This
10
content
11
is a little bit longer.
12
</p>
13
<!-- /card text-->
14
15
<!-- Card Text-->
16
<p class="card-text">
17
<small class="text-muted">Last updated 3 mins ago</small>
18
</p>
19
<!-- /card text-->
20
21
</bs-card>
22
<!-- /card -->
23
24
<!-- Card -->
25
<bs-card card-title="Card Title" [card-img-top]="{url:'assets/images/card/sunset.jpeg', caption: 'sunset'}">
26
27
<!-- Card Text-->
28
<p class="card-text">
29
Some quick example text to build on the
30
card title and make up the bulk of the
31
card's content.
32
</p>
33
<!-- /card text-->
34
35
<!-- Card Text-->
36
<p class="card-text">
37
<small class="text-muted">Last updated 3 mins ago</small>
38
</p>
39
<!-- /card text-->
40
41
</bs-card>
42
<!-- /card -->
43
44
<!-- Card -->
45
<bs-card card-title="Card Title"
46
[card-img-top]="{url:'assets/images/card/person-walking.jpeg', caption: 'Person'}">
47
48
<!-- Card Text-->
49
<p class="card-text">
50
This is a wider card with supporting text below as a natural lead-in to additional content. This card
51
has even longer content than the first to show that equal height action.
52
</p>
53
<!-- /card text-->
54
55
<!-- Card Text-->
56
<p class="card-text">
57
<small class="text-muted">Last updated 3 mins ago</small>
58
</p>
59
<!-- /card text-->
60
61
</bs-card>
62
<!-- /card -->
63
64
</div>
Copied!

Card Columns

Preview
HTML
1
<div class="card-columns">
2
3
<!-- Card -->
4
<bs-card card-title="Card title that wraps to a new line"
5
[card-img-top]="{url:'assets/images/card/painted-hand.jpeg', caption: 'Hand'}">
6
7
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
8
content. This content is a little bit longer.</p>
9
10
</bs-card>
11
<!-- /card -->
12
13
<!-- Card -->
14
<bs-card [hasBody]="false">
15
16
<bs-card-outer-body>
17
<!-- Blockquote -->
18
<blockquote class="blockquote mb-0 card-body">
19
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
20
<footer class="blockquote-footer">
21
<small class="text-muted">
22
Someone famous in <cite title="Source Title">Source Title</cite>
23
</small>
24
</footer>
25
</blockquote>
26
<!-- /blockquote -->
27
</bs-card-outer-body>
28
29
</bs-card>
30
<!-- /card -->
31
32
<!-- Card -->
33
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/bottle.jpeg', caption: 'Bottle'}">
34
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
35
<p class="card-text">
36
<small class="text-muted">Last updated 3 mins ago</small>
37
</p>
38
</bs-card>
39
<!-- /card -->
40
41
<!-- Card -->
42
<bs-card class="bg-primary text-center" [hasBody]="false">
43
44
<!-- Card Body -->
45
<bs-card-outer-body>
46
<blockquote class="blockquote mb-0 text-white card-body">
47
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
48
<footer class="blockquote-footer text-white">
49
<small>
50
Someone famous in <cite title="Source Title">Source Title</cite>
51
</small>
52
</footer>
53
</blockquote>
54
</bs-card-outer-body>
55
<!-- /card body -->
56
57
</bs-card>
58
<!-- /card -->
59
60
<!-- Card -->
61
<bs-card card-title="Card title" class="text-center">
62
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
63
<p class="card-text">
64
<small class="text-muted">Last updated 3 mins ago</small>
65
</p>
66
</bs-card>
67
<!-- /card -->
68
69
<!-- Card -->
70
<bs-card [hasBody]="false"
71
[card-img]="{url:'assets/images/card/doughnut.jpeg', caption: 'Doughnut', classlist: 'card-img'}"></bs-card>
72
<!-- /card -->
73
74
<!-- Card -->
75
<bs-card class="text-right" [hasBody]="false">
76
77
<!-- Card Body -->
78
<bs-card-outer-body>
79
<blockquote class="blockquote mb-0 card-body">
80
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
81
<footer class="blockquote-footer">
82
<small class="text-muted">
83
Someone famous in <cite title="Source Title">Source Title</cite>
84
</small>
85
</footer>
86
</blockquote>
87
</bs-card-outer-body>
88
<!-- /card body -->
89
90
</bs-card>
91
<!-- /card -->
92
93
<!-- Card -->
94
<bs-card card-title="Card title">
95
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
96
content. This card has even longer content than the first to show that equal height action.</p>
97
<p class="card-text">
98
<small class="text-muted">Last updated 3 mins ago</small>
99
</p>
100
</bs-card>
101
<!-- /card -->
102
103
</div>
Copied!
Last modified 2yr ago