# Cards

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

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

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

### Basic Card

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXImIpsC3UdawiD)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Card title" card-img-top="assets/images/card/skateboard.jpeg">
  <!-- 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 Button-->
  <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
  <!-- /card button-->
</bs-card>
```

{% endtab %}
{% endtabs %}

### Card With Body Only

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXTfbU5CslUW2qs)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card>

  <!-- Card Text-->
  <p class="card-text">
    This is some text within a card body. Use
    it wisely :)
  </p>
  <!-- /card text-->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Titles & Links

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXQI_cuxsvcslVt)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Titles & Links">

  <h4 class="card-subtitle">Subtitle text</h4>

  <!-- 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 Link-->
  <a href="javascript:void(0)" class="card-link">Goto Link</a>
  <a href="javascript:void(0)" class="card-link">Another Link</a>
  <!-- /card link-->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card With List Group

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXR2KiH9p-VO6Dn)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Kitchen Sink" card-img-top="assets/images/card/vegetable.jpeg">

  <!-- Card Text-->
  <p class="card-text lead">
    Mix and match multiple content types
    to create the card you need, or throw
    everything in there.
  </p>

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

  <bs-card-outer-body>
    <!-- List Group -->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <!-- /list group-->
  </bs-card-outer-body>

  <bs-card-body>
    <!-- Card Body -->

    <!-- Card Button-->
    <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
    <a href="javascript:void(0)" class="card-link">Card Link</a>
    <!-- /card button-->


    <!-- /card body -->
  </bs-card-body>

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card With Tabs

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXO4hCTrsNjXuYb)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card [hasBody]="false">

  <!-- Card header -->
  <bs-card-header class="card-nav">
    <ul class="card-header-tabs nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardTab === 1}" href="#tab-pane1" (click)="onClickTab($event, 1)">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardTab === 2}" data-toggle="tab" href="#tab-pane2"
           (click)="onClickTab($event, 2)">Link</a>
      </li>
      <li class="nav-item">
        <a href="#tab-pane3" [ngClass]="{active:cardTab === 3}" class="nav-link disabled"
           (click)="$event.preventDefault()">Disabled</a>
      </li>
    </ul>
  </bs-card-header>
  <!-- /card header -->

  <!-- Tab Content-->
  <bs-card-outer-body class="tab-content">

    <!-- Tab panel -->
    <div [ngClass]="{active:cardTab === 1}" class="tab-pane">

      <!-- Card Body -->
      <bs-card-body card-title="Card With Tabs">

        <!-- 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 Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <!-- /card link-->

      </bs-card-body>
      <!-- /card body -->

    </div>
    <!-- /tab panel -->

    <!-- Tab panel -->
    <div [ngClass]="{active:cardTab === 2}" class="tab-pane">

      <!-- Card Body -->
      <bs-card-body card-title="Card With Tabs">

        <!-- Card Text-->
        <p class="card-text">
          Mix and match multiple content types to create the card you need, or throw everything in there.
        </p>
        <!-- /card text-->

        <!-- Card Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <!-- /card link-->

      </bs-card-body>
      <!-- /card body -->

    </div>
    <!-- /tab panel -->

    <!-- Tab panel -->
    <div [ngClass]="{active:cardTab === 3}" class="tab-pane">

      <!-- Card Body -->
      <bs-card-body card-title="Card With Tabs">

        <!-- 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 Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <!-- /card link-->

      </bs-card-body>
      <!-- /card body -->

    </div>
    <!-- /tab panel -->

  </bs-card-outer-body>
  <!-- /tab content-->

</bs-card>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-bs-card',
  templateUrl: './bs-card.component.html',
  styleUrls: ['./bs-card.component.scss']
})
export class BsCardComponent {
  cardTab = 1;

  constructor() {}

  onClickTab(event, tab) {
    event.preventDefault();

    this.cardTab = tab;
  }
}

```

{% endtab %}
{% endtabs %}

