feat: Добавлен переиспользуемый компонент Card для отображения информации в формате "Заголовок - Описание"

src/shared/ui/Card/Card.module.scss

@@ -0,0 +1,19 @@
+.card {
+    padding: 20px;
+}
+
+.title {
+    margin-bottom: 15px;
+
+    color: var(--color-blue);
+    font-weight: 400;
+    font-size: 25px;
+    line-height: 120%;
+}
+
+.description {
+    color: var(--color-text);
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 30px;
+}

src/shared/ui/Card/Card.stories.tsx

@@ -0,0 +1,56 @@
+import { Card } from './Card'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Shared/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Базовая карточка
+ */
+export const Default: Story = {
+  args: {
+    title: '1945',
+    description: 'Окончание Второй мировой войны',
+  },
+}
+
+/**
+ * Карточка с длинным описанием
+ */
+export const LongDescription: Story = {
+  args: {
+    title: '1969',
+    description:
+      'Первая высадка человека на Луну. Нил Армстронг и Базз Олдрин стали первыми людьми, ступившими на поверхность Луны в рамках миссии Аполлон-11.',
+  },
+}
+
+/**
+ * Карточка с коротким описанием
+ */
+export const ShortDescription: Story = {
+  args: {
+    title: '2001',
+    description: 'Запуск Wikipedia',
+  },
+}
+
+/**
+ * Карточка с текстовым заголовком
+ */
+export const TextTitle: Story = {
+  args: {
+    title: 'Новость',
+    description: 'Важное событие произошло сегодня',
+  },
+}

src/shared/ui/Card/Card.tsx

@@ -0,0 +1,37 @@
+import { memo } from 'react'
+
+import styles from './Card.module.scss'
+
+export interface CardProps {
+  /**
+   * Заголовок карточки (например, год события)
+   */
+  readonly title: string | number
+  /**
+   * Описание карточки
+   */
+  readonly description: string
+}
+
+/**
+ * Универсальная карточка для отображения информации
+ *
+ * Отображает заголовок и описание.
+ * Используется для событий, новостей и других информационных блоков.
+ *
+ * @example
+ * ```tsx
+ * <Card title="1945" description="Окончание Второй мировой войны" />
+ * <Card title="Новость" description="Текст новости" />
+ * ```
+ */
+export const Card = memo(({ title, description }: CardProps) => {
+  return (
+    <div className={styles.card}>
+      <h3 className={styles.title}>{title}</h3>
+      <p className={styles.description}>{description}</p>
+    </div>
+  )
+})
+
+Card.displayName = 'Card'

src/shared/ui/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card'
+export type { CardProps } from './Card'

src/shared/ui/index.ts

@@ -1,2 +1,4 @@
 export { Button } from './Button'
 export type { ButtonProps } from './Button'
+export { Card } from './Card'
+export type { CardProps } from './Card'