diff --git a/docs/components-api/card.md b/docs/components-api/card.md
index b3a2325a..5b70f7d4 100644
--- a/docs/components-api/card.md
+++ b/docs/components-api/card.md
@@ -2,16 +2,20 @@
 
 # ExtraCard
 
+> ✅ **Реализован**: `ExtraCardComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации.
+
 Карточка для отображения информации.
 
-| Свойство   | Описание                    | Типизация  |
-| ---------- | --------------------------- | ---------- |
+| Свойство   | Описание                     | Типизация |
+| ---------- | ---------------------------- | --------- |
+| `title`    | заголовок карточки           | `string`  |
+| `subtitle` | подзаголовок карточки        | `string`  |
 | `overlay`  | отображать тень (возвышение) | `boolean` |
 
 # Слоты (content projection)
 
-| Слот      | Описание                          |
-| --------- | --------------------------------- |
+| Слот      | Описание                             |
+| --------- | ------------------------------------ |
 | `header`  | верхняя область (обычно изображение) |
-| `content` | тело карточки                     |
-| `footer`  | нижний колонтитул                 |
+| `content` | тело карточки                        |
+| `footer`  | нижний колонтитул                    |
diff --git a/src/lib/components/card/card-template.directive.ts b/src/lib/components/card/card-template.directive.ts
new file mode 100644
index 00000000..50c1aea3
--- /dev/null
+++ b/src/lib/components/card/card-template.directive.ts
@@ -0,0 +1,29 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+export type ExtraCardTemplateName = 'header' | 'footer';
+
+/**
+ * Именованные шаблоны слотов `header`/`footer` для ExtraCardComponent.
+ * Слот `content` не требует директивы — это содержимое карточки по умолчанию (`<ng-content>`).
+ *
+ * ```html
+ * <extra-card title="Заголовок">
+ *   <ng-template extraCardTemplate="header">
+ *     <img alt="" src="cover.jpg" />
+ *   </ng-template>
+ *   <p>Содержимое карточки</p>
+ *   <ng-template extraCardTemplate="footer">
+ *     <extra-button label="Действие" />
+ *   </ng-template>
+ * </extra-card>
+ * ```
+ */
+@Directive({
+  selector: '[extraCardTemplate]'
+})
+export class ExtraCardTemplateDirective {
+  /** Имя слота: header | footer. */
+  @Input({ required: true }) extraCardTemplate!: ExtraCardTemplateName;
+
+  constructor(public template: TemplateRef<unknown>) {}
+}
diff --git a/src/lib/components/card/card.component.ts b/src/lib/components/card/card.component.ts
index bd4cb208..5df746ad 100644
--- a/src/lib/components/card/card.component.ts
+++ b/src/lib/components/card/card.component.ts
@@ -1,37 +1,36 @@
 import { AfterContentInit, ChangeDetectorRef, Component, ContentChildren, Input, QueryList } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { Card } from 'primeng/card';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { PrimeTemplate } from 'primeng/api';
+import { ExtraCardTemplateDirective } from './card-template.directive';
 
 @Component({
   selector: 'extra-card',
-  host: { style: 'display: block' },
+  host: {
+    style: 'display: block',
+    // title/subtitle — входы компонента, но как статические атрибуты Angular оставляет их
+    // в DOM: нативный `title` даёт браузерный тултип на всю карточку, `subtitle` — просто
+    // несуществующий атрибут. Снимаем оба с хоста.
+    '[attr.title]': 'null',
+    '[attr.subtitle]': 'null'
+  },
   standalone: true,
-  imports: [Card, SharedModule, NgTemplateOutlet],
+  imports: [Card, PrimeTemplate, NgTemplateOutlet],
   template: `
-    <p-card [styleClass]="overlay ? 'shadow-md' : ''">
+    <!--
+      Заголовок и подзаголовок отдаём штатными входами p-card: PrimeNG сам кладёт их
+      в .p-card-title / .p-card-subtitle. Своя разметка в pTemplate="title" попадала
+      внутрь .p-card-title и дублировала этот класс вложенным элементом.
+    -->
+    <p-card [header]="title" [subheader]="subtitle" [styleClass]="overlay ? 'shadow-md' : ''">
       @if (headerTpl) {
         <ng-template pTemplate="header">
           <ng-container [ngTemplateOutlet]="headerTpl.template"></ng-container>
         </ng-template>
       }
