Controls · 11 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 11 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
image.alt	string	—
image.src *	string	—
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")
imageZoom	boolean	—	Zoom image on hover (default: true when image is set)
style	string	—
target	string	—	"_blank" \| "_self"

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>