Card

Card

The Card component is designed to present content in a styled container with support for custom icons and colors. It is a versatile component for displaying information with optional icon and color customization.

Props

  • title

    Type: string

    Description: The title text to display in the card.

  • icon

    Type: LucideIcon (optional)

    Default: Terminal

    Description: A custom icon to display in the card. If not provided, the default Terminal icon will be used. You can look for icons at lucide.dev.

  • color

    Type: string (optional)

    Default: "primary"

    Options: “Pink” “Purple” “Red” “Orange” “Yellow” “Green” “Teal” “Sky” “Blue”

    Description: The background color for the card. This is used for both the card’s background and the button’s hover state. If not provided, the default color is “primary”.

Basic Usage

To use the Card component, import it and use it in your Astro files with the desired title, optional custom icon, and color.

Default Card

This is a card with default settings.

Card with Custom Icon

This is a card with a custom icon.

Card with Custom Icon and Color

This is a card with a custom icon and color.

Card with Custom Color

This is a card with a custom color.

import Card from '@/components/Card.astro';
import { Cat } from 'lucide-react';

<Card title="Default Card">
  This is a card with default settings.
</Card>

<Card title="Card with Custom Icon" icon={Cat}>
  This is a card with a custom icon.
</Card>

<Card title="Card with Custom Icon and Color" icon={Cat} color="Red">
  This is a card with a custom icon and color.
</Card>

<Card title="Card with Custom Color" color="Green">
  This is a card with a custom color.
</Card>

Default Behavior

If no icon is provided, the Terminal icon will be used by default. Similarly, if no color is provided, the default color will be "primary".

import Card from '@/components/Card.astro';

<Card title="Default Card">
  This is a card with default settings.
</Card>