### Tabs In Button Style

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXS9iSoRxfM5AtX)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card [hasBody]="false">

  <!-- Card header -->
  <bs-card-header>
    <ul class="card-header-pills nav nav-pills" role="tablist">
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardPillsTab === 1}" href="#tab-pane4"
           (click)="onClickPillosTab($event, 1)">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardPillsTab === 2}" href="#tab-pane5"
           (click)="onClickPillosTab($event, 2)">Link</a>
      </li>
      <li class="nav-item" [ngClass]="{active:cardPillsTab === 3}">
        <a href="#tab-pane6" (click)="$event.preventDefault()" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </bs-card-header>
  <!-- /card header -->

  <bs-card-outer-body>
    <!-- Tab Content-->
    <div class="tab-content">

      <!-- Tab panel -->
      <div class="tab-pane" [ngClass]="{active:cardPillsTab === 1}">

        <!-- Card Body -->
        <bs-card-body card-title="Tabs In Button Style">

          <!-- Card Text-->
          <p class="card-text">
            Mix and match multiple content types to create the card you need, or throw everything in there.
          </p>
          <!-- /card text-->

          <!-- Card Link-->
          <a href="javascript:void(0)" class="card-link">Goto Link</a>
          <!-- /card link-->

        </bs-card-body>
        <!-- /card body -->

      </div>
      <!-- /tab panel -->

      <!-- Tab panel -->
      <div class="tab-pane" [ngClass]="{active:cardPillsTab === 2}">

        <!-- Card Body -->
        <bs-card-body card-title="Tabs In Button Style">

          <!-- 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 Link-->
          <a href="javascript:void(0)" class="card-link">Goto Link</a>
          <!-- /card link-->

        </bs-card-body>
        <!-- /card body -->

      </div>
      <!-- /tab panel -->

      <!-- Tab panel -->
      <div class="tab-pane" [ngClass]="{active:cardPillsTab === 3}">

        <!-- Card Body -->
        <bs-card-body card-title="Tabs In Button Style">

          <!-- 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 Link-->
          <a href="javascript:void(0)" class="card-link">Goto Link</a>
          <!-- /card link-->

        </bs-card-body>
        <!-- /card body -->

      </div>
      <!-- /tab panel -->

    </div>
    <!-- /tab content-->

  </bs-card-outer-body>

</bs-card>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-bs-card',
  templateUrl: './bs-card.component.html',
  styleUrls: ['./bs-card.component.scss']
})
export class BsCardComponent {
  cardPillsTab = 1;

  constructor() {}

  onClickPillosTab(event, tab) {
    event.preventDefault();

    this.cardPillsTab = tab;
  }
}

```

{% endtab %}
{% endtabs %}

### Card With Header & Footer&#x20;

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuJJlSYrRwhi8g_oxbl)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Header & Footer">

  <!-- Card Header -->
  <bs-card-header class="h4">Left Aligned Card</bs-card-header>
  <!-- /card header -->

  <!-- Card Body -->

  <!-- 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 Button-->
  <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
  <!-- /card button-->

  <!-- /card body -->

  <!-- Card Footer -->
  <bs-card-footer class="text-muted">2 days ago | footer content</bs-card-footer>
  <!-- /card footer -->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card Background Style

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXP8Ku9SoviWPQQ)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card class="text-white bg-primary">

  <!-- Card Header -->
  <bs-card-header class="h4 text-white">Header</bs-card-header>
  <!-- /card header -->

  <!-- Card Title-->
  <h2 class="card-title text-white">Header & Footer</h2>
  <!-- Card Title-->

  <!-- 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 Footer -->
  <bs-card-footer>2 days ago | footer content</bs-card-footer>
  <!-- /card footer -->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card Image Overlay

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuFoiXMF1TEuvdCXI7u)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-img="assets/images/card/person-walking.jpeg" class="text-white">

  <!-- Card Overlay -->
  <bs-card-img-overlay>

    <h2 class="card-title text-white">Card title</h2>

    <!-- 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>
    <p class="card-text">Last updated 3 mins ago</p>
    <!-- /card text -->

  </bs-card-img-overlay>
  <!-- /card overlay -->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card Border Style

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuJTgTU7L-zJ0G7F8DX)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Header & Footer" class="border border-primary">

  <!-- Card Header -->
  <bs-card-header class="h4 border-bottom border-primary">Header</bs-card-header>
  <!-- /card header -->

  <!-- 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 Footer -->
  <bs-card-footer class="border-top border-primary">2 days ago | footer content</bs-card-footer>
  <!-- /card footer -->

</bs-card>
```

{% 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/cards.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.