Card

A simple island card for product previews with image, content, price and action.

Installation

npx alixan-ui-nuxt add card

Usage

MacBook Pro 14-inch

Powerful laptop with Apple Silicon performance, a stunning Liquid Retina display, and all-day battery life.

$640


<script setup lang="ts">
const toast = useToast();

const onTap = () => {
  toast.open('card.addedToCard', 'success');
};
</script>

<template>
	<Card
		image="/mac.webp"
		title="card.demoTitle"
		description="card.demoDescription"
		price="$640"
		button="card.addToCart"
		@on-tap="onTap"
	/>
</template>

API Reference

Prop	Type	Default	Description
image	string	-	Image URL rendered at the top of the card.
imageAlt	string	''	Accessible alt text for the image.
title	string	-	Main card title.
description	string	-	Optional supporting text.
price	string	-	Price text shown next to the action button.
button	string	-	Optional action button label.
@on-tap	() => void	-	Emitted when the button is clicked.