Controls · 16 Props

Card

Versatile content container with tone, variant (outline/soft/ghost), optional hover effect, and optional href to render as a clickable link card.

Controls 16 Props

src/components/blocks/Card.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
ariaLabel	string	—
as	string	div	"section" \| "button" \| "div" \| "a" \| "article"
attrs	any	—	Pass-through HTML/Alpine attributes (e.g. `{ "@click": "$dispatch('modal-open', 'foo')" }`).
class	string	—
hover	boolean	—
href	string	—
image	object	—	Background image: renders fullbleed behind content with optional hover zoom. `src` is a plain URL string (customer-site flow) OR Astro ImageMetadata (repo-backed flow → <Picture> with AVIF/WebP responsive variants).
image.alt	string	—
image.src *	any	—
imageOverlay	string	—	Overlay on top of image (Tailwind bg class, e.g. "bg-black/50" or "bg-gradient-to-t from-black/80 to-transparent"). Overrides the `invert`-derived default.
imagePosition	string	object-center	Tailwind object-position class for the image (default "object-center").
imageSizes	string	(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw	`sizes` attribute for the <Picture> path.
imageWidths	number[]	[400,600,800,1200,1600]	Responsive widths for the <Picture> path (ImageMetadata only).
imageZoom	boolean	—	Zoom image on hover (default: true when image is set)
invert	boolean	false	Theme-invert the image overlay + default text colour: - false (default): fixed dark — black gradient + white text (works on any image regardless of theme, classic editorial treatment). - true: base-content gradient + base-100 text → dark slab in light mode, light slab in dark mode (the card always contrasts the page).
style	string	—
target	string	—	"_blank" \| "_self"
theme	string	—	DaisyUI theme scope for the card, e.g. "dark". Set it when the card should carry its own theme instead of inheriting the section's — the tones then resolve from that theme (a "neutral" card inside a light section becomes a genuinely dark card, not a light one).

Beispiele

Variants

outline, soft, ghost.

Outline

Default card style with border.

Soft Primary

Soft background tint.

Ghost

No border or background.

{
  "type": "grid",
  "props": {
    "cols": 3,
    "gap": "md"
  },
  "blocks": [
    {
      "type": "card",
      "props": {
        "variant": "outline",
        "tone": "neutral",
        "padding": "md"
      },
      "blocks": [
        {
          "type": "text",
          "props": {
            "variant": "title",
            "size": "sm",
            "text": "Outline"
          }
        },
        {
          "type": "text",
          "props": {
            "size": "sm",
            "tone": "muted",
            "text": "Default card style with border."
          }
        }
      ]
    },
    {
      "type": "card",
      "props": {
        "variant": "soft",
        "tone": "primary",
        "padding": "md"
      },
      "blocks": [
        {
          "type": "text",
          "props": {
            "variant": "title",
            "size": "sm",
            "text": "Soft Primary"
          }
        },
        {
          "type": "text",
          "props": {
            "size": "sm",
            "tone": "muted",
            "text": "Soft background tint."
          }
        }
      ]
    },
    {
      "type": "card",
      "props": {
        "variant": "ghost",
        "tone": "neutral",
        "padding": "md"
      },
      "blocks": [
        {
          "type": "text",
          "props": {
            "variant": "title",
            "size": "sm",
            "text": "Ghost"
          }
        },
        {
          "type": "text",
          "props": {
            "size": "sm",
            "tone": "muted",
            "text": "No border or background."
          }
        }
      ]
    }
  ]
}

<Grid cols={3} gap="md">
  <Card variant="outline" tone="neutral" padding="md">
    <Text variant="title" size="sm" text="Outline" />
    <Text size="sm" tone="muted" text="Default card style with border." />
  </Card>
  <Card variant="soft" tone="primary" padding="md">
    <Text variant="title" size="sm" text="Soft Primary" />
    <Text size="sm" tone="muted" text="Soft background tint." />
  </Card>
  <Card variant="ghost" tone="neutral" padding="md">
    <Text variant="title" size="sm" text="Ghost" />
    <Text size="sm" tone="muted" text="No border or background." />
  </Card>
</Grid>

Link Card

Set href to render the card as a link element.

Clickable Card

Renders as <a> with hover effect.

Soft Link Card

Hover to see the effect.

{
  "type": "grid",
  "props": {
    "cols": 2,
    "gap": "md"
  },
  "blocks": [
    {
      "type": "card",
      "props": {
        "variant": "outline",
        "tone": "accent",
        "padding": "md",
        "href": "#"
      },
      "blocks": [
        {
          "type": "text",
          "props": {
            "variant": "title",
            "size": "sm",
            "text": "Clickable Card"
          }
        },
        {
          "type": "text",
          "props": {
            "size": "sm",
            "tone": "muted",
            "text": "Renders as <a> with hover effect."
          }
        }
      ]
    },
    {
      "type": "card",
      "props": {
        "variant": "soft",
        "tone": "secondary",
        "padding": "md",
        "href": "#"
      },
      "blocks": [
        {
          "type": "text",
          "props": {
            "variant": "title",
            "size": "sm",
            "text": "Soft Link Card"
          }
        },
        {
          "type": "text",
          "props": {
            "size": "sm",
            "tone": "muted",
            "text": "Hover to see the effect."
          }
        }
      ]
    }
  ]
}

<Grid cols={2} gap="md">
  <Card variant="outline" tone="accent" padding="md" href="#">
    <Text variant="title" size="sm" text="Clickable Card" />
    <Text size="sm" tone="muted" text="Renders as <a> with hover effect." />
  </Card>
  <Card variant="soft" tone="secondary" padding="md" href="#">
    <Text variant="title" size="sm" text="Soft Link Card" />
    <Text size="sm" tone="muted" text="Hover to see the effect." />
  </Card>
</Grid>