Case figure

How

A full width image that fades in on scroll. Art that needs a separate light theme file ships as a pair, and only one of the two is ever visible.

When

When the artifact is worth showing at size. Not for decoration, and not for anything that has to be read, because an image of text is not text.

Where

In the hero’s figure slot, or inside a band with figure and inner={false} set.

In code

src/components/ui/CaseFigure.astro.

---
import CaseFigure from '../../components/ui/CaseFigure.astro';
---
<CaseFigure
  src="/images/merchant-surfaces.webp"
  alt="Merchant logos linked by arrows to the same checkout screen on three phones."
  width={2400}
  height={971}
  loading="lazy"
>
  <p class="sdc-case-figure__cap">The program ran across 38 merchants.</p>
</CaseFigure>

Prop	Type	Default	What it does
src	string	required	The image.
alt	string	required	What the image says. Write it even when a caption follows.
light	string	none	A light theme version of the same art. Switches to the pair.
width	number	none	Intrinsic width, so the browser reserves the space.
height	number	none	Intrinsic height, same reason.
loading	'lazy' or 'eager'	none	lazy for a figure below the first screen.
class	string	none	Extra classes.

A caption goes in the slot, as p.sdc-case-figure__cap.

The theme pair

When light is set, the dark copy carries the alt text and the light copy is marked decorative with an empty alt and aria-hidden. Only one is visible, so describing both would announce the same image twice.

Width and height

Pass them. Without them the page reflows when the image arrives, which moves the text someone is already reading. The two numbers are the file’s real pixel dimensions, not the display size.

Do

• Pass width and height on a single image.
• Use loading=“lazy” below the first screen.
• Describe what the image shows, not that it is an image.

Don’t

• Ship an image of text that matters.
• Describe both halves of a theme pair.
• Leave alt empty on art that carries meaning.

Checks before you ship

1. The page does not jump when the image loads.
2. A screen reader announces the image once, not twice.
3. Anything below the first screen is lazy loaded.
4. The alt text would make sense to someone who cannot see the file.