Card Karte - Docs - Artefact

Card Karte

Data Display

Intelligente Auto-Erkennung

Einführung

Ein flexibler Container zum Gruppieren zusammengehöriger Inhalte, mit optionalen Slots für Kopfzeile, Inhalt, Fußzeile, Bild und Avatar.

Verwendung

Einfache Karte

Main content of the card goes here.

import { Card, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      variant="elevated"
      title="Project title"
      description="A short description of the project."
      body="Main content of the card goes here."
      footer={<Button>View</Button>}
    />
  );
}

Karte mit Bild

import { Card } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      image="/cover.png"
      imagePosition="top"
      title="Card with image"
      body="Content beneath the image."
    />
  );
}

CMS-Seitenbauer

Diese Komponente ist als card-Block im Seitenbauer (content/pages/*.json) verfügbar:

{
  "type": "card",
  "title": "Project title",
  "description": "A short description of the project.",
  "body": "Main content of the card goes here.",
  "variant": "elevated"
}

Eigenschaften

Karte

Eigenschaft	Typ	Beschreibung