Astryx Clickable Card

Cards

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Clickable Card to your project and fits it to your theme.

Code

How Astryx Clickable Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {ClickableCard} from '@/components/ui/astryx-clickable-card';
import {Stack} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';

function ClickableCardElevated() {
  return (
    <ClickableCard label="Open report" href="#" elevation="med" width={320}>
      <Stack direction="vertical" gap={2}>
        <Heading level={4}>Quarterly report</Heading>
        <Text type="body" color="secondary">
          A raised shadow signals the whole card is clickable, lifting it above
          the surrounding content.
        </Text>
      </Stack>
    </ClickableCard>
  );
}

export default function ClickableCardElevatedDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <ClickableCardElevated />
    </div>
  );
}