Card

نصب

pnpm dlx @simurgh-ui/cli add card

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@simurgh-ui/react/card';
import '@simurgh-ui/styles/card.css';

Vue همین partها را از @simurgh-ui/vue/card و Angular کامپوننت‌های متناظر را از @simurgh-ui/angular/card صادر می‌کند.

پیش‌نمایش واقعی

Live component Card ◆

The Conference of the Birds

A journey through seven valleys.

Discover a composable, framework-native component system.

Read more

استفاده

<Card>
  <CardHeader>
    <CardTitle>رابط کاربری سیمرغ</CardTitle>
    <CardDescription>کامپوننت‌های دسترس‌پذیر</CardDescription>
  </CardHeader>
  <CardContent>سورس قابل‌مالکیت برای سه فریم‌ورک.</CardContent>
  <CardFooter>
    <a href="/fa/guides/installation/">شروع کنید</a>
  </CardFooter>
</Card>

ساختار Vue با نام‌های مشابه است. Angular از selectorهای simurgh-card، simurgh-card-header، simurgh-card-title، simurgh-card-description، simurgh-card-content و simurgh-card-footer استفاده می‌کند.

semantics

Card به‌خودی‌خود کنترل تعاملی یا landmark نیست. heading مناسب را در CardTitle قرار دهید و actionها را Button یا Link واقعی بسازید. کل Card را فقط وقتی کلیک‌پذیر کنید که دقیقاً یک مقصد دارد؛ در حالت چند action لینک‌ها و دکمه‌های داخلی را مستقل نگه دارید.

سفارشی‌سازی

partهای Card برای composition پایدارند. رنگ، radius، border و shadow را با tokenهای معنایی یا class روی part مربوط تغییر دهید. ترتیب DOM باید در responsive layout ثابت و منطقی بماند.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.