Promo Card

Beta

Get Ritla UI

One offer or nudge with a title, one line, a link and art; at most one per screen.

Open in Figma

Preview

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

Installation

Add the component
$ npx ritla add promo-card
Also works with shadcn: npx shadcn@latest add @ritla/promo-card
Dependencies it brings
@phosphor-icons/react
Or copy by hand
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

promo-card.tsx

import { PromoCard } from "@/components/ui/promo-card";<PromoCard variant="tint" title="Invite a friend" description="You both get JOD 5 when they open an account." action={{ label: "Invite now", href: "/invite" }} />

Examples

API reference

PromoCard

Prop	Type	Default	Description
`variant`	`"light" \| "dark" \| "tint"`	`"light"`	Figma's Style.
`title / description`	`ReactNode`	None	The offer and one line.
`action`	`{ label, href }`	None	The link.
`art`	`ReactNode`	None	The 88px art at the end.
`headingLevel`	`2 \| 3 \| 4`	`2`	The title's heading level.

Accessibility

ARIA

An aside, so it reads as secondary to the page.
The art is decorative.

Arabic and RTL notes

Mirrors

Text on the right, art on the left; the link arrow points left.

Does not mirror

Art you pass in keeps its own rules.

Numerals: Amounts in the copy are the app's text.
Arabic typography: label-16 Semibold title, body-12 line, label-14 Medium link.