Карточка

Универсальный компонент карточки для отображения контента. Поддерживает eyebrow (надзаголовок), заголовок, тело и опциональную ссылку. При наведении — лёгкий подъём. При href — превращается в <a>.

Превью

Component-first

Каждый паттерн живёт как Svelte-компонент с typed props.

Canvas-ready

Визуальные эффекты оборачиваются в markdown-friendly блоки.

Без eyebrow

Карточка без надзаголовка — только заголовок и контент.

→

Ссылка

Карточка с href — рендерится как ссылка.

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { cn } from '$lib/utils/cn';
	let {
		children,
		eyebrow,
		title,
		href,
		class: className = ''
	}: {
		children?: Snippet;
		eyebrow?: string;
		title?: string;
		href?: string;
		class?: string;
	} = $props();
</script>

<svelte:element
	this={href ? 'a' : 'div'}
	{href}
	class={cn(
		'group block rounded-xl border border-border bg-background p-5 card transition-[border-color,transform] duration-150 hover:-translate-y-0.5 hover:border-accent/60',
		className
	)}
>
	{#if eyebrow}<div class="mb-3 text-xs font-semibold tracking-widest text-accent uppercase">
			{eyebrow}
		</div>{/if}
	{#if title}<div class="text-lg font-semibold tracking-tight text-foreground">{title}</div>{/if}
	<div class="mt-2 text-sm leading-relaxed text-foreground-muted">{@render children?.()}</div>
</svelte:element>

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { cn } from '$lib/utils/cn';
	let {
		children,
		eyebrow,
		title,
		href,
		class: className = ''
	}: {
		children?: Snippet;
		eyebrow?: string;
		title?: string;
		href?: string;
		class?: string;
	} = $props();
</script>

<svelte:element
	this={href ? 'a' : 'div'}
	{href}
	class={cn(
		'group block rounded-xl border border-border bg-background p-5 card transition-[border-color,transform] duration-150 hover:-translate-y-0.5 hover:border-accent/60',
		className
	)}
>
	{#if eyebrow}<div class="mb-3 text-xs font-semibold tracking-widest text-accent uppercase">
			{eyebrow}
		</div>{/if}
	{#if title}<div class="text-lg font-semibold tracking-tight text-foreground">{title}</div>{/if}
	<div class="mt-2 text-sm leading-relaxed text-foreground-muted">{@render children?.()}</div>
</svelte:element>

Особенности

Hover-эффект: -translate-y-0.5 + акцент на границе
При href рендерится как <a>, иначе — <div>
Поддерживает eyebrow (маленький акцентный надзаголовок)
Используется внутри <Cards> для сеточного отображения

Использование

<script>
	import Card from '$lib/components/docs/markdown/Card.svelte';
</script>

<Card eyebrow="01" title="Название">
	Описание карточки.
</Card>

<Card href="/docs" title="Документация">
	Карточка-ссылка.
</Card>

<script>
	import Card from '$lib/components/docs/markdown/Card.svelte';
</script>

<Card eyebrow="01" title="Название">
	Описание карточки.
</Card>

<Card href="/docs" title="Документация">
	Карточка-ссылка.
</Card>

Пропсы

Пропс	Тип	По умолчанию	Описание
`eyebrow`	`string`	—	Акцентный надзаголовок
`title`	`string`	—	Заголовок карточки
`href`	`string`	—	Ссылка (рендерит как `<a>`)
`class`	`string`	`''`	Дополнительные CSS-классы
`children`	`Snippet`	—	Тело карточки

Внутри Cards

Компонент часто используется в <Cards> для отзывчивой сетки:

<Cards>
	<Card eyebrow="01" title="Пункт 1">Описание 1.</Card>
	<Card eyebrow="02" title="Пункт 2">Описание 2.</Card>
	<Card eyebrow="03" title="Пункт 3">Описание 3.</Card>
</Cards>

<Cards>
	<Card eyebrow="01" title="Пункт 1">Описание 1.</Card>
	<Card eyebrow="02" title="Пункт 2">Описание 2.</Card>
	<Card eyebrow="03" title="Пункт 3">Описание 3.</Card>
</Cards>