# 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXImIpsC3UdawiD%2Fexample-1.png?alt=media\&token=f167b29e-b6f1-409d-926b-c9d55f99fbe7)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXTfbU5CslUW2qs%2Fexample-2.png?alt=media\&token=069ff827-32cc-44ea-bdda-14c8d405a4dc)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXQI_cuxsvcslVt%2Fexample-3.png?alt=media\&token=40a49047-2499-4c2e-a80d-660b8ba7e47f)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXR2KiH9p-VO6Dn%2Fexample-4.png?alt=media\&token=4eab9ac9-e7e0-4365-b74c-58927ede11ae)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXO4hCTrsNjXuYb%2Fexample-6.png?alt=media\&token=6ca26feb-3d6c-4ffe-9126-cd54d7796ca0)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXS9iSoRxfM5AtX%2Fexample-5.png?alt=media\&token=5d999718-d0fd-4cc8-9abf-346ab3b5b5ba)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuJINgdhhGGhq2u0RXX%2F-LuJJlSYrRwhi8g_oxbl%2Fcard-herader-footer.png?alt=media\&token=aefb47e1-bd8b-4f09-bd5e-03eaee6f1d60)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXP8Ku9SoviWPQQ%2Fexample-8.png?alt=media\&token=c8f4f098-9815-4ae2-8d16-4656e9b0ce9f)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXMF1TEuvdCXI7u%2Fexample-7.png?alt=media\&token=7b798581-2ee7-46a7-a62d-23d4f7a9d85c)
{% 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" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuJTQUTtq1ehpWkkpdL%2F-LuJTgTU7L-zJ0G7F8DX%2Fcard-border-style.png?alt=media\&token=dc0980e6-c080-4f14-b687-7508e23d9b51)
{% 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 %}