-      @if (title || subtitle) {
-        <ng-template pTemplate="title">
-          <div class="p-card-caption">
-            @if (title) {
-              <div class="p-card-title m-0" data-pc-section="title">{{ title }}</div>
-            }
-            @if (subtitle) {
-              <div class="p-card-subtitle m-0" data-pc-section="subtitle">{{ subtitle }}</div>
-            }
-          </div>
-        </ng-template>
-      }
-      @if (contentTpl) {
-        <ng-template pTemplate="content">
-          <ng-container [ngTemplateOutlet]="contentTpl.template"></ng-container>
-        </ng-template>
-      }
+      <ng-template pTemplate="content">
+        <ng-content></ng-content>
+      </ng-template>
       @if (footerTpl) {
         <ng-template pTemplate="footer">
           <ng-container [ngTemplateOutlet]="footerTpl.template"></ng-container>
@@ -45,28 +44,16 @@ export class ExtraCardComponent implements AfterContentInit {
   @Input() subtitle = '';
   @Input() overlay = false;
 
-  @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;
+  @ContentChildren(ExtraCardTemplateDirective) templates!: QueryList<ExtraCardTemplateDirective>;
 
-  headerTpl?: PrimeTemplate;
-  contentTpl?: PrimeTemplate;
-  footerTpl?: PrimeTemplate;
+  headerTpl?: ExtraCardTemplateDirective;
+  footerTpl?: ExtraCardTemplateDirective;
 
   constructor(private cdr: ChangeDetectorRef) {}
 
   ngAfterContentInit(): void {
-    this.templates.forEach((tpl) => {
-      switch (tpl.getType()) {
-        case 'header':
-          this.headerTpl = tpl;
-          break;
-        case 'content':
-          this.contentTpl = tpl;
-          break;
-        case 'footer':
-          this.footerTpl = tpl;
-          break;
-      }
-    });
+    this.headerTpl = this.templates.find((t) => t.extraCardTemplate === 'header');
+    this.footerTpl = this.templates.find((t) => t.extraCardTemplate === 'footer');
     this.cdr.detectChanges();
   }
 }
diff --git a/src/lib/components/card/card.figma.md b/src/lib/components/card/card.figma.md
index de90a6b4..5bda58a8 100644
--- a/src/lib/components/card/card.figma.md
+++ b/src/lib/components/card/card.figma.md
@@ -10,22 +10,22 @@ figma:
   componentKey: '55dc631832ae2e7da5810b95b0537584bf146f60'
   name: '<Card>'
 status: stable
-updated: '2026-06-22'
+updated: '2026-09-29'
 ---
 
 ## Overview
 
 `ExtraCardComponent` — контейнер-поверхность для группировки связанного контента и действий вокруг одной темы или объекта; визуально отделяет блок от фона как единое целое. Оборачивает PrimeNG `p-card` и добавляет типизированные пропсы заголовка/подзаголовка и режим тени.
 
-Компонент соответствует Figma-компоненту `<Card>` (nodeId `1213:4134`, библиотека «UI Kit (DS) v2.0»). Содержимое заголовка, тела и футера проецируется через слоты PrimeNG `pTemplate`.
+Компонент соответствует Figma-компоненту `<Card>` (nodeId `1213:4134`, библиотека «UI Kit (DS) v2.1»). Слоты `header`/`footer` — собственная директива `extraCardTemplate` (не протекает PrimeNG `pTemplate` в публичное API); `content` — обычный `<ng-content>`.
 
 ## Props mapping
 
-| Свойство | Тип | По умолчанию | Описание |
-|----------|-----|--------------|---------|
-| `title` | `string` | `''` | Заголовок карточки — соответствует Figma-свойству `text-title` |
-| `subtitle` | `string` | `''` | Подзаголовок карточки — соответствует Figma-свойству `text-caption` |
-| `overlay` | `boolean` | `false` | Тень вокруг карточки (`shadow-md`) — соответствует Figma-варианту `overlay=true/false` |
+| Свойство   | Тип       | По умолчанию | Описание                                                                               |
+| ---------- | --------- | ------------ | -------------------------------------------------------------------------------------- |
+| `title`    | `string`  | `''`         | Заголовок карточки — соответствует Figma-свойству `text-title`                         |
+| `subtitle` | `string`  | `''`         | Подзаголовок карточки — соответствует Figma-свойству `text-caption`                    |
+| `overlay`  | `boolean` | `false`      | Тень вокруг карточки (`shadow-md`) — соответствует Figma-варианту `overlay=true/false` |
 
 ## Variants
 
@@ -35,9 +35,7 @@ Figma: `<Card>`, overlay=false — nodeId `1213:4135`
 
 ```html
 <extra-card title="Заголовок" subtitle="Подзаголовок">
-  <ng-template pTemplate="content">
-    <p class="text-sm">Контент карточки.</p>
-  </ng-template>
+  <p class="text-sm">Контент карточки.</p>
 </extra-card>
 ```
 
@@ -47,9 +45,7 @@ Figma: `<Card>`, overlay=true — nodeId `1156:4676`
 
 ```html
 <extra-card title="Заголовок" subtitle="Подзаголовок" [overlay]="true">
-  <ng-template pTemplate="content">
-    <p class="text-sm">Контент карточки с тенью.</p>
-  </ng-template>
+  <p class="text-sm">Контент карточки с тенью.</p>
 </extra-card>
 ```
 
@@ -59,12 +55,10 @@ Figma: `<Card>`, show-header=true
 
 ```html
 <extra-card title="Заголовок" subtitle="Подзаголовок">
-  <ng-template pTemplate="header">
+  <ng-template extraCardTemplate="header">
     <img alt="Заголовок" src="assets/cover.jpg" class="w-full" />
   </ng-template>
-  <ng-template pTemplate="content">
-    <p class="text-sm">Контент карточки с изображением в шапке.</p>
-  </ng-template>
+  <p class="text-sm">Контент карточки с изображением в шапке.</p>
 </extra-card>
 ```
 
@@ -74,29 +68,24 @@ Figma: `<Card>`, show-footer=true
 
 ```html
 <extra-card title="Заголовок">
-  <ng-template pTemplate="content">
-    <p class="text-sm">Контент карточки.</p>
-  </ng-template>
-  <ng-template pTemplate="footer">
+  <p class="text-sm">Контент карточки.</p>
+  <ng-template extraCardTemplate="footer">
     <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
   </ng-template>
 </extra-card>
 ```
 
 ```ts
-import { ExtraCardComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
-import { SharedModule } from 'primeng/api';
+import { ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
 ```
 
 ## Slots
 
-Слоты реализованы через директиву PrimeNG `pTemplate` (`<ng-template pTemplate="...">`). Импортируйте `SharedModule` из `'primeng/api'` в массив `imports` компонента.
-
-| Слот | Синтаксис | Figma-свойство | Описание |
-|------|-----------|----------------|---------|
-| Шапка (header) | `<ng-template pTemplate="header">` | `show-header` | Изображение или произвольный блок над заголовком |
-| Тело (content) | `<ng-template pTemplate="content">` | `change-layout-body` | Основное содержимое карточки |
-| Футер (footer) | `<ng-template pTemplate="footer">` | `change-layout-footer` / `show-footer` | Кнопки действий и прочий контент нижней части |
+| Слот           | Синтаксис                                  | Figma-свойство                         | Описание                                         |
+| -------------- | ------------------------------------------ | -------------------------------------- | ------------------------------------------------ |
+| Шапка (header) | `<ng-template extraCardTemplate="header">` | `show-header`                          | Изображение или произвольный блок над заголовком |
+| Тело (content) | обычный `<ng-content>`, без обёртки        | `change-layout-body`                   | Основное содержимое карточки                     |
+| Футер (footer) | `<ng-template extraCardTemplate="footer">` | `change-layout-footer` / `show-footer` | Кнопки действий и прочий контент нижней части    |
 
 Заголовок и подзаголовок задаются не слотами, а пропсами `title` и `subtitle` (Figma: `text-title`, `text-caption`).
 
@@ -110,12 +99,14 @@ import { SharedModule } from 'primeng/api';
 ## Do / Don't
 
 **Do:**
+
 - Используйте карточку для группировки контента одной темы (header / media / body / footer).
 - Задавайте `[overlay]="true"`, когда карточку нужно визуально приподнять над фоном (grid/list превью).
 - Передавайте заголовок и подзаголовок через `title` и `subtitle`, а не вёрсткой внутри `content`.
 - Размещайте кнопки действий в слоте `footer`, используя [Button](../button/button.figma.md).
 
 **Don't:**
+
 - Не используйте Card вместо `Dialog` для модальных сценариев — Card не прерывает workflow.
 - Не применяйте Card как зону-секцию без выделенной поверхности (для этого подходит Panel).
 - Не размещайте в Card критичные уведомления или табличные данные.
diff --git a/src/lib/components/card/public_api.ts b/src/lib/components/card/public_api.ts
index af94fd1f..d0e39666 100644
--- a/src/lib/components/card/public_api.ts
+++ b/src/lib/components/card/public_api.ts
@@ -1,4 +1,2 @@
 export * from './card.component';
-
-
-
+export * from './card-template.directive';
diff --git a/src/lib/providers/prime-preset/tokens/components/card.ts b/src/lib/providers/prime-preset/tokens/components/card.ts
index bbd3e5a6..fc7ee75d 100644
--- a/src/lib/providers/prime-preset/tokens/components/card.ts
+++ b/src/lib/providers/prime-preset/tokens/components/card.ts
@@ -18,11 +18,12 @@ export const cardCss = ({ dt }: { dt: (token: string) => string }): string => `
     box-shadow: ${dt('card.overlay.shadow')};
   }
 
-  /* ─── Caption: обёртка заголовка и подзаголовка ─── */
-  .p-card-caption {
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('card.caption.gap')};
+  /* ─── Caption: заголовок и подзаголовок стоят ближе друг к другу, чем остальные блоки ───
+     В Angular-версии p-card нет обёртки .p-card-caption: .p-card-title и .p-card-subtitle —
+     прямые дети .p-card-body с общим gap. Поэтому пару title+subtitle стягиваем до
+     card.caption.gap отрицательным отступом на разницу с card.body.gap. */
+  .p-card-title + .p-card-subtitle {
+    margin-top: calc(${dt('card.caption.gap')} - ${dt('card.body.gap')});
   }
 
   /* ─── Типографика подзаголовка ─── */
diff --git a/src/stories/components/card/card.stories.ts b/src/stories/components/card/card.stories.ts
index fb353fdd..1afc6e48 100644
--- a/src/stories/components/card/card.stories.ts
+++ b/src/stories/components/card/card.stories.ts
@@ -1,11 +1,12 @@
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { SharedModule } from 'primeng/api';
 import { ExtraCardComponent as CardComponent } from '../../../lib/components/card/card.component';
+import { ExtraCardTemplateDirective } from '../../../lib/components/card/card-template.directive';
 import { ExtraButtonComponent as ButtonComponent } from '../../../lib/components/button/button.component';
-import { CardOverlayComponent } from './examples/card-overlay.component';
-import { CardWithoutHeaderComponent } from './examples/card-without-header.component';
-import { CardWithoutFooterComponent } from './examples/card-without-footer.component';
-import { CardWithoutSubtitleComponent } from './examples/card-without-subtitle.component';
+import { CardOverlayComponent, Overlay } from './examples/card-overlay.component';
+import { CardWithoutHeaderComponent, WithoutHeader } from './examples/card-without-header.component';
+import { CardWithoutFooterComponent, WithoutFooter } from './examples/card-without-footer.component';
+import { CardWithoutSubtitleComponent, WithoutSubtitle } from './examples/card-without-subtitle.component';
+import { CardMinimalComponent, Minimal } from './examples/card-minimal.component';
 
 type CardArgs = CardComponent;
 
@@ -17,34 +18,38 @@ const meta: Meta<CardArgs> = {
     moduleMetadata({
       imports: [
         CardComponent,
+        ExtraCardTemplateDirective,
         ButtonComponent,
-        SharedModule,
         CardOverlayComponent,
         CardWithoutHeaderComponent,
         CardWithoutFooterComponent,
-        CardWithoutSubtitleComponent
+        CardWithoutSubtitleComponent,
+        CardMinimalComponent
       ]
     })
   ],
   parameters: {
     docs: {
       description: {
-        component: `Гибкий контейнер для группировки контента с заголовком, подзаголовком, основным содержимым и действиями.
+        component: `Гибкий контейнер для группировки контента с заголовком, подзаголовком, основным содержимым и действиями. Слоты \`header\`/\`footer\` — через директиву \`extraCardTemplate\`, \`content\` — обычный \`<ng-content>\`.
+
+Реализован по спецификации \`docs/components-api/card.md\`.
 
 \`\`\`typescript
-import { CardModule } from 'primeng/card';
+import { ExtraCardComponent, ExtraCardTemplateDirective } from '@cdek-it/angular-ui-kit';
 \`\`\``
       }
     },
     designTokens: { prefix: '--p-card' }
   },
   argTypes: {
+    // ── Свойства ─────────────────────────────────────────────
     title: {
       control: 'text',
       description: 'Заголовок карточки',
       table: {
-        category: 'Props',
-        defaultValue: { summary: '' },
+        category: 'Свойства',
+        defaultValue: { summary: "''" },
         type: { summary: 'string' }
       }
     },
@@ -52,8 +57,8 @@ import { CardModule } from 'primeng/card';
       control: 'text',
       description: 'Подзаголовок карточки',
       table: {
-        category: 'Props',
-        defaultValue: { summary: '' },
+        category: 'Свойства',
+        defaultValue: { summary: "''" },
         type: { summary: 'string' }
       }
     },
