diff --git a/docs/en/UI/Angular/Card-Component.md b/docs/en/UI/Angular/Card-Component.md
new file mode 100644
index 0000000000..683deea8ec
--- /dev/null
+++ b/docs/en/UI/Angular/Card-Component.md
@@ -0,0 +1,50 @@
+# 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. 
+
+```ts
+// 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:
+```ts
+
+// 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:
+
+![abp-card-component](./images/abp-card-component.png)
+
diff --git a/docs/en/UI/Angular/images/abp-card-component.png b/docs/en/UI/Angular/images/abp-card-component.png
new file mode 100644
index 0000000000..726c617772
Binary files /dev/null and b/docs/en/UI/Angular/images/abp-card-component.png differ