# Card Group

To use Card Group, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Card Groups

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuFooMwGKeJsytF8x0B%2F-LuFpo5cOf0Qym8BBo_3%2Fcg-example-1.png?alt=media\&token=39f4a84e-7929-4e63-81f2-11087bf77d77)
{% endtab %}

{% tab title="Html" %}

```markup
<!-- 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 -->
```

{% endtab %}
{% endtabs %}

### Decks Card Groups

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXL7cn5lZgaXr_y%2Fcg-example-2.png?alt=media\&token=814d3774-491f-4cd2-8987-1749c6a3bfcf)
{% endtab %}

{% tab title="HTML" %}

```markup
<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>
```

{% endtab %}
{% endtabs %}

### Card Columns

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXK4kvn0QoMFkoR%2Fcg-example-3.png?alt=media\&token=c436dad6-1c81-4775-a70d-341062d846fb)
{% endtab %}

{% tab title="HTML" %}

```markup
<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>
```

{% endtab %}
{% endtabs %}