Theme Default

Components

Card

A bordered surface that holds one piece of content: a title, a description, a body and a footer. elevation="hard" lifts it with a hard shadow, and lift makes it rise on hover or focus.

shadcn equivalentcard

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add card

Also works with shadcn: npx shadcn@latest add @ritla/card

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

<Card elevation="hard" lift render={<a href="/statements" />}>
  <CardHeader>
    <CardTitle>Statements</CardTitle>
  </CardHeader>
  <CardDescription>Download a month as a PDF.</CardDescription>
</Card>

API reference

Card

Any other div prop passes through.

Prop	Type	Default	Description
`elevation`	`"none" \| "hard"`	`"none"`	Figma's Elevation: `hard` is a brand outline and a 6px hard shadow toward the inline end and down.
`surface`	`"page" \| "band"`	`"page"`	What the card sits on: `band` is the sky band, where the shadow is one step darker.
`lift`	`boolean`	`false`	Figma's State = Hover: rises 3px toward the inline start and up, its shadow growing to 9px, on hover or focus. For a card that is a link.
`render`	`ReactElement`	None	Another element with the card's look, usually a link; it keeps its own semantics.

CardTitle

Prop	Type	Default	Description
`as`	`"h2" \| "h3" \| "h4"`	`"h3"`	The heading level in the page's outline.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To the card when it is a link.

ARIA

The card itself is a div with no role; its title is a real heading (h3 by default).
A lift card is one link: its name is all its text, so put the title first.
The movement on hover does not run when the reader asks for reduced motion; the shadow stays.

Arabic and RTL notes

Mirrors

The hard shadow falls bottom-left in Arabic, bottom-right in English.
When it lifts, the card moves toward the inline start: to the right in Arabic.
The title at the start, the action at the header's end.

Does not mirror

The upward movement doesn't change.

Numerals: Numbers in your content follow the numerals setting through formatNumber.
Arabic typography: Title body-14 Semibold, description body-14.
Mixed-direction text: Isolate amounts and Latin identifiers inside Arabic text.