Skip to content
Praesepe UI

layout

Card

Content container with default, sunken, and interactive variants using a stretched-link pattern for accessible click targets.

Copied!

Examples

Order summary

Default card with header, body, and footer for an SME order.

Copied!

Invoice #INV-2026-089

Toko Sumber Makmur · Bandung

SubtotalRp 1.250.000
ShippingRp 18.000
Total dueRp 1.268.000

ETA: 2 business days · Paid via QRIS

<x-ui.card class="max-w-md">
    <x-slot:header>
        <p class="text-sm font-semibold tracking-tight text-fg">Invoice #INV-2026-089</p>
        <p class="text-xs text-fg-muted leading-relaxed">Toko Sumber Makmur · Bandung</p>
    </x-slot:header>

    <div class="space-y-2 text-sm text-fg">
        <div class="flex justify-between"><span class="text-fg-muted">Subtotal</span><span class="tabular-nums">Rp 1.250.000</span></div>
        <div class="flex justify-between"><span class="text-fg-muted">Shipping</span><span class="tabular-nums">Rp 18.000</span></div>
        <div class="flex justify-between font-medium"><span>Total due</span><span class="tabular-nums">Rp 1.268.000</span></div>
    </div>

    <x-slot:footer>
        <p class="text-sm text-fg-muted">ETA: 2 business days · Paid via QRIS</p>
    </x-slot:footer>
</x-ui.card>

<div class="max-w-md overflow-hidden rounded-card border border-border bg-surface-raised shadow-sm ring-1 ring-black/5">
    <div class="border-b border-border px-4 py-3">
        <p class="text-sm font-semibold tracking-tight text-fg">Invoice #INV-2026-089</p>
        <p class="text-xs text-fg-muted leading-relaxed">Toko Sumber Makmur · Bandung</p>
    </div>
    <div class="space-y-2 px-4 py-4 text-sm text-fg">
        <div class="flex justify-between"><span class="text-fg-muted">Subtotal</span><span class="tabular-nums">Rp 1.250.000</span></div>
        <div class="flex justify-between"><span class="text-fg-muted">Shipping</span><span class="tabular-nums">Rp 18.000</span></div>
        <div class="flex justify-between font-medium"><span>Total due</span><span class="tabular-nums">Rp 1.268.000</span></div>
    </div>
    <div class="border-t border-border px-4 py-3 text-sm text-fg-muted">ETA: 2 business days · Paid via QRIS</div>
</div>

Interactive customer card

Stretched-link card opening a customer profile.

Copied!
CV Berkah Jaya
Active customer · 18 open invoices · IDR 
<x-ui.card variant="interactive" href="/docs/components/card" class="max-w-sm">
    <x-slot:title>CV Berkah Jaya</x-slot:title>
    Active customer · 18 open invoices · IDR

    <x-slot:footer>
        <x-ui.button variant="link" size="sm" class="relative z-10">Send payment reminder</x-ui.button>
    </x-slot:footer>
</x-ui.card>

<div class="relative max-w-sm overflow-hidden rounded-card border border-border bg-surface-raised shadow-sm ring-1 ring-black/5 transition-colors duration-150 hover:border-border-strong">
    <div class="px-4 py-4">
        <a href="/docs/components/card" class="font-semibold tracking-tight text-fg after:absolute after:inset-0 after:content-['']">CV Berkah Jaya</a>
        <p class="relative z-10 mt-2 text-sm text-fg-muted leading-relaxed">Active customer · 18 open invoices · IDR</p>
    </div>
    <div class="relative z-10 border-t border-border px-4 py-3">
        <button type="button" class="text-sm font-medium text-brand">Send payment reminder</button>
    </div>
</div>

Sunken metric

Low-emphasis sunken surface for dashboard metrics.

Copied!

Sales today

Rp 8.4M

+12% vs yesterday

<x-ui.card variant="sunken" class="max-w-xs">
    <p class="text-xs font-semibold uppercase tracking-wider text-fg-subtle">Sales today</p>
    <p class="mt-2 text-2xl font-semibold tracking-tight tabular-nums text-fg">Rp 8.4M</p>
    <p class="mt-1 text-sm tabular-nums text-success">+12% vs yesterday</p>
</x-ui.card>

<div class="max-w-xs rounded-card bg-surface-sunken p-4">
    <p class="text-xs font-semibold uppercase tracking-wider text-fg-subtle">Sales today</p>
    <p class="mt-2 text-2xl font-semibold tracking-tight tabular-nums text-fg">Rp 8.4M</p>
    <p class="mt-1 text-sm tabular-nums text-success">+12% vs yesterday</p>
</div>

Props API

Component props
Prop Type Default Description
variant default|sunken|interactive default Surface style. interactive enables hover affordance for clickable cards.
href string|null null When set, renders a stretched link over the card body without nesting interactive elements.

Accessibility notes

Architected with WCAG 2.2 AA patterns in mind. These notes document the exact keyboard and ARIA behavior for this component.

  • Interactive cards use a single anchor with an absolutely positioned after pseudo-element so the whole card is clickable.
  • Footer actions should use relative z-10 so buttons remain independently focusable above the stretched link.
  • Focus-within outline appears on the card when the stretched link receives keyboard focus.
  • Avoid placing nested links or buttons inside the stretched-link body. Put secondary actions in the footer slot.

Built by Praesepe

Architecture & custom software partner

Praesepe uses these exact UI primitives to ship SME dashboards, inventory systems, invoicing desks, and internal tools faster, without rebuilding a design system for every client.

  • Same Blade + Tailwind 4 + Alpine 3 stack you see in this docs site
  • Opinionated for Indonesian SME ops: invoices, stock, roles, approvals
  • Architected with WCAG 2.2 AA patterns in mind for keyboard and ARIA

Talk to the studio

WhatsApp: TODO Email the studio Visit Praesepe