ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
85 lines
2.3 KiB
Markdown
85 lines
2.3 KiB
Markdown
# Cards
|
|
|
|
Canonical card: `@/components/ui/card`.
|
|
|
|
Use cards for **interactive or grouped content units** (settings panels, post previews, pricing cells). Do not wrap every section in a card. Do not put cards in the hero.
|
|
|
|
## Anatomy
|
|
|
|
```tsx
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
CardFooter,
|
|
CardAction,
|
|
} from "@/components/ui/card";
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>عنوان</CardTitle>
|
|
<CardDescription>توضیح کوتاه</CardDescription>
|
|
<CardAction>{/* optional */}</CardAction>
|
|
</CardHeader>
|
|
<CardContent>…</CardContent>
|
|
<CardFooter>…</CardFooter>
|
|
</Card>
|
|
```
|
|
|
|
## Spec
|
|
|
|
| Property | Value |
|
|
| --- | --- |
|
|
| Background | `bg-card` |
|
|
| Text | `text-card-foreground` |
|
|
| Radius | `rounded-xl` (≈ `--radius-xl`) |
|
|
| Border | `border border-border` |
|
|
| Shadow | `shadow-glow-sm` → hover `shadow-glow-primary` (dark hover `shadow-glow-lg`) |
|
|
| Padding | Vertical `py-6`; header/content/footer `px-6` |
|
|
| Internal stack | `flex flex-col gap-6` |
|
|
| Title type | `type["card-title"]` |
|
|
| Description type | `type["card-desc"]` |
|
|
| Transition | `duration-200` on border + shadow |
|
|
|
|
## Hover
|
|
|
|
| Mode | Behavior |
|
|
| --- | --- |
|
|
| Light | `hover:border-primary/30 hover:shadow-glow-primary` |
|
|
| Dark | `dark:hover:border-primary/40 dark:hover:shadow-glow-lg` |
|
|
|
|
Hover is subtle—cards should not jump (`translate`) or scale aggressively. Timeline roadmap cards are a special case with their own CSS in `globals.css`.
|
|
|
|
## Dark mode
|
|
|
|
Cards use semantic `card` tokens (`#1c2424` in dark). Do not force `bg-white` on cards.
|
|
|
|
## Spacing with grids
|
|
|
|
```tsx
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{items.map((item) => (
|
|
<Card key={item.id}>…</Card>
|
|
))}
|
|
</div>
|
|
```
|
|
|
|
## Blog / media cards
|
|
|
|
Blog surfaces may use `rounded-blog` (`--radius-blog: 0.9375rem`) on images/figures. Prefer shared `Card` for structured panels; media-heavy tiles may compose `Card` + `Image` with `object-cover` and consistent aspect ratios ([images.md](./images.md)).
|
|
|
|
## Forbidden
|
|
|
|
- Nested cards inside cards for decoration.
|
|
- Heavy multi-layer drop shadows.
|
|
- Random `rounded-2xl` / `rounded-md` overrides without reason.
|
|
- Cards as the only way to create section background (use `bg-section-*` instead).
|
|
|
|
## Related
|
|
|
|
- [colors.md](./colors.md)
|
|
- [spacing.md](./spacing.md)
|
|
- [glassmorphism.md](./glassmorphism.md)
|