Case study Open Graph Image Template
A case study card with a customer chip, result headline, and key stats.
A case study card with a customer chip, result headline, and key stats.
Search blocks by description or jump to a page.
Every OG image is included with Pro and Team. Start a plan to copy the code, install with the CLI, and download the raw SVG.
Already on a plan? Log in
Use the Case study template when the story is really about the numbers. It leads with a customer chip and the result headline, then hands the bottom of the card to two oversized stats, so the outcome lands before anyone reads a word of the writeup.
This template is a metadata image route for the Next.js App Router. The file exports size, contentType, and alt values plus a default async function that returns an ImageResponse. When a page in the segment is shared, satori converts the JSX into an SVG document, the runtime rasterizes that SVG into a 1200 by 630 PNG, and Next.js serves the result and wires the og:image and twitter:image tags into the page head automatically. The two stats sit in a flex row, so one strong number reads as cleanly as a matched pair.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-case-study
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a story you will usually move it into the case study segment instead, for example app/customers/[slug]/opengraph-image.tsx. You can also copy the code from this page straight into your project.
The card renders text with Inter, read from assets/fonts at your project root with node:fs so the font files never ship to the browser. Download the latin woff files for weights 400, 500, 600, and 700 from Fontsource and save them as assets/fonts/inter-latin-400-normal.woff and so on.
The content object holds brand for the logo row, the customer chip, the result title, and the url. The stats array is the star: each entry is a value and a label, and the two provided render as the big number columns. Keep values short like 3.2x or $1.8M so they hold their scale, and keep labels to two or three words. The title reads best up to two lines at 58px. Drop to a single stat if you have only one number worth quoting, and the row recenters itself.
satori supports a focused subset of CSS: flexbox layout only, flat colors, and an explicit display: flex on any element with multiple children. Keep those rules in mind if you rework the layout.