FORMA Docs

Card

A contained group of related content and actions.

import { Card } from "@/forma/arc/card/card";
Base

In FORMA

  • Liegt in kit/arc/card und ist über @/forma/arc/card/card erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

  • Browsable items in a grid, such as projects, listings, or posts.
  • Items that should open into a larger quick look dialog without leaving the page, via details.
  • Content with media, an owner byline, and a status line that updates in place.

When not to use

  • Use expandable-card for inline disclosure without a dialog.
  • Use stat-card or metric-card for numbers.
  • Use dialog when the content has no card to grow from.

Usage

import { Card } from "@/forma/arc/card/card";
import { Avatar } from "@/forma/arc/avatar/avatar";

export function ProjectCard() {
  return (
    <Card
      title="Harbour redesign"
      description="New booking flow and room pages."
      media={<img src="/harbour.jpg" alt="" />}
      avatar={<Avatar name="Maya Chen" size="sm" />}
      meta="Maya Chen"
      status="Updated 2 hours ago"
      details={<p>Scope, milestones, and open questions.</p>}
    />
  );
}

API reference

Card

A content card with optional media, byline, and action that can grow into a quick look dialog.

PropTypeDefaultDescription
title (required)string–Card heading. Becomes the dialog trigger when details is set.
descriptionstring–Supporting line under the title.
mediaReactNode–Image or visual at the top. Zooms slightly on hover.
actionReactNode–Trailing footer control, such as a button.
avatarReactNode–Small leading visual in the footer, such as the owner's avatar.
metaReactNode–Who the card belongs to, shown in the byline.
statusstring–Short status under the meta, such as "Updated 2 hours ago". Changes roll in word by word and are announced politely.
detailsReactNode–Quick look content. When set, the card opens into a larger Radix dialog.
openboolean–Controlled quick look state.
defaultOpenbooleanfalseInitial quick look state when uncontrolled.
onOpenChange(open: boolean) => void–Called when the quick look opens or closes.
childrenReactNode–Extra body content between the description and footer.
...propsHTMLAttributes<HTMLElement>–Forwarded to the root article.

Keyboard interactions

KeysAction
Enter / SpaceOn the title, opens the quick look when details is set.
EscapeCloses the quick look and returns focus to the title.
TabStays trapped inside the open quick look.

Accessibility

  • Renders an article with an h3 title; the quick look uses Radix Dialog with the title and description wired as its label and description.
  • Only the title becomes a button, so nested actions stay separately focusable.
  • Status changes are read through a role="status" region.
  • Give media images alt text or an empty alt when decorative, and an aria-label to icon-only actions.

Motion

  • Hover lifts the card 2px and slowly zooms the media.
  • The quick look shares layout ids with the card, so surface, photo, title, and byline travel on one spring; details fade in after.
  • Reduced motion drops the lift, zoom, and morph, and the dialog simply fades.

Responsive behavior

  • The card fills its grid cell with min-width 0; the quick look panel is min(30rem, 100vw minus a gutter) wide and capped at the viewport height.
  • Hover lift and media zoom run only for a mouse; touch and pen never lift.

Performance

  • The quick look shares layout ids with the card, so the morph animates several elements; the dialog mounts only while open.
  • The overlay uses a 7px backdrop blur, which can cost frames on low-end devices over busy pages.

Notes for AI

  • Use for browsable items in a grid: projects, listings, posts. Use expandable-card for inline disclosure without a dialog, and stat-card or metric-card for numbers.
  • Add details only when there is real extra content; without it the card is a static article.
  • Keep status short and change it in place to get the rolling update.

Also in cards

  • Metric card: A compact summary for a number that needs context.
  • Empty state: A useful next step when there is nothing to show yet.

Guidance for AI tools

Card: A contained group of related content and actions. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückBadgeWeiterMetric card

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.