# Card

Displays a card with header, content, footer, an optional header action, and a compact size variant.

Use Card for login panels, billing summaries, media/event highlights, and other grouped surfaces that need a clear title plus supporting actions.

## Import

```ts
import {
  CardActionComponent,
  CardComponent,
  CardContentComponent,
  CardDescriptionComponent,
  CardFooterComponent,
  CardHeaderComponent,
  CardTitleComponent,
} from '@edsis/component/card';
```

## Composition

The Angular structure matches the current shadcn card hierarchy while using Angular selectors.

```text
Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter
```

## Basic usage

```html
<Card class="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>
      <button Button variant="link" size="sm">Action</button>
    </CardAction>
  </CardHeader>

  <CardContent>
    <p>Card Content</p>
  </CardContent>

  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>
```

## Common patterns

### Login card

The current shadcn preview uses the card as a login surface. In Angular, compose the card with button, input, and label primitives directly.

```html
<Card class="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardDescription>Enter your email below to login to your account</CardDescription>
    <CardAction>
      <button Button variant="link" size="sm">Sign Up</button>
    </CardAction>
  </CardHeader>

  <CardContent>
    <form class="grid gap-6">
      <div class="grid gap-2">
        <label Label for="email">Email</label>
        <input Input id="email" type="email" placeholder="m@example.com" required />
      </div>

      <div class="grid gap-2">
        <div class="flex items-center">
          <label Label for="password">Password</label>
          <a
            href="#forgot-password"
            class="ms-auto inline-block text-sm underline-offset-4 hover:underline"
          >
            Forgot your password?
          </a>
        </div>
        <input Input id="password" type="password" required />
      </div>
    </form>
  </CardContent>

  <CardFooter class="flex-col gap-2">
    <button Button class="w-full">Login</button>
    <button Button variant="outline" class="w-full">Login with Google</button>
  </CardFooter>
</Card>
```

### Small size

Use `size="sm"` on the root card when the surface should feel denser. The compact size cascades to header spacing, content padding, footer padding, and heading/body typography.

```html
<Card size="sm" class="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Small Card</CardTitle>
    <CardDescription>This card uses the small size variant.</CardDescription>
  </CardHeader>
  <CardContent>
    <p class="text-sm text-muted-foreground">
      Compact spacing for dense dashboards or inset panels.
    </p>
  </CardContent>
  <CardFooter>
    <button Button variant="outline" size="sm" class="w-full">Action</button>
  </CardFooter>
</Card>
```

### Image card

Add media before the header when the card introduces an event, article, or campaign. `CardAction` still sits in the top-right of the header and can host a badge or button.

```html
<Card class="relative w-full max-w-sm overflow-hidden">
  <div
    aria-hidden="true"
    class="pointer-events-none absolute inset-x-0 top-0 z-30 aspect-video bg-black/35"
  ></div>
  <img
    src="https://avatar.vercel.sh/shadcn1"
    alt="Event cover"
    class="relative z-20 aspect-video w-full object-cover brightness-75 grayscale"
  />

  <CardHeader>
    <CardAction>
      <Badge variant="secondary">Featured</Badge>
    </CardAction>
    <CardTitle>Design systems meetup</CardTitle>
    <CardDescription>
      A practical talk on component APIs, accessibility, and shipping faster.
    </CardDescription>
  </CardHeader>

  <CardFooter>
    <button Button class="w-full">View event</button>
  </CardFooter>
</Card>
```

### RTL

Set `dir="rtl"` on the card host or a wrapper when the surrounding interface runs right to left. The composition stays the same.

```html
<Card dir="rtl" lang="ar" class="w-full max-w-sm text-right">
  <CardHeader>
    <CardTitle>تسجيل الدخول إلى حسابك</CardTitle>
    <CardDescription>أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك</CardDescription>
    <CardAction>
      <button Button variant="link" size="sm">إنشاء حساب</button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <!-- same form fields as the login example -->
  </CardContent>
  <CardFooter class="flex-col gap-2">
    <button Button class="w-full">تسجيل الدخول</button>
    <button Button variant="outline" class="w-full">تسجيل الدخول باستخدام Google</button>
  </CardFooter>
</Card>
```

## API reference

### `CardComponent`

| Input   | Type                | Default     |
| ------- | ------------------- | ----------- |
| `size`  | `"default" \| "sm"` | `'default'` |
| `class` | `string`            | `''`        |

The selected size is also exposed on the host as `data-size`, which can be used for styling overrides.

### Parts

| Part                       | Selector          | Notes                                                         |
| -------------------------- | ----------------- | ------------------------------------------------------------- |
| `CardHeaderComponent`      | `CardHeader`      | Header grid that places `CardAction` in the top-right corner. |
| `CardTitleComponent`       | `CardTitle`       | Primary heading for the card.                                 |
| `CardDescriptionComponent` | `CardDescription` | Supporting text under the title.                              |
| `CardActionComponent`      | `CardAction`      | Optional slot for badges, links, or buttons in the header.    |
| `CardContentComponent`     | `CardContent`     | Main body area.                                               |
| `CardFooterComponent`      | `CardFooter`      | Bottom action row or secondary metadata.                      |

All card parts also accept a `class` input.

## Styling and theming

The root card uses the shared theme tokens `border-border`, `bg-card`, and `text-card-foreground` plus `shadow-sm`.

Pass `class` to the root or any part to layer width, layout, spacing, media overflow, or custom action alignment without changing the primitive structure.

The `size` input is the primary spacing control. Switching to `sm` reduces header spacing, content/footer padding, and title/description typography together.

## Accessibility

- Keep the card root non-interactive. Put clicks on native buttons or anchors inside the card.
- Label every form field inside `CardContent`.
- Provide meaningful alt text for media cards unless the image is purely decorative.
- Do not rely on the card border or shadow alone to communicate state.

## Keyboard interactions

- The card primitives themselves are passive layout containers and do not enter the tab order.
- Buttons, anchors, and inputs projected into the card keep their native Tab, Enter, and Space behavior.
- `CardAction` does not alter focus order; it only positions header content visually.

## Angular notes

- `size` is declared only on `Card` and cascades to descendant part spacing and typography.
- `CardAction` is the Angular equivalent of the current shadcn `CardAction` slot.
- The login and RTL examples compose `ButtonComponent`, `InputComponent`, and `LabelComponent` directly with the card primitives.

## Source parity

This Angular implementation follows the current shadcn card docs, including `CardAction`, `size="sm"`, media cards, and the RTL login example, while translating the structure to Angular selectors and native controls.