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-header.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts
new file mode 100644
index 0000000000..e7ecbfd881
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-header, [abp-card-header], [abpCardHeader]`,
+  host: {
+    class: 'card-header',
+  },
+})
+export class CardHeader {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts
new file mode 100644
index 0000000000..384f9f3989
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
+  host: {
+    class: 'card-img-top',
+  },
+})
+export class CardImgTop {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts
new file mode 100644
index 0000000000..862a439ea8
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
+  host: {
+    class: 'card-subtitle',
+  },
+})
+export class CardSubtitle {}
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-title.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts
new file mode 100644
index 0000000000..143a868b64
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
+  host: {
+    class: 'card-title',
+  },
+})
+export class CardTitle {}
\ No newline at end of file
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..149866bff0 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,14 @@
-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';
+
 
 @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>
+    <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..1a3e62113c 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,28 @@
 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 { CardHeaderComponent } from './card-header.component';
+import { CardFooterComponent } from './card-footer.component';
+import { CardTitle } from './card-title.directive';
+import { CardSubtitle } from './card-subtitle.directive';
+import { CardImgTop } from './card-img-top.directive';
+import { CardHeader } from './card-header.directive';
 
-const declarationsWithExports = [CardComponent, CardBodyComponent, CardTitleComponent];
+const declarationsWithExports = [
+  CardComponent,
+  CardBodyComponent,
+  CardHeaderComponent,
+  CardFooterComponent,
+  CardTitle,
+  CardSubtitle,
+  CardImgTop,
+  CardHeader,
+];
 
 @NgModule({
   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..ab901f35fe 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,9 @@
 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';
+export * from './card-title.directive';
+export * from './card-subtitle.directive';
+export * from './card-img-top.directive';
+export * from './card-header.directive';
\ 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 c7dad57f77..0fea3f166c 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
@@ -76,8 +76,8 @@ const declarationsWithExports = [
     NgxDatatableModule,
     EllipsisModule,
     NgxValidateCoreModule,
-    ...declarationsWithExports,
     CardModule,
+    ...declarationsWithExports
   ],
   providers: [DatePipe],
 })