Card

Card is a presentational container — a raised surface with a subtle border and soft shadow. It has no built-in interactivity: you compose buttons, links, and text into its slots. Layout comes from CardSlot (a content row), and CardImage (below) fills an image area.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import { Card, CardSlot } from '@infinitibit_gmbh/ui';

export function Example() {
  return (
    <Card>
      <CardSlot>
        <strong>Title</strong>
      </CardSlot>
      <CardSlot>
        <span>Body content.</span>
      </CardSlot>
    </Card>
  );
}

Slots — single vs dual

A CardSlot lays out its children: a single child fills the width, two or more split it evenly with a gap. That covers the Figma single- and dual-slot layouts without any extra props.

<CardSlot>{onlyChild}</CardSlot>          {/* full width */}
<CardSlot>
  {left}
  {right}
</CardSlot>                                {/* two even columns */}

Image

CardImage fills a card's image area — it crops to cover and keeps a soft radius. Pass an aspectRatio (e.g. "16 / 9") to lock the shape and avoid layout shift while the image loads.

import { Card, CardSlot, CardImage } from '@infinitibit_gmbh/ui';

<Card>
  <CardSlot>
    <CardImage src="/cover.jpg" alt="Cover" aspectRatio="16 / 9" />
  </CardSlot>
  <CardSlot>
    <strong>Title</strong>
  </CardSlot>
</Card>;

Clickable card

Set asChild on Card to render the whole surface as your own element — typically an <a> so the entire card is a link. There is no built-in click handler.

<Card asChild>
  <a href="/product/1">{/* card content */}</a>
</Card>

API

Card

Prop	Type	Default	Description
asChild	boolean	false	Render the child element (e.g. <a>) instead of a <div>

Forwards native <div> props.

CardSlot

A content row. One child fills the width; two or more split it evenly. Forwards native <div> props.

CardImage

Prop	Type	Default	Description
src	string	—	Image source (required)
alt	string	—	Alt text — required; "" for decorative
aspectRatio	string	—	CSS aspect-ratio (e.g. "16 / 9")

Forwards native <img> props.

Accessibility

• Card is a plain container — no role or interactivity of its own.
• With asChild + <a>, the whole card is a single link; do not nest other interactive elements inside.