Annual report Open Graph Image Template
An annual report card with a year tile, title, and stat chips.
An annual report card with a year tile, title, and stat chips.
Every Open Graph image template is included with Basic and Pro. Pick a plan to copy the code, install with the CLI, and download the raw SVG.
Already purchased? Log in
Use the Annual report template for yearly reports, shareholder covers, and state of the company posts. A tall year tile anchors the left, the report title and a one line summary sit beside it, and two headline figures ground the pair, so the cover reads as a document rather than a slogan.
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 the report 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. Because the statistics live in code, the cover and the report body draw from the same numbers and always agree.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-annual-report
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a report, move it into that segment instead, for example app/annual-report/2026/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 the brand, the year for the tile, the title, a one line description, a stats array of value and label pairs, and the url. Two figures fit the layout: the row sets them side by side, so three would crowd the text column. The tile shows the brand in tracked caps above a 96 pixel year, so keep the year to four digits. Trim the description to one line at its 560 pixel cap.
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.