کارت

<Card>
<CardHeader>
  <CardTitle>پلن حرفه‌ای</CardTitle>
  <CardDescription>برای تیم‌های در حال رشد</CardDescription>
</CardHeader>
<CardBody>۴۹۰ هزار تومان در ماه، تا ۲۰ کاربر.</CardBody>
<CardFooter>
  <Button variant="tertiary">مقایسه</Button>
  <Button variant="primary">انتخاب پلن</Button>
</CardFooter>
</Card>

<article data-variant="outlined" class="k-card">
  <header class="k-card__header">
    <h3 class="k-card__title">پلن حرفه‌ای</h3>
    <p class="k-card__description">برای تیم‌های در حال رشد</p>
  </header>
  <div class="k-card__body">۴۹۰ هزار تومان در ماه، تا ۲۰ کاربر.</div>
  <footer class="k-card__footer">
    <button type="button" data-variant="tertiary" data-size="md" class="k-btn k-btn--tertiary">مقایسه</button>
    <button type="button" data-variant="primary" data-size="md" class="k-btn k-btn--primary">انتخاب پلن</button>
  </footer>
</article>

<Card interactive>
<CardHeader>
  <Badge tone="brand">راهنما</Badge>
  <CardTitle>
    <a className="k-card__link" href="/docs/accessibility/">دسترس‌پذیری در کاشی</a>
  </CardTitle>
  <CardDescription>آنچه خودکار تضمین می‌شود و آنچه بر عهدهٔ شماست.</CardDescription>
</CardHeader>
</Card>

<article data-variant="outlined" class="k-card k-card--interactive">
  <header class="k-card__header"><span data-tone="brand" data-variant="soft" class="k-badge k-badge--brand" style="justify-self:start">راهنما</span>
    <h3 class="k-card__title"><a class="k-card__link" href="/docs/accessibility/" style="color:inherit;text-decoration:none">دسترس‌پذیری در کاشی</a></h3>
    <p class="k-card__description">آنچه خودکار تضمین می‌شود و آنچه بر عهدهٔ شماست.</p>
  </header>
</article>

<Card variant="elevated" padding="sm">
<CardMedia src="/cover.jpg" alt="" ratio="16 / 9" />
<CardHeader actions={<DropdownMenu trigger={…}>…</DropdownMenu>}>
  <CardTitle>سبک برجسته</CardTitle>
  <CardDescription>با تصویر و منوی سربرگ</CardDescription>
</CardHeader>
</Card>

<Card variant="filled">…</Card>