Card

Container untuk grup konten. Default elevated, variant glass untuk overlay marketing, hoverable untuk klik-able card.

import { Card } from "@naraya/ui";

Examples

Default

Naraya Education

Platform pembelajaran terintegrasi.

<Card>
  <Stack gap="2">
    <Heading level="5">Naraya Education</Heading>
    <Text size="sm" variant="muted">Platform pembelajaran...</Text>
  </Stack>
</Card>

With header & footer

Ubah nama, email, dan preferensi notifikasi Anda.

<Card
  header={
    <Inline justify="between">
      <Heading level="6">Pengaturan akun</Heading>
      <Badge tone="success">Aktif</Badge>
    </Inline>
  }
  footer={
    <Inline gap="2" justify="end">
      <Button variant="outline">Batal</Button>
      <Button>Simpan</Button>
    </Inline>
  }
>
  ...
</Card>

Hoverable (clickable card)

NaraAI Workspace

Klik untuk masuk →

<Card hoverable onClick={...}>
  ...
</Card>

Glass variant

Marketing hero

Glassmorphism untuk overlay di hero/banner.

<Card variant="glass">...</Card>

Compact

Padding lebih kecil — cocok untuk list item.

<Card compact>...</Card>

Props

Prop	Type	Default	Description
header	`ReactNode`	—	Header section (border-bottom otomatis).
footer	`ReactNode`	—	Footer section (border-top otomatis).
variant	`"default" \| "glass"`	`"default"`	Glass = backdrop-filter blur.
hoverable	`boolean`	`false`	Lift + border tint saat hover, cursor pointer.
compact	`boolean`	`false`	Padding lebih kecil.
flush	`boolean`	`false`	Hapus padding body (cocok untuk Table dalam Card).

Tokens Used

--bg-surface

Background card

--border-subtle

Border

--shadow-sm

Elevation default

--radius-lg

Border radius

--glass-bg

Background untuk variant glass