전체 카탈로그
ContainerCard12 props

Clickable Card

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

공식 문서 열기
live previewContainer

Preview

Calendar detail

The whole card is a navigation target.

Import

import {ClickableCard} from '@astryxdesign/core/ClickableCard';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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

cardclickableinteractivenavigationactionlink

Important props

variantdefault | transparent | muted | blue | cyan | gray | green | orange | pink | purple | red | teal | yellowoptional

Theming targets

astryx-clickable-card

Best practices

  • DoUse for cards that navigate to a detail page or trigger a single action.
  • DoNest buttons or links freely inside; they handle their own events.
  • Do notUse for toggling selection; use SelectableCard for that.