diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-body.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-body.component.spec.ts
new file mode 100644
index 0000000000..83cc302625
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-body.component.spec.ts
@@ -0,0 +1,46 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CardBodyComponent } from '../components';
+
+describe('AbpCardBodyComponent', () => {
+  let spectator: SpectatorHost<CardBodyComponent>;
+
+  const createHost = createHostFactory(CardBodyComponent);
+
+  beforeEach(
+    () =>
+      (spectator = createHost(
+        ` <abp-card-body 
+        [cardBodyStyle]="{'background-color':'red'}" 
+      > 
+      <p>Body</p>
+    </abp-card-body>`,
+        {
+          hostProps: { attributes: { autofocus: '', name: 'abp-card-body' } },
+        },
+      )),
+  );
+
+  it('should create an instance', () => {
+    expect(spectator).toBeTruthy();
+  });
+
+  it('should have class card-body', () => {
+    expect(spectator.element.classList).toContain('card-body');
+  });
+
+  it('should have div', () => {
+    expect(spectator.query('div')).toBeTruthy();
+  });
+
+  it('should have background-color red', () => {
+    expect((spectator.query('div') as HTMLElement).style.backgroundColor).toEqual('red');
+  });
+
+  it('should have p tag', () => {
+    expect(spectator.query('p')).toBeTruthy();
+  });
+
+  it('should have p tag with Body text', () => {
+    expect(spectator.query('p').textContent).toContain('Body');
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-footer.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-footer.component.spec.ts
new file mode 100644
index 0000000000..2b98479b9f
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-footer.component.spec.ts
@@ -0,0 +1,46 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CardFooterComponent } from '../components';
+
+describe('AbpCardFooterComponent', () => {
+  let spectator: SpectatorHost<CardFooterComponent>;
+
+  const createHost = createHostFactory(CardFooterComponent);
+
+  beforeEach(
+    () =>
+      (spectator = createHost(
+        `<abp-card-footer 
+      [cardFooterStyle]="{'background-color':'red'}" 
+    > 
+    <p>Footer</p>
+  </abp-card-footer>`,
+        {
+          hostProps: { attributes: { autofocus: '', name: 'abp-card-footer' } },
+        },
+      )),
+  );
+
+  it('should create an instance', () => {
+    expect(spectator).toBeTruthy();
+  });
+
+  it('should have class card-footer', () => {
+    expect(spectator.element.classList).toContain('card-footer');
+  });
+
+  it('should have div', () => {
+    expect(spectator.query('div')).toBeTruthy();
+  });
+
+  it('should have background-color red', () => {
+    expect((spectator.query('div') as HTMLElement).style.backgroundColor).toEqual('red');
+  });
+
+  it('should have p tag', () => {
+    expect(spectator.query('p')).toBeTruthy();
+  });
+
+  it('should have p tag with Footer text', () => {
+    expect((spectator.query('p') as HTMLElement).textContent).toContain('Footer');
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.component.spec.ts
new file mode 100644
index 0000000000..279cfe90bf
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.component.spec.ts
@@ -0,0 +1,37 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CardHeaderComponent } from '../components';
+
+describe('AbpCardHeaderComponent', () => {
+  let spectator: SpectatorHost<CardHeaderComponent>;
+  const createHost = createHostFactory(CardHeaderComponent);
+
+  beforeEach(
+    () =>
+      (spectator = createHost(
+        ` <abp-card-header 
+        [cardHeaderStyle]="{'background-color':'red'}" 
+      >
+      Header
+      </abp-card-header>`,
+        {
+          hostProps: { attributes: { autofocus: '', name: 'abp-card-header' } },
+        },
+      )),
+  );
+
+  it('should create an instance', () => {
+    expect(spectator).toBeTruthy();
+  });
+
+  it('should have class card-header', () => {
+    expect(spectator.element.classList).toContain('card-header');
+  });
+
+  it('should have background-color red', () => {
+    expect((spectator.query('div') as HTMLElement).style.backgroundColor).toEqual('red');
+  });
+
+  it('should have Header text', () => {
+    expect(spectator.element.textContent).toContain('Header');
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts
new file mode 100644
index 0000000000..d811014447
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts
@@ -0,0 +1,28 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CardHeader } from '../components';
+
+describe('AbpCardHeaderDirective', () => {
+  let spectator: SpectatorHost<CardHeader>;
+
+  const createHost = createHostFactory(CardHeader);
+
+  beforeEach(
+    () =>
+      (spectator = createHost(
+        `<div
+      abpCardHeader>
+    </div>`,
+        {
+          hostProps: { attributes: { autofocus: '', name: 'abp-card-header' } },
+        },
+      )),
+  );
+
+  it('should create an instance', () => {
+    expect(spectator).toBeTruthy();
+  });
+
+  it('should have class card-header', () => {
+    expect(spectator.element.classList).toContain('card-header');
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-img-top.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-img-top.directive.spec.ts
new file mode 100644
index 0000000000..2a1ee9cff3
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-img-top.directive.spec.ts
@@ -0,0 +1,25 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CardImgTop } from '../components';
+
+describe('AbpCardImgTopDirective', () => {
+  let spectator: SpectatorHost<CardImgTop>;
+
+  const createHost = createHostFactory(CardImgTop);
+
+  beforeEach(
+    () =>
+      (spectator = createHost(
+        `<img
+      abpCardImgTop
+    />`,
+      )),
+  );
+
+  it('should create an instance', () => {
+    expect(spectator).toBeTruthy();
+  });
+
+  it('should have class card-img-top', () => {
+    expect(spectator.element.classList).toContain('card-img-top');
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-subtitle.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-subtitle.directive.spec.ts
new file mode 100644
index 0000000000..4995067635
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-subtitle.directive.spec.ts
@@ -0,0 +1,22 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CardSubtitle } from '../components';
+
+describe('AbpCardSubtitleDirective', () => {
+  let spectator: SpectatorHost<CardSubtitle>;
+
+  const createHost = createHostFactory(CardSubtitle);
+
+  beforeEach(() => (spectator = createHost(`<p abpCardSubtitle>CardSubtitle</p>`)));
+
+  it('should create an instance', () => {
+    expect(spectator).toBeTruthy();
+  });
+
+  it('should have class card-subtitle', () => {
+    expect(spectator.element.classList).toContain('card-subtitle');
+  });
+
+  it('should have CardSubtitle text', () => {
+    expect(spectator.element.textContent).toContain('CardSubtitle');
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-title.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-title.directive.spec.ts
new file mode 100644
index 0000000000..10360e23aa
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-title.directive.spec.ts
@@ -0,0 +1,18 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CardTitle } from '../components';
+
+describe('AbpCardTitleDirective', () => {
+  let spectator: SpectatorHost<CardTitle>;
+
+  const createHost = createHostFactory(CardTitle);
+
+  beforeEach(() => (spectator = createHost(`<h5 abpCardTitle>CardTitle</h5>`)));
+
+  it('should create an instance', () => {
+    expect(spectator).toBeTruthy();
+  });
+
+  it('should have class card-title', () => {
+    expect(spectator.element.classList).toContain('card-title');
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card.component.spec.ts
new file mode 100644
index 0000000000..3dbc2156f1
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card.component.spec.ts
@@ -0,0 +1,75 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import {
+  CardComponent,
+  CardBodyComponent,
+  CardFooterComponent,
+  CardHeaderComponent,
+  CardHeader,
+  CardTitle,
+  CardImgTop,
+  CardSubtitle,
+} from '../components/card';
+
+describe('CardComponent', () => {
+  let spectator: SpectatorHost<CardComponent>;
+
+  const createHost = createHostFactory({
+    component: CardComponent,
+    declarations: [
+      CardHeaderComponent,
+      CardTitle,
+      CardSubtitle,
+      CardBodyComponent,
+      CardImgTop,
+      CardFooterComponent,
+    ],
+  });
+
+  beforeEach(
+    () =>
+      (spectator = createHost(
+        `
+        <abp-card>
+          <abp-card-header>
+            <abp-card-title>Card title</abp-card-title>
+            <p abp-card-subtitle>Card subtitle</p>  
+          </abp-card-header>
+          <abp-card-body>
+            <abp-card-img-top src="https://picsum.photos/200/300"></abp-card-img-top>
+            <p abpCardSubtitle>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          </abp-card-body>
+          <abp-card-footer>
+            <a href="#" class="btn btn-primary">Go somewhere</a>
+          </abp-card-footer>
+        </abp-card>
+        `,
+        {
+          hostProps: { attributes: { autofocus: '', name: 'abp-card' } },
+        },
+      )),
+  );
+
+  it('should display the card-header', () => {
+    expect(spectator.query('abp-card-header')).toBeTruthy();
+  });
+
+  it('should display the card-title', () => {
+    expect(spectator.query('abp-card-title')).toBeTruthy();
+  });
+
+  it('should display the card-subtitle', () => {
+    expect(spectator.query('p[abp-card-subtitle]')).toBeTruthy();
+  });
+
+  it('should display the card-body', () => {
+    expect(spectator.query('abp-card-body')).toBeTruthy();
+  });
+
+  it('should display the card-img-top', () => {
+    expect(spectator.query('abp-card-img-top')).toBeTruthy();
+  });
+
+  it('should display the card-footer', () => {
+    expect(spectator.query('abp-card-footer')).toBeTruthy();
+  });
+});