ClickableCard

An interactive card for navigation or action targets. Nested interactive elements work independently.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Clickable Card

An interactive card for navigation or action targets. Nested interactive elements work independently.

Prop	Type	Default	Description
label *	string		Accessibility label.
onClick	(event: MouseEvent) => void		Click handler: fires on card surface only.
href	string		Navigation URL. Plain, new-tab, Cmd/Ctrl-click, and middle-click activation all follow the shared navigation rule described on the Link `href` prop.
target	string	'_self'	Link target.
isDisabled	boolean	false	Disables the card, removes a link destination, and leaves the card out of the tab order.
children	ReactNode		Card content.
padding	0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10	4	Inner padding.
variant	'default' \| 'transparent' \| 'muted' \| 'blue' \| 'cyan' \| 'gray' \| 'green' \| 'orange' \| 'pink' \| 'purple' \| 'red' \| 'teal' \| 'yellow'	'default'	Background color variant.
elevation	'none' \| 'low' \| 'med' \| 'high'	'none'	Resting shadow depth. Often raised to signal the whole card is clickable.
width	SizeValue		Card width.
height	SizeValue		Card height.
maxWidth	SizeValue		Maximum card width.
xstyle	StyleXStyles		StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Usage guidance

Use for cards that navigate to a detail page or trigger a single action.
Nest buttons or links freely inside; they handle their own events.
Avoid: Use for toggling selection; use SelectableCard for that.

Theming API

{
  "container": true,
  "targets": [
    {
      "className": "astryx-clickable-card",
      "visualProps": [
        "variant"
      ]
    }
  ],
  "vars": [
    {
      "name": "--_press-overlay",
      "description": "Fill of the ::after interaction overlay: transparent at rest, the hover overlay token on hover (hover-capable pointers), the pressed overlay token while pressed (`:active` on a mouse; `data-astryx-press=\"on\"` written by the touch press controller under a finger) and the hover token for the release fade. Set on the card element by its own interaction arms.",
      "default": "transparent",
      "private": true
    },
    {
      "name": "--_press-overlay-transition",
      "description": "Duration of the overlay's background-color transition: the fast duration token, except 0s while a believed touch press paints so it lands on the first frame.",
      "default": "var(--duration-fast)",
      "private": true
    }
  ]
}

Anatomy

Container: Interactive div with hover/focus/active states.
Content: Children, which may include nested interactive elements.

Examples

Clickable Card: A clickable card that navigates on click. Nested interactive elements work independently.
Clickable Card — Elevated: A clickable card raised with elevation="med" so the shadow signals the whole surface is interactive.
Clickable Card — Nested Button: A product card that navigates on click but has an independent "Add to cart" button inside.