Photo Callout Markers

Feature247: Photo Callout Markers

An annotated photograph: numbered markers sit on the image at coordinates you supply, and a ruled index underneath explains each one. Selecting either the marker or its entry moves the whole section to that callout.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/feature247?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/feature247?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature247.tsx plus the badge7 eyebrow it uses.

Quick start

The installed file exports feature247Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Feature247, feature247Demo } from "@/components/beste/block/feature247";

export default function Page() {
  return <Feature247 {...feature247Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Feature247 } from "@/components/beste/block/feature247";

export default function Page() {
  return (
    <Feature247
      badge={{ label: "Read the picture" }}
      heading="Four decisions you can see from the doorway."
      description="Every mark on the photograph is a choice we had to defend."
      image={{ src: "/work/lobby.jpg", alt: "Signage across a lobby wall" }}
      callouts={[
        {
          index: "1",
          title: "Type at reading height",
          description: "Set at 44 millimetres so it lands at eye level for a standing adult.",
          x: 22,
          y: 32,
        },
        {
          index: "2",
          title: "One rule, never two",
          description: "A single hairline separates the directory from the wall.",
          x: 48,
          y: 58,
        },
      ]}
    />
  );
}

Props

type Callout = {
  index: string;
  title: string;
  description: string;
  /** Horizontal position of the marker, as a percentage of the image width */
  x: number;
  /** Vertical position of the marker, as a percentage of the image height */
  y: number;
};

Behavior notes

• x and y are percentages of the image box, applied as inline left and top with a -translate-x-1/2 -translate-y-1/2 offset, so a marker stays on the same part of the picture at every screen width.
• The first callout is selected on mount (useState(0)), which means the section never opens in a blank state.
• Selection is expressed three ways at once: the marker on the photograph turns into a light seal with a ring-4 halo, the index entry's seal inverts to bg-foreground text-background, and its top rule darkens from border-border to border-foreground. Color alone is never the signal.
• Unselected index entries fade their description to text-muted-foreground/60 rather than hiding it, so the whole list stays readable and scannable.
• Both the marker and the index entry are real button elements with aria-pressed and, on the markers, an aria-label carrying the callout title, so the state is exposed to assistive technology.
• The image switches ratio rather than height: aspect-[16/10] on mobile becomes md:aspect-[2/1], which keeps marker coordinates meaningful without letterboxing a phone.
• The index is a four-column grid on md, so a set of four callouts lines up with the markers left to right.