Usage

ClickableCard is a card whose whole surface activates one action. The keyboard stop is a visually hidden link when href is set, and a button otherwise. Nested buttons and links keep their own clicks.

<script setup lang="ts">
import { ClickableCard } from '@astryx-vue/core/ClickableCard'
import { Heading } from '@astryx-vue/core/Heading'
</script>

<template>
  <ClickableCard href="/settings" label="Settings">
    <Heading :level="4">
      Settings
    </Heading>
  </ClickableCard>
</template>

target="_blank" opens href in a new tab. Modifier clicks and the middle button do the same. elevation and variant are forwarded to Card.

Anatomy

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

Examples

Elevated

Quarterly report

A raised shadow signals the whole card is clickable, lifting it above the surrounding content.

Quarterly report, raised with a medium shadow.

Nested button

Wireless Headphones

$79.99

Wireless Headphones. Add to cart is its own button.