Card Group
Last updated
Last updated
To use Card Group, first import SharedModule in your module.
import {SharedModule} from '@gaxon/modules';
@NgModule({
...
imports: [SharedModule, ...],
...
})
export class YourAppModule {
}<!-- Card Group -->
<div class="card-group mb-8">
<!-- Card -->
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/vegetable.jpeg', caption: 'Vegetable'}">
<!-- 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>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/plant.jpeg', caption: 'plant'}">
<!-- 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 Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/coffee-cookies.jpeg', caption: 'Coffee'}">
<!-- Card Text-->
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content. This card
has even longer content than the first to show that equal height action.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</bs-card>
<!-- /card -->
</div>
<!-- /card group --><div class="card-deck mb-8">
<!-- Card -->
<bs-card card-title="Card Title"
[card-img-top]="{url:'assets/images/card/asphalt-balancing.jpeg', caption: 'Balancing'}">
<!-- 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>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card card-title="Card Title" [card-img-top]="{url:'assets/images/card/sunset.jpeg', caption: 'sunset'}">
<!-- 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 Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card card-title="Card Title"
[card-img-top]="{url:'assets/images/card/person-walking.jpeg', caption: 'Person'}">
<!-- Card Text-->
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content. This card
has even longer content than the first to show that equal height action.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</bs-card>
<!-- /card -->
</div><div class="card-columns">
<!-- Card -->
<bs-card card-title="Card title that wraps to a new line"
[card-img-top]="{url:'assets/images/card/painted-hand.jpeg', caption: 'Hand'}">
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card [hasBody]="false">
<bs-card-outer-body>
<!-- Blockquote -->
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
<!-- /blockquote -->
</bs-card-outer-body>
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/bottle.jpeg', caption: 'Bottle'}">
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card class="bg-primary text-center" [hasBody]="false">
<!-- Card Body -->
<bs-card-outer-body>
<blockquote class="blockquote mb-0 text-white card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</bs-card-outer-body>
<!-- /card body -->
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card card-title="Card title" class="text-center">
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card [hasBody]="false"
[card-img]="{url:'assets/images/card/doughnut.jpeg', caption: 'Doughnut', classlist: 'card-img'}"></bs-card>
<!-- /card -->
<!-- Card -->
<bs-card class="text-right" [hasBody]="false">
<!-- Card Body -->
<bs-card-outer-body>
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</bs-card-outer-body>
<!-- /card body -->
</bs-card>
<!-- /card -->
<!-- Card -->
<bs-card card-title="Card title">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</bs-card>
<!-- /card -->
</div>
