Cards

To use Card, first import SharedModule in your module.

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

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

Basic Card

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

Card With Body Only

<bs-card>

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

</bs-card>

Titles & Links

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

Card With List Group

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

Card With Tabs

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

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

Tabs In Button Style

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

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

Card With Header & Footer

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

Card Background Style

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

Card Image Overlay

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

Card Border Style

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

PreviousButton Group NextCard Group

Last updated 5 years ago

Was this helpful?