Card

Interactive

See Card in Storybook for every variant, with live controls.

The default surface. A bordered container with an optional header.

import { Card, Badge } from "@kairosis/eidos";

<Card
  title="api-gateway"
  action={
    <Badge tone="success" dot>
      Healthy
    </Badge>
  }
>
  3 sources connected. Last run 2m ago.
</Card>;

Props

Prop	Type	Default	Description
title	ReactNode	—	Header title, 14px semibold
action	ReactNode	—	Header-right slot: button, badge, menu
padding	number	16	Inner padding, px
interactive	boolean	false	Hover lifts the background; cursor becomes a pointer
selected	boolean	false	Primary-coloured border

Also accepts every <div> attribute. Forwards a ref.

Guidelines

• Structure comes from the 1px border, not a shadow — in dark, cards carry no shadow at all.
• The header only renders if title or action is set, and only adds bottom spacing when there's content below it.
• interactive is a visual affordance, not a control: it doesn't make the card focusable. For a clickable card, put a real button or link inside, or use List.
• title accepts a node, so it's widened from the DOM's string-only title attribute — you can't set a native tooltip on a Card.