diff --git a/frontend/src/lib/components/GeschichtenCard.svelte b/frontend/src/lib/components/GeschichtenCard.svelte
new file mode 100644
index 00000000..6b8a0d4c
--- /dev/null
+++ b/frontend/src/lib/components/GeschichtenCard.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import type { components } from '$lib/generated/api';
+import { plainExcerpt } from '$lib/utils/stripHtml';
+import { formatDate } from '$lib/utils/date';
+
+type Geschichte = components['schemas']['Geschichte'];
+
+interface Props {
+	geschichten: Geschichte[];
+	personId: string;
+	personName: string;
+	canWrite: boolean;
+}
+
+let { geschichten, personId, personName, canWrite }: Props = $props();
+
+const visible = $derived(geschichten.slice(0, 3));
+const hasOverflow = $derived(geschichten.length >= 3);
+
+function formatPublishedDate(g: Geschichte): string | null {
+	if (!g.publishedAt) return null;
+	return formatDate(g.publishedAt.slice(0, 10), 'short');
+}
+
+function authorName(g: Geschichte): string {
+	const a = g.author;
+	if (!a) return '';
+	const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim();
+	return full || a.email || '';
+}
+</script>
+
+{#if geschichten.length > 0}
+	<section
+		aria-labelledby="geschichten-card-heading"
+		class="rounded-sm border border-line bg-surface p-6 shadow-sm"
+	>
+		<header class="mb-5 flex items-center justify-between">
+			<h2
+				id="geschichten-card-heading"
+				class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
+			>
+				{m.geschichten_card_heading()}
+			</h2>
+			{#if canWrite}
+				<a
+					href="/geschichten/new?personId={personId}"
+					class="inline-flex items-center font-sans text-sm font-medium text-ink/60 hover:text-ink"
+				>
+					{m.geschichten_card_write_action()}
+				</a>
+			{/if}
+		</header>
+
+		<ul class="flex flex-col gap-4">
+			{#each visible as g (g.id)}
+				<li class="flex flex-col gap-1 border-b border-line pb-3 last:border-0 last:pb-0">
+					<a
+						href="/geschichten/{g.id}"
+						class="font-serif text-base font-bold text-ink hover:underline"
+					>
+						{g.title}
+					</a>
+					<p class="font-sans text-xs text-ink-3">
+						{authorName(g)}
+						{#if formatPublishedDate(g)}· {formatPublishedDate(g)}{/if}
+					</p>
+					{#if g.body}
+						<p class="font-serif text-sm text-ink-2">{plainExcerpt(g.body, 80)}</p>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+
+		{#if hasOverflow}
+			<footer class="mt-4 border-t border-line pt-3">
+				<a
+					href="/geschichten?personId={personId}"
+					class="inline-flex items-center font-sans text-sm font-medium text-ink hover:underline"
+				>
+					{m.geschichten_card_show_all_for_person({ name: personName })} →
+				</a>
+			</footer>
+		{/if}
+	</section>
+{/if}
diff --git a/frontend/src/lib/utils/stripHtml.spec.ts b/frontend/src/lib/utils/stripHtml.spec.ts
new file mode 100644
index 00000000..4dcc7308
--- /dev/null
+++ b/frontend/src/lib/utils/stripHtml.spec.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { plainExcerpt, stripHtml } from './stripHtml';
+
+describe('stripHtml', () => {
+	it('returns empty string for null/undefined/empty', () => {
+		expect(stripHtml(null)).toBe('');
+		expect(stripHtml(undefined)).toBe('');
+		expect(stripHtml('')).toBe('');
+	});
+
+	it('strips tags and preserves visible text', () => {
+		expect(stripHtml('<p>Hello <strong>world</strong></p>')).toBe('Hello world');
+	});
+
+	it('strips nested HTML', () => {
+		expect(stripHtml('<div><p>A</p><p>B</p></div>')).toBe('AB');
+	});
+});
+
+describe('plainExcerpt', () => {
+	it('returns full text when under the limit', () => {
+		expect(plainExcerpt('<p>short</p>', 80)).toBe('short');
+	});
+
+	it('truncates at the boundary with an ellipsis', () => {
+		const html = '<p>' + 'a'.repeat(100) + '</p>';
+		const out = plainExcerpt(html, 20);
+		expect(out.length).toBeLessThanOrEqual(21); // 20 chars + ellipsis
+		expect(out.endsWith('…')).toBe(true);
+	});
+
+	it('breaks at a word boundary when possible', () => {
+		const out = plainExcerpt('<p>The quick brown fox jumps over</p>', 18);
+		expect(out).toBe('The quick brown…');
+	});
+});
diff --git a/frontend/src/lib/utils/stripHtml.ts b/frontend/src/lib/utils/stripHtml.ts
new file mode 100644
index 00000000..00ce62ff
--- /dev/null
+++ b/frontend/src/lib/utils/stripHtml.ts
@@ -0,0 +1,23 @@
+/**
+ * Strip HTML tags from a string and return the plain text.
+ * Uses DOMParser in the browser, falls back to a regex strip on the server
+ * (where DOMParser is not available without isomorphic-dompurify's JSDOM).
+ */
+export function stripHtml(html: string | null | undefined): string {
+	if (!html) return '';
+	if (typeof DOMParser === 'function') {
+		const doc = new DOMParser().parseFromString(html, 'text/html');
+		return (doc.body.textContent ?? '').trim();
+	}
+	return html.replace(/<[^>]*>/g, '').trim();
+}
+
+/**
+ * Strip HTML and truncate to a maximum length, appending an ellipsis when
+ * the source exceeds it. Used for editorial story excerpts.
+ */
+export function plainExcerpt(html: string | null | undefined, max = 80): string {
+	const text = stripHtml(html);
+	if (text.length <= max) return text;
+	return text.slice(0, max).replace(/\s+\S*$/, '') + '…';
+}