InfoCard

Render an image card with a title and description, plus an optional toggle that reveals tinted detail text.

InfoCard is a client component that renders a 4:3 card with a blurred header, a cover image or custom children, and an optional round toggle button that opens a full-card detail overlay. Use it for destination, product or feature tiles with a short extra description. It depends on motion/react and next/image.

Lisbon

Hills, trams and tiled facades.

Import#

typescript

import { InfoCard } from "@reactberry/system/blocks";

Usage#

typescript

import { InfoCard } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function Destinations() {
  return (
    <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap="m">
      <InfoCard
        title="Lisbon"
        description="Hills, trams and tiled facades."
        detailContent="Visit in spring for mild weather and fewer crowds."
        imageSrc="/images/lisbon.jpg"
        tintColor="#0b5c7a"
      />
      <InfoCard title="Kyoto" description="Temples and gardens." imageSrc="/images/kyoto.jpg" />
    </Box>
  );
}

Examples#

Custom media#

Pass children to replace the image, for example with a live view or a video. Position the media absolutely to fill the card.

Live view

Updated every minute.

Without detail#

Leave detailContent empty to render the card without the toggle button.

Kyoto

Temples and gardens.

API#

InfoCard#

Prop	Type	Default	Description
`title*`	`string`	—	Heading rendered as an `h2`; also the fallback image `alt`.
`description`	`string`	`""`	Text below the title.
`detailContent`	`string`	`""`	Text shown in the detail overlay. The toggle button only renders when this is non-empty.
`tintColor`	`string`	`"#000000"`	Background of the detail overlay and the button icon stroke while open.
`imageSrc`	`string`	—	Cover image source passed to `next/image`.
`imageAlt`	`string`	—	Image alt text. Defaults to `title`.
`imageSizes`	`string`	`"100vh"`	`sizes` attribute for the image.
`children`	`ReactNode`	—	Replaces the image when provided.

All remaining props are typed as HTMLMotionProps<"div"> and spread onto the outer Motion Box. Box style props such as p or width are not part of this type.

Accessibility#

The title is an h2, which may not fit the heading order of the page.
The toggle is a native button, so it is focusable and works with Enter and Space. It has no accessible name and no aria-expanded; its only content is a plus icon.
The image alt defaults to title.

Notes#

The card defaults to aspect="4/3", shape="rounded", overflow="hidden" and a column flex layout.
The header has a fixed backdrop-filter: blur(8px) with a fading mask, and sits above the media at zIndex 2.
The toggle switches the card between main and detail animation states. The button rotates 45 degrees and inverts its colours; the overlay fades in and the text slides down after a 0.3 s delay.
Detail text is rendered in white at fontSize="large", so choose a tintColor with sufficient contrast.
There is no reduced-motion handling.
Remote image URLs must be allowed in your Next.js images configuration.