diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
index b7efd90236..4f6d8a9b73 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
@@ -1,9 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-body',
-  template: `<div class="card-body">
-    <ng-content></ng-content>
-  </div>`,
+  template: `
+    <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle" >
+      <ng-content></ng-content>
+    </div>`,
+  host: {
+    class: 'card-body',
+  }
 })
-export class CardBodyComponent {}
+export class CardBodyComponent {
+  @Input() cardBodyClass: string;
+  @Input() cardBodyStyle: string;
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
new file mode 100644
index 0000000000..ed5f0c64f3
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-footer',
+  template: `
+    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass" >
+      <ng-content ></ng-content>
+    </div>
+  `,
+  styles: [],
+  host: {
+    class: 'card-footer',
+  }
+})
+export class CardFooterComponent {
+  @Input() cardFooterStyle: string;
+  @Input() cardFooterClass: string;
+
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
new file mode 100644
index 0000000000..1ec374757c
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-header',
+  template: `
+    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
+      <ng-content ></ng-content>
+    </div>
+  `,
+  styles: [],
+  host: {
+    class: 'card-header',
+  }
+})
+export class CardHeaderComponent {
+  @Input() cardHeaderClass: string;
+  @Input() cardHeaderStyle: string;
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts
deleted file mode 100644
index f629636854..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'abp-card-title',
-  template: `<div class="card-title">
-    <ng-content></ng-content>
-  </div>`,
-})
-export class CardTitleComponent {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
index 317e5800b9..97ef13d6ce 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
@@ -1,22 +1,55 @@
-import { Component, ContentChild, Input } from '@angular/core';
-import { CardBodyComponent } from './card-body.component';
-import { CardTitleComponent } from './card-title.component';
+import { Component, Directive, Input } from '@angular/core';
+
+@Directive({
+  selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
+  host: {
+    class: 'card-title',
+  },
+})
+export class CardTitle{} 
+
+@Directive({
+  selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
+  host: {
+    class: 'card-subtitle',
+  },
+})
+export class CardSubtitle{} 
+
+@Directive({
+  selector: `abp-card-text, [abp-card-text], [abpCardText]`,
+  host: {
+    class: 'card-text',
+  },
+})
+export class CardText{} 
+
+@Directive({
+  selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
+  host: {
+    class: 'card-img-top',
+  },
+})
+export class CardImgTop{} 
+
+@Directive({
+  selector: `abp-card-link, [abp-card-link], [abpCardLink]`,
+  host: {
+    class: 'card-link',
+  },
+})
+export class CardLink{} 
+
 
 @Component({
   selector: 'abp-card',
-  template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
-    <ng-content *ngIf="cardTitleTemplate" select="abp-card-title"></ng-content>
-    <ng-content *ngIf="cardBodyTemplate" select="abp-card-body"></ng-content>
+  template: ` 
+  <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
+    <ng-content ></ng-content>
   </div>`,
 })
 export class CardComponent {
   @Input() cardClass: string;
 
   @Input() cardStyle: string;
-
-  @ContentChild(CardBodyComponent)
-  cardBodyTemplate?: CardBodyComponent;
-
-  @ContentChild(CardTitleComponent)
-  cardTitleTemplate?: CardTitleComponent;
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts
index d8050a40cd..e2f73ea73c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts
@@ -1,14 +1,34 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { CardBodyComponent } from './card-body.component';
-import { CardTitleComponent } from './card-title.component';
-import { CardComponent } from './card.component';
+import { 
+  CardComponent, 
+  CardImgTop, 
+  CardLink, 
+  CardSubtitle, 
+  CardText, 
+  CardTitle 
+} from './card.component';
+import { CardHeaderComponent } from './card-header.component';
+import { CardFooterComponent } from './card-footer.component';
 
-const declarationsWithExports = [CardComponent, CardBodyComponent, CardTitleComponent];
+const declarationsWithExports = [
+  CardComponent,
+  CardBodyComponent,
+  CardHeaderComponent,
+  CardFooterComponent,
+  CardTitle,
+  CardSubtitle,
+  CardText,
+  CardImgTop,
+  CardLink,
+];
 
 @NgModule({
-  declarations: [...declarationsWithExports],
+  declarations: [
+    ...declarationsWithExports,
+  ],
   imports: [CommonModule],
   exports: [...declarationsWithExports],
 })
-export class CardModule {}
+export class CardModule { }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts
index 8d6bbd86d8..bd8e03c2ec 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts
@@ -1,4 +1,5 @@
 export * from './card.module';
 export * from './card.component';
 export * from './card-body.component';
-export * from './card-title.component';
+export * from './card-footer.component';
+export * from './card-header.component';
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index 35ab43177b..434f5cd39c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -72,8 +72,8 @@ const declarationsWithExports = [
     NgxDatatableModule,
     EllipsisModule,
     NgxValidateCoreModule,
-    ...declarationsWithExports,
     CardModule,
+    ...declarationsWithExports
   ],
   providers: [DatePipe],
 })