2 files changed, 47 insertions, 0 deletions
diff --git a/src/ui/c-card/c-card.theme.ts b/src/ui/c-card/c-card.theme.ts
new file mode 100644
index 0000000..c9cdd6b
--- /dev/null
+++ b/src/ui/c-card/c-card.theme.ts
@@ -0,0 +1,12 @@
+import { defineThemes } from '../theme/theme.models';
+
+export const { useTheme } = defineThemes({
+  dark: {
+    backgroundColor: '#232323',
+    borderColor: '#282828',
+  },
+  light: {
+    backgroundColor: '#ffffff',
+    borderColor: '#efeff5',
+  },
+});
diff --git a/src/ui/c-card/c-card.vue b/src/ui/c-card/c-card.vue
new file mode 100644
index 0000000..11d86fd
--- /dev/null
+++ b/src/ui/c-card/c-card.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="c-card">
+    <div v-if="title" class="c-card-title">
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from './c-card.theme';
+
+const props = defineProps<{
+  title?: string;
+}>();
+
+const { title } = toRefs(props);
+
+const theme = useTheme();
+</script>
+
+<style lang="less" scoped>
+.c-card {
+  background-color: v-bind('theme.backgroundColor');
+  border: 1px solid v-bind('theme.borderColor');
+  border-radius: 4px;
+  padding: 20px 24px;
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+</style>