TickerCard

Render a square image tile that shows a dimmed overlay with a call-to-action label on hover.

TickerCard is a client component that renders a square next/image tile. On hover it fades in a 70% black overlay with either a white pill label or custom overlay content. Use it for image grids where each tile links to more content. It depends on motion/react and next/image.

Import#

typescript

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

Usage#

typescript

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

const tiles = ["/images/a.jpg", "/images/b.jpg", "/images/c.jpg"];

export default function TileRow() {
  return (
    <Box display="flex" gap="m">
      {tiles.map((src) => (
        <TickerCard key={src} image={src} width="200px" shape="rounded" />
      ))}
    </Box>
  );
}

Examples#

Custom label#

Pass a string to overlayContent to change the text in the pill. Hover the tile to see it.

Custom overlay element#

Pass a React element to overlayContent to render it as-is instead of the pill, for example a button.

API#

TickerCard#

Prop	Type	Default	Description
`image`	`string`	—	Tile image source passed to `next/image`. Typed as optional, but the image is always rendered, so a value is effectively required.
`overlayContent`	`ReactNode \| string`	`"Explore Now"`	A valid React element is rendered as-is; any other value is wrapped in a white pill with small semibold text.
`children`	`ReactNode`	—	Rendered inside the tile before the overlay and image layers.
`width`	`number \| string`	—	Declared on the props type and passed through to the `Box`.
`height`	`number \| string`	—	Declared on the props type and passed through to the `Box`.

All remaining props are spread onto the outer Motion Box (typed as [key: string]: any), which defaults to aspect="1/1", position="relative", overflow="hidden" and centred flex content.

Accessibility#

The tile renders plain div elements with no role. The overlay opens on pointer hover only, so it is not reachable with the keyboard or on touch devices. Don't put content there that is not available elsewhere.
The image always has alt="image", which cannot be changed.

Notes#

The overlay is shown via Motion's onHoverStart and onHoverEnd.
The image layer is absolutely positioned at zIndex 0. Give children a positioned wrapper with a higher zIndex to render above it. The overlay uses zIndex 10.
The image uses fill, sizes="100vh" and objectFit: "cover".
The default pill slides up 10px as the overlay fades in.
There is no reduced-motion handling.
Remote image URLs must be allowed in your Next.js images configuration.