Sticky Photo With Notes

Feature250: Sticky Photo With Notes

One photograph holds its position while a numbered set of notes scrolls past it. Each note opens on its own eyebrow and rule, and the outline CTA closes the column rather than the section.

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/feature250?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/feature250.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Feature250, feature250Demo } from "@/components/beste/block/feature250";

export default function Page() {
  return <Feature250 {...feature250Demo} />;
}

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

import { Feature250 } from "@/components/beste/block/feature250";

export default function Page() {
  return (
    <Feature250
      badge={{ label: "One building, four notes" }}
      heading="Read down the page, the picture stays where it is."
      image={{
        src: "/case/ceiling.jpg",
        alt: "Vaulted ceiling with repeating ribs",
        caption: "Atrium ceiling, before the signage went up",
      }}
      notes={[
        {
          index: "Note one",
          title: "The ceiling decided the type size",
          description: "Nine metres of air means anything under forty millimetres disappears.",
        },
        {
          index: "Note two",
          title: "The ribs decided the spacing",
          description: "Every sign lines up with a structural rib.",
        },
      ]}
      button={{ label: "Read the full case", href: "/work/atrium" }}
    />
  );
}

Props

type StickyImage = {
  src: string;
  alt: string;
  caption: string;
};

type FeatureNote = {
  index: string;
  title: string;
  description: string;
};

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The picture sticks with md:sticky md:top-24 md:self-start; self-start is the part that matters, because a stretched grid item cannot stick at all.
• Sticking only starts at md. On a phone the photograph is simply the first thing in the column, so the section reads as picture then notes.
• The caption sits under the frame with no rule above it, so it reads as part of the photograph rather than as the first note.
• Only notes after the first carry border-t pt-6, which keeps the column from opening on a stray rule directly under the heading.
• Each note's index is a Badge7, so the sequence uses the same eyebrow treatment as the section itself instead of inventing a second label style.
• The CTA is the last item inside the notes column, so it arrives when the reader finishes the notes rather than hanging under the whole section.
• The image is aspect-[4/5], tall enough that the sticky frame still fills its side of the grid while four notes scroll past it.