@@ -61,11 +66,15 @@ import { CardModule } from 'primeng/card';
       control: 'boolean',
       description: 'Тень вокруг карточки (shadow-md)',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' }
       }
-    }
+    },
+    // Hidden internal members
+    templates: { table: { disable: true } },
+    headerTpl: { table: { disable: true } },
+    footerTpl: { table: { disable: true } }
   }
 };
 
@@ -86,14 +95,12 @@ export const Default: Story = {
     const attrs = parts.length ? `\n  ${parts.join('\n  ')}` : '';
     const template = `<div class="bg-surface-ground">
   <extra-card${attrs} style="width: 20rem">
-    <ng-template pTemplate="header">
+    <ng-template extraCardTemplate="header">
       <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
     </ng-template>
-    <ng-template pTemplate="content">
-      <p class="text-sm">Контент карточки. Гибкая область для любого содержимого.</p>
-    </ng-template>
-    <ng-template pTemplate="footer">
-      <extra-button label="Действие" size="small" class="w-full"></extra-button>
+    <p class="text-sm">Контент карточки. Гибкая область для любого содержимого.</p>
+    <ng-template extraCardTemplate="footer">
+      <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
     </ng-template>
   </extra-card>
 </div>`;
@@ -102,7 +109,8 @@ export const Default: Story = {
   },
   args: {
     title: 'Заголовок',
-    subtitle: 'Подзаголовок'
+    subtitle: 'Подзаголовок',
+    overlay: false
   },
   parameters: {
     docs: {
@@ -113,133 +121,5 @@ export const Default: Story = {
   }
 };
 
-// ── Overlay ───────────────────────────────────────────────────────────────────
-
-export const Overlay: Story = {
-  render: () => ({
-    template: `<app-card-overlay></app-card-overlay>`
-  }),
-  parameters: {
-    docs: {
-      description: { story: 'Карточка с тенью (overlay).' },
-      source: {
-        language: 'ts',
-        code: `
-    import { Component } from '@angular/core';
-    import { ExtraCardComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
-
-    @Component({
-      selector: 'app-card-without-header',
-      standalone: true,
-      imports: [ExtraCardComponent, ExtraButtonComponent, SharedModule],
-      template: \`
-        <extra-card title="Заголовок" subtitle="Подзаголовок" style="width: 20rem">
-          <ng-template pTemplate="content">
-            <p class="text-sm">Карточка без изображения в шапке.</p>
-          </ng-template>
-          <ng-template pTemplate="footer">
-            <extra-button label="Действие" size="small" class="w-full"></extra-button>
-          </ng-template>
-        </extra-card>
-      \`,
-    })
-    export class CardWithoutHeaderComponent {}
-            `,
-        selector: 'app-card-without-header',
-        standalone: true,
-        imports: [CardComponent, ButtonComponent, SharedModule],
-        template: `
-    <card title="Заголовок" subtitle="Подзаголовок" style="width: 20rem">
-      <ng-template pTemplate="content">
-        <p class="text-sm">Карточка без изображения в шапке.</p>
-      </ng-template>
-      <ng-template pTemplate="footer">
-        <button label="Действие" size="small"></button>
-      </ng-template>
-    </card>
-  \`,
-})
-export class CardWithoutHeaderComponent {}
-        `
-      }
-    }
-  }
-};
-
-// ── WithoutFooter ─────────────────────────────────────────────────────────────
-
-export const WithoutFooter: Story = {
-  render: () => ({
-    template: `<app-card-without-footer></app-card-without-footer>`
-  }),
-  parameters: {
-    docs: {
-      description: { story: 'Карточка без футера с действиями.' },
-      source: {
-        language: 'ts',
-        code: `
-        import { ExtraCardComponent } from '@cdek-it/angular-ui-kit';
-
-        @Component({
-          selector: 'app-card-without-footer',
-          standalone: true,
-          imports: [ExtraCardComponent, SharedModule],
-          template: \`
-            <extra-card title="Заголовок" subtitle="Подзаголовок" style="width: 20rem">
-              <ng-template pTemplate="header">
-                <div class="flex items-center justify-center h-8" style="background: var(--p-surface-100); color: var(--p-surface-400)">
-                  <i class="ti ti-photo text-3xl"></i>
-                </div>
-              </ng-template>
-              <ng-template pTemplate="content">
-                <p class="text-sm">Карточка без футера.</p>
-              </ng-template>
-            </extra-card>
-          \`,
-        })
-        export class CardWithoutFooterComponent {}
-                `
-      }
-    }
-  }
-};
-
-// ── WithoutSubtitle ───────────────────────────────────────────────────────────
-
-export const WithoutSubtitle: Story = {
-  render: () => ({
-    template: `<app-card-without-subtitle></app-card-without-subtitle>`
-  }),
-  parameters: {
-    docs: {
-      description: { story: 'Карточка без подзаголовка.' },
-      source: {
-        language: 'ts',
-        code: `
-
-        @Component({
-          selector: 'app-card-without-subtitle',
-          standalone: true,
-          imports: [ExtraCardComponent, ExtraButtonComponent, SharedModule],
-          template: \`
-            <extra-card title="Заголовок" style="width: 20rem">
-              <ng-template pTemplate="header">
-                <div class="flex items-center justify-center h-8" style="background: var(--p-surface-100); color: var(--p-surface-400)">
-                  <i class="ti ti-photo text-3xl"></i>
-                </div>
-              </ng-template>
-              <ng-template pTemplate="content">
-                <p class="text-sm">Карточка без подзаголовка.</p>
-              </ng-template>
-              <ng-template pTemplate="footer">
-                <extra-button label="Действие" size="small"></extra-button>
-              </ng-template>
-            </extra-card>
-          \`,
-        })
-        export class CardWithoutSubtitleComponent {}
-                `
-      }
-    }
-  }
-};
+// ── Re-exports from example components ────────────────────────────────────
+export { Overlay, WithoutHeader, WithoutFooter, WithoutSubtitle, Minimal };
diff --git a/src/stories/components/card/examples/card-minimal.component.ts b/src/stories/components/card/examples/card-minimal.component.ts
new file mode 100644
index 00000000..9a0c8125
--- /dev/null
+++ b/src/stories/components/card/examples/card-minimal.component.ts
@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraCardComponent } from '../../../../lib/components/card/card.component';
+
+const template = `
+<div class="bg-surface-ground">
+  <extra-card style="width: 20rem">
+    <p class="text-sm">Карточка без заголовка, подзаголовка, шапки и футера — просто белый блок с текстом.</p>
+  </extra-card>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-card-minimal',
+  standalone: true,
+  imports: [ExtraCardComponent],
+  template,
+  styles
+})
+export class CardMinimalComponent {}
+
+export const Minimal: StoryObj = {
+  render: () => ({
+    template: `<app-card-minimal></app-card-minimal>`
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Карточка без title/subtitle/header/footer — только содержимое, как обычная поверхность.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ExtraCardComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-card-minimal',
+  standalone: true,
+  imports: [ExtraCardComponent],
+  template: \`
+    <extra-card style="width: 20rem">
+      <p class="text-sm">Просто текст без заголовка и шапки.</p>
+    </extra-card>
+  \`,
+})
+export class CardMinimalComponent {}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/card/examples/card-overlay.component.ts b/src/stories/components/card/examples/card-overlay.component.ts
index e8031983..b622dfde 100644
--- a/src/stories/components/card/examples/card-overlay.component.ts
+++ b/src/stories/components/card/examples/card-overlay.component.ts
@@ -1,20 +1,18 @@
 import { Component } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { SharedModule } from 'primeng/api';
 import { ExtraCardComponent } from '../../../../lib/components/card/card.component';
+import { ExtraCardTemplateDirective } from '../../../../lib/components/card/card-template.directive';
 import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
 
 const template = `
 <div class="bg-surface-ground">
   <extra-card title="Заголовок" subtitle="Подзаголовок" [overlay]="true" style="width: 20rem">
-    <ng-template pTemplate="header">
+    <ng-template extraCardTemplate="header">
       <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
     </ng-template>
-    <ng-template pTemplate="content">
-      <p class="text-sm">Карточка с тенью.</p>
-    </ng-template>
-    <ng-template pTemplate="footer">
-      <extra-button label="Действие" size="small" class="w-full"></extra-button>
+    <p class="text-sm">Карточка с тенью.</p>
+    <ng-template extraCardTemplate="footer">
+      <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
     </ng-template>
   </extra-card>
 </div>
@@ -24,7 +22,7 @@ const styles = '';
 @Component({
   selector: 'app-card-overlay',
   standalone: true,
-  imports: [ExtraCardComponent, ExtraButtonComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent],
   template,
   styles
 })
@@ -40,22 +38,21 @@ export const Overlay: StoryObj = {
       source: {
         language: 'ts',
         code: `
-import { ExtraCardComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+import { Component } from '@angular/core';
+import { ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-card-overlay',
   standalone: true,
-  imports: [CardComponent, ButtonComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent],
   template: \`
     <extra-card title="Заголовок" subtitle="Подзаголовок" [overlay]="true" style="width: 20rem">
-      <ng-template pTemplate="header">
+      <ng-template extraCardTemplate="header">
         <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
       </ng-template>
-      <ng-template pTemplate="content">
-        <p class="text-sm">Карточка с тенью.</p>
-      </ng-template>
-      <ng-template pTemplate="footer">
-        <extra-button label="Действие" size="small" class="w-full"></extra-button>
+      <p class="text-sm">Карточка с тенью.</p>
+      <ng-template extraCardTemplate="footer">
+        <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
       </ng-template>
     </extra-card>
   \`,
diff --git a/src/stories/components/card/examples/card-without-footer.component.ts b/src/stories/components/card/examples/card-without-footer.component.ts
index d5d51276..13693906 100644
--- a/src/stories/components/card/examples/card-without-footer.component.ts
+++ b/src/stories/components/card/examples/card-without-footer.component.ts
@@ -1,17 +1,15 @@
 import { Component } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { SharedModule } from 'primeng/api';
 import { ExtraCardComponent } from '../../../../lib/components/card/card.component';
+import { ExtraCardTemplateDirective } from '../../../../lib/components/card/card-template.directive';
 
 const template = `
 <div class="bg-surface-ground">
   <extra-card title="Заголовок" subtitle="Подзаголовок" style="width: 20rem">
-    <ng-template pTemplate="header">
+    <ng-template extraCardTemplate="header">
       <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
     </ng-template>
-    <ng-template pTemplate="content">
-      <p class="text-sm">Карточка без футера.</p>
-    </ng-template>
+    <p class="text-sm">Карточка без футера.</p>
   </extra-card>
 </div>
 `;
@@ -20,7 +18,7 @@ const styles = '';
 @Component({
   selector: 'app-card-without-footer',
   standalone: true,
-  imports: [ExtraCardComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective],
   template,
   styles
 })
@@ -36,20 +34,19 @@ export const WithoutFooter: StoryObj = {
       source: {
         language: 'ts',
         code: `
-import { ExtraCardComponent } from '@cdek-it/angular-ui-kit';
+import { Component } from '@angular/core';
+import { ExtraCardComponent, ExtraCardTemplateDirective } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-card-without-footer',
   standalone: true,
-  imports: [CardComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective],
   template: \`
     <extra-card title="Заголовок" subtitle="Подзаголовок" style="width: 20rem">
-      <ng-template pTemplate="header">
-      <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
-      </ng-template>
-      <ng-template pTemplate="content">
-        <p class="text-sm">Карточка без футера.</p>
+      <ng-template extraCardTemplate="header">
+        <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
       </ng-template>
+      <p class="text-sm">Карточка без футера.</p>
     </extra-card>
   \`,
 })
diff --git a/src/stories/components/card/examples/card-without-header.component.ts b/src/stories/components/card/examples/card-without-header.component.ts
index 55b00d43..36736ae7 100644
--- a/src/stories/components/card/examples/card-without-header.component.ts
+++ b/src/stories/components/card/examples/card-without-header.component.ts
@@ -1,17 +1,15 @@
 import { Component } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { SharedModule } from 'primeng/api';
 import { ExtraCardComponent } from '../../../../lib/components/card/card.component';
+import { ExtraCardTemplateDirective } from '../../../../lib/components/card/card-template.directive';
 import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
 
 const template = `
 <div class="bg-surface-ground">
   <extra-card title="Заголовок" subtitle="Подзаголовок" style="width: 20rem">
-    <ng-template pTemplate="content">
-      <p class="text-sm">Карточка без изображения в шапке.</p>
-    </ng-template>
-    <ng-template pTemplate="footer">
-      <extra-button label="Действие" size="small" class="w-full"></extra-button>
+    <p class="text-sm">Карточка без изображения в шапке.</p>
+    <ng-template extraCardTemplate="footer">
+      <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
     </ng-template>
   </extra-card>
 </div>
@@ -21,7 +19,7 @@ const styles = '';
 @Component({
   selector: 'app-card-without-header',
   standalone: true,
-  imports: [ExtraCardComponent, ExtraButtonComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent],
   template,
   styles
 })
@@ -37,19 +35,18 @@ export const WithoutHeader: StoryObj = {
       source: {
         language: 'ts',
         code: `
-import { ExtraCardComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+import { Component } from '@angular/core';
+import { ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-card-without-header',
   standalone: true,
-  imports: [CardComponent, ButtonComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent],
   template: \`
     <extra-card title="Заголовок" subtitle="Подзаголовок" style="width: 20rem">
-      <ng-template pTemplate="content">
-        <p class="text-sm">Карточка без изображения в шапке.</p>
-      </ng-template>
-      <ng-template pTemplate="footer">
-        <extra-button label="Действие" size="small" class="w-full"></extra-button>
+      <p class="text-sm">Карточка без изображения в шапке.</p>
+      <ng-template extraCardTemplate="footer">
+        <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
       </ng-template>
     </extra-card>
   \`,
diff --git a/src/stories/components/card/examples/card-without-subtitle.component.ts b/src/stories/components/card/examples/card-without-subtitle.component.ts
index e912c058..57fc05db 100644
--- a/src/stories/components/card/examples/card-without-subtitle.component.ts
+++ b/src/stories/components/card/examples/card-without-subtitle.component.ts
@@ -1,20 +1,18 @@
 import { Component } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { SharedModule } from 'primeng/api';
 import { ExtraCardComponent } from '../../../../lib/components/card/card.component';
+import { ExtraCardTemplateDirective } from '../../../../lib/components/card/card-template.directive';
 import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
 
 const template = `
 <div class="bg-surface-ground">
   <extra-card title="Заголовок" style="width: 20rem">
-    <ng-template pTemplate="header">
+    <ng-template extraCardTemplate="header">
       <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
     </ng-template>
-    <ng-template pTemplate="content">
-      <p class="text-sm">Карточка без подзаголовка.</p>
-    </ng-template>
-    <ng-template pTemplate="footer">
-      <extra-button label="Действие" size="small" class="w-full"></extra-button>
+    <p class="text-sm">Карточка без подзаголовка.</p>
+    <ng-template extraCardTemplate="footer">
+      <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
     </ng-template>
   </extra-card>
 </div>
@@ -24,7 +22,7 @@ const styles = '';
 @Component({
   selector: 'app-card-without-subtitle',
   standalone: true,
-  imports: [ExtraCardComponent, ExtraButtonComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent],
   template,
   styles
 })
@@ -40,22 +38,21 @@ export const WithoutSubtitle: StoryObj = {
       source: {
         language: 'ts',
         code: `
-import { ExtraCardComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+import { Component } from '@angular/core';
+import { ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-card-without-subtitle',
   standalone: true,
-  imports: [CardComponent, ButtonComponent, SharedModule],
+  imports: [ExtraCardComponent, ExtraCardTemplateDirective, ExtraButtonComponent],
   template: \`
     <extra-card title="Заголовок" style="width: 20rem">
-      <ng-template pTemplate="header">
+      <ng-template extraCardTemplate="header">
         <img alt="Заголовок" src="assets/mascot.jpg" class="w-full" />
       </ng-template>
-      <ng-template pTemplate="content">
-        <p class="text-sm">Карточка без подзаголовка.</p>
-      </ng-template>
-      <ng-template pTemplate="footer">
-        <extra-button label="Действие" size="small" class="w-full"></extra-button>
+      <p class="text-sm">Карточка без подзаголовка.</p>
+      <ng-template extraCardTemplate="footer">
+        <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
       </ng-template>
     </extra-card>
   \`,