diff --git a/src/components/Card/index.stories.tsx b/src/components/Card/index.stories.tsx
new file mode 100644
index 000000000..c953c2c58
--- /dev/null
+++ b/src/components/Card/index.stories.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+/* eslint-disable import/no-unresolved */
+import { Meta } from "@storybook/react/types-6-0";
+import Card from "./index";
+
+const Row = styled.div`
+ margin-bottom: 32px;
+
+ & > button + button {
+ margin-left: 16px;
+ }
+`;
+
+export default {
+ title: "Card",
+ component: Card,
+ argTypes: {},
+} as Meta;
+
+export const Default: React.FC = () => {
+ return (
+ <>
+
+ Card
+
+ >
+ );
+};
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
new file mode 100644
index 000000000..6fb611986
--- /dev/null
+++ b/src/components/Card/index.tsx
@@ -0,0 +1,16 @@
+import styled, { DefaultTheme } from "styled-components";
+
+interface CardProps {
+ theme: DefaultTheme;
+}
+
+const Card = styled.div`
+ background-color: ${({ theme }) => theme.colors.card.background};
+ border: 1px solid ${({ theme }) => theme.colors.card.borderColor};
+ border-radius: 32px;
+ box-shadow: ${({ theme }) => theme.shadows.level1};
+ color: ${({ theme }) => theme.colors.text};
+ padding: 24px;
+`;
+
+export default Card;
diff --git a/src/index.ts b/src/index.ts
index 003bd4908..c35730b8e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,7 @@
export { default as Button } from "./components/Button";
export { default as ButtonMenu } from "./components/ButtonMenu";
export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
+export { default as Card } from "./components/Card";
export { default as ResetCSS } from "./ResetCSS";
export * from "./theme";
diff --git a/src/styled.d.ts b/src/styled.d.ts
index 5d375b4ab..34ad65d15 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -27,6 +27,13 @@ declare module "styled-components" {
success: string;
accent: string;
light: string;
+ card: {
+ background: string;
+ borderColor: string;
+ };
} & Pallete;
+ shadows: {
+ level1: string;
+ };
}
}
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 58d43b7dc..b51132ac1 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -15,6 +15,13 @@ const darkTheme: DefaultTheme = {
textSubtle: pallete.lightSlate,
accent: pallete.dorian,
light: pallete.cloud,
+ card: {
+ background: "#2B223E",
+ borderColor: "rgba(14, 14, 44, 0.05)",
+ },
+ },
+ shadows: {
+ level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
},
};
diff --git a/src/theme/light.ts b/src/theme/light.ts
index 21c6d8ff2..c82d0fcf6 100644
--- a/src/theme/light.ts
+++ b/src/theme/light.ts
@@ -15,6 +15,13 @@ const lightTheme: DefaultTheme = {
textSubtle: pallete.lightSlate,
accent: pallete.dorian,
light: pallete.cloud,
+ card: {
+ background: pallete.white,
+ borderColor: "rgba(14, 14, 44, 0.05)",
+ },
+ },
+ shadows: {
+ level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
},
};