Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page
  • Basic Card Groups
  • Decks Card Groups
  • Card Columns

Was this helpful?

  1. Components

Card Group

PreviousCardsNextCollapse

Last updated 5 years ago

Was this helpful?

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

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

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

Basic Card Groups

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

Decks Card Groups

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

Card Columns

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