Editorial 404 With Portrait Image

Two-column 404 screen: a parenthetical eyebrow, a two-line display headline, a pill-shaped CTA, and an oversized "report this link" email address on the left, paired with a tall captioned photograph filling the right column.

By Staaarter Team

Error

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/editorial-404-with-portrait-image.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error20.tsx instead.

Usage

The file also exports error20Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error20, error20Demo } from "@/components/blocks/error/error20";

export default function Page() {
  return <Error20 {...error20Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	"(error)"	Small parenthetical label above the headline.
heading	ReactNode	none	Two-line display headline.
ctaLabel	string	"Back to homepage"	Label on the pill-shaped CTA button.
ctaHref	string	"/"	Link target for the CTA button.
reportEmail	string	none	Email address rendered as an oversized mailto link for reporting broken links.
image	MediaSlotImage	undefined	Photo filling the right column, falls back to a placeholder.
caption	string	undefined	Caption shown in a card overlaid on the bottom of the photo.
className	string	none	Extra classes for the outer section element.

Behavior notes

Entirely static/server-rendered: the CTA is a plain next/link via Button's render prop, and the reportEmail link is a real mailto: link, but there is no client state anywhere in the block.
The photo column is hidden below the lg breakpoint (hidden lg:block), so on small screens only the text column renders.

More Error Blocks

View all →

centered-404-message

Centered 404 Message

Minimal centered 404 with two CTAs and a divided row of popular page links.

404-with-site-search

404 With Site Search

404 screen with a working search box and a bordered list of suggested pages.

split-404-with-image

Split 404 With Image

Two-column 404 with the message on one side and a full-bleed photo that scales on hover on the other.

404-with-destination-cards

404 With Destination Cards

404 screen with a grid of icon destination cards plus fallback CTA buttons.

404-support-panel

404 Support Panel

Card-style 404 echoing the requested URL, with a real back button and a support/status link row.

inline-404-line

Inline 404 Line

The smallest possible 404: code and message on one divided line with one button underneath.