Cards

To use Card, first import SharedModule in your module.
import {SharedModule} from '@gaxon/modules';
​
@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
Basic Card
Preview
HTML
Preview
HTML
<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
Preview
HTML
Preview
HTML
<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
Preview
HTML
Preview
HTML
<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
Preview
HTML
Preview
HTML
<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
Preview
HTML
TypeScript
Preview
HTML
<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>
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;
  }
}
​
Tabs In Button Style
Preview
HTML
TypeScript
Preview
HTML
<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>
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;
  }
}
​
Card With Header & Footer 
Preview
HTML
Preview
HTML
<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
Preview
HTML
Preview
HTML
<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
Preview
HTML
Preview
HTML
<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
Preview
HTML
Preview
HTML
<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>
Components - Previous
Button Group
Next - Components
Card Group
Last updated 2 years ago