diff --git a/src/components/CustomCard/index.tsx b/src/components/CustomCard/index.tsx
new file mode 100644
index 0000000..bd0c1ea
--- /dev/null
+++ b/src/components/CustomCard/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Card } from '@arco-design/web-react';
+import style from './style/index.module.less';
+
+interface CustomCardProps {
+  children: React.ReactNode;
+  hoverable?: boolean;
+  className?: string;
+
+  [key: string]: any; // 其余可支持属性参考文档：https://arco.design/react/components/card
+}
+
+const CustomCard: React.FC<CustomCardProps> = ({ children, hoverable = true, className = '', ...restProps }) => {
+  return (
+    <Card
+      className={`${style['card-custom-hover-style']} ${className}`}
+      hoverable={hoverable}
+      {...restProps}
+    >
+      {children}
+    </Card>
+  );
+};
+
+export default CustomCard;
diff --git a/src/components/CustomCard/style/index.module.less b/src/components/CustomCard/style/index.module.less
new file mode 100644
index 0000000..337c0e2
--- /dev/null
+++ b/src/components/CustomCard/style/index.module.less
@@ -0,0 +1,7 @@
+.card-custom-hover-style {
+  transition-property: all;
+}
+
+.card-custom-hover-style:hover {
+  transform: translateY(-4px);
+}
\ No newline at end of file