abp/docs/en/UI/Angular/Card-Component.md

Card Component

ABP Card component is a wrapper component for bootstrap card class.

Usage

ABP Card component is a built-in ThemeSharedModule component. If you imported shared module into your feature module, you don't need to do anything.

// my-feature.module.ts

import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { CardDemoComponent } from './chart-demo.component';

@NgModule({
  imports: [
    SharedModule,
    // ...
  ],
  declarations: [CardDemoComponent],
  // ...
})
export class MyFeatureModule {}

Then, abp-card component can be used. See example below:

// card-demo.component.ts

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

@Component({
  selector: 'app-card-demo',
  template: ` 
    <abp-card [cardStyle]="width: 18rem;">
      <abp-card-body>
        <abp-card-title>Lorem Ipsum</abp-card-title>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo condimentum ligula, sed varius nibh eleifend sit amet. Maecenas facilisis vel arcu nec maximus.</abp-card-body>
    </abp-card> 
  `,
})
export class CardDemoComponent { }

See the result below: