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 URL
imgAlt?: string - Image alt text
primaryAction?: { label: string; href: string } - Primary action button
secondaryAction?: { label: string; href: string } - Secondary action button

Menü

Card