Card

İlişkili bilgileri bir arada toplayan bir içerik kapsayıcısı. Card sayfadan kenarlıkla değil yüzey rengiyle ayrılır: sayfanın üzerinde içe gömük bir gri yüzey (tray), tray bir section'ın üzerinde ise yükseltilmiş bir yüzey.

<Card>
<Heading level={3} size="lg">Kullanım</Heading>
<Text size="sm">Kullanım her ayın birinde sıfırlanır.</Text>
</Card>

Import

import { Card } from "@merid/react";

Örnekler

Varyantlar

tray (varsayılan), doğrudan sayfanın üzerinde kullanılan içe gömük card'dır. outline ise ince çizgili bir card'dır; tray'in çevresiyle çakışacağı yerlerde kullan.

<Card variant="tray">…</Card>
<Card variant="outline">…</Card>

Elevated, tray bir section üzerinde

elevated, yüzey rengine yumuşak bir gölge ekler. Card tray bir Section üzerinde duruyorsa bunu kullan. Tray bir section içindeki tray card kendiliğinden bu görünüme geçer.

<Section tone="tray">
<Card variant="elevated">…</Card>
</Section>

Padding

none 0, sm 20px, md 28px (varsayılan), lg 32px. Card kenardan kenara bir görsel ya da tablo içeriyorsa none kullan.

<Card padding="sm">sm · 20px</Card>
<Card padding="md">md · 28px</Card>
<Card padding="lg">lg · 32px</Card>

Etkileşimli ve seçili

interactive, hover'da 3px yukarı kalkma efekti ve pointer imleci ekler. Card'ın tamamı bir link ya da buton olduğunda kullan ve as ile o eleman olarak render'la. selected, 1.5px'lik accent halkasını çizer.

<Card as="a" href="/plans/starter" interactive>…</Card>
<Card as="a" href="/plans/pro" interactive selected aria-current="true">…</Card>

API referansı

as verilmedikçe bir div render'lar; ref'i iletir ve tüm HTML attribute'larını aktarır.

Stil verme

Component değişkeni: --mrd-card-padding, her data-padding değeri için ayrı atanır.

.pricing .mrd-card {
  --mrd-card-padding: var(--mrd-space-10);
}

Erişilebilirlik

• Card'ın kendine ait bir rolü yoktur. Bir grup card'a bir başlık ver ve her card'ı doğru seviyede bir başlıkla başlat.
• Tıklanabilir bir card için bir div'i onClick ile sarmak yerine card'ı etkileşimli eleman olarak render'la (as="a" ya da as="button").
• selected, aria-pressed'i yalnızca card interactive olduğunda ve as="button" ile (bir toggle buton olarak) render'landığında ayarlar. Diğer durumlarda yalnızca görseldir: state'i bir link üzerinde aria-current ile ya da işaretli bir kontrolle ilet.

Kullanım ilkeleri

İlgili sayfalar

• Section: card'ların görünümünü değiştiren tray bantlar.
• Grid: card satırlarını dizer.
• EmptyState: boş bir card listesi için yer tutucu.