# 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" %}
![](/files/-LuFpo5cOf0Qym8BBo_3)
{% 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" %}
![](/files/-LuFoiXL7cn5lZgaXr_y)
{% 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" %}
![](/files/-LuFoiXK4kvn0QoMFkoR)
{% 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift-angular.g-axon.work/components/card-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.