Card

Card component for displaying content in a structured layout.

import { Card } from '@document-writing-tools/kernux-react';
 
<Card
  variant="large"
  vorzeile="Latest News"
  title="Important Update"
  subline="Published today"
  body="This is the card content describing the update in detail."
  imgSrc="/image.jpg"
  imgAlt="Update illustration"
  primaryAction={{
    label: "Read More",
    href: "/updates/123"
  }}
  secondaryAction={{
    label: "Share",
    href: "/share/123"
  }}
/>

Props:

• variant?: "small" | "large" - Card size variant
• vorzeile?: string - Pre-line text above the title
• title: string - Required card title
• subline?: string - Subtitle text
• body?: string - Main content text
• imgSrc?: string - Image source URLUniform Resource Locator – Die Adresse, die zur Angabe des Speicherorts einer Ressource im Internet verwendet wird.
• imgAlt?: string - Image alt text
• primaryAction?: { label: string; href: string } - Primary action button
• secondaryAction?: { label: string; href: string } - Secondary action button