Behive Tech Component Registry

Image Card

v0.1.2Draft

A card with an image on top and a title, subtitle and meta row below, for artwork lists, artist tiles and booking previews. It composes `atoms.card` with no padding, so fill, border and corners are Card's.

pnpm add @behivetech/molecules.image-card

Edit the code and the preview updates as you type. Every registry export is in scope — ImageCard from this package, plus React hooks and every other component in the registry.

PlaygroundOpen in new tab
const PLACEHOLDER_IMAGE =
  "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='500'><rect width='400' height='500' fill='%23bc13fe'/></svg>";

const LinkedImageCard = () => (
  <ImageCard
    href="/art/blue-hour"
    media={
      <img
        src={PLACEHOLDER_IMAGE}
        alt="Blue hour on the porch, oil on canvas"
      />
    }
    title="Blue hour on the porch"
    subtitle="Lena Park"
    meta="$480.00"
  />
);

render(<LinkedImageCard />);