diff --git a/components/CardsGrid/index.tsx b/components/CardsGrid/index.tsx
new file mode 100644
index 000000000..cfc18e8cc
--- /dev/null
+++ b/components/CardsGrid/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import './style.scss';
+
+const Card = ({ children }) => <div className="Card">{children}</div>;
+
+const CardsGrid = ({ columns = 2, children }) => {
+  columns = columns >= 2 ? columns : 2;
+  return (
+    <div className="CardsGrid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+      {React.Children.map(children, e => (
+        <Card>{e}</Card>
+      ))}
+    </div>
+  );
+};
+
+export default CardsGrid;
diff --git a/components/CardsGrid/style.scss b/components/CardsGrid/style.scss
new file mode 100644
index 000000000..7e87f9343
--- /dev/null
+++ b/components/CardsGrid/style.scss
@@ -0,0 +1,12 @@
+.CardsGrid {
+  display: grid;
+  gap: 20px;
+
+  .Card {
+    padding: 10px;
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(black, 0.1);
+    border-radius: 5px;
+    box-shadow: 0 1px 2px #{rgba(black, 0.05)}, 0 2px 5px #{rgba(black, 0.02)};
+  }
+}
diff --git a/components/index.ts b/components/index.ts
index f11815d19..1b4ff96ed 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,5 +1,6 @@
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
+export { default as Cards } from './CardsGrid';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';