Card Group
To use Card Group, first import SharedModule in your module.
import {SharedModule} from '@gaxon/modules';
@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}Basic Card Groups

<!-- 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 -->Decks Card Groups

<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>Card Columns

<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>Last updated
Was this helpful?
