Not found (404)

없는 페이지(404)

Inside a bordered box, a small “404”, a title, a description and a grey “Go home” button are left-aligned, followed by a numbered “New posts” box.

RuleLeft-aligned. Never a giant centered “404” splash.

Also known as: NotFoundBlankslate

···

usage (Astro)

---
// src/pages/404.astro
import { NotFound } from '../components/registry';
---
<NotFound homeHref="/" latest={latest} topics={topics} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "NotFound": "simple" }
}

props (TypeScript)

export interface NotFoundProps {
  homeHref: string;
  latest: PostSummary[];
  topics: NavLink[];
  variant?: VariantOf<'NotFound'>;
}

simple is one box with “Page not found” and a “Go home” button, followed by a numbered “New posts” box. directory keeps the top box wide and splits the lower part in two: “Find by topic” (with post counts) on the left and “New posts” on the right.

Sites with many topics do better with directory, which helps readers re-route; with few posts, simple is enough. Neither has an illustration, so they stay light, though also plain.

Primer’s Blankslate is used left-aligned instead of centered.

Use it when — Variants 2

simpleSimple Smaller sites, where a home button and a few recent posts are enough.Used by 5: babyfood, babyplay, babysick, newborn, vaccination
directoryDirectory When there are many topics to help the reader re-route — topics and recent posts in two columns.Used by 6: babysleep, birthprep, feeding, milestone, toddlerfood, 허브

Same component, other packs

05Not found (404)없는 페이지(404)

05Not found (404)없는 페이지(404)

05Not found (404)없는 페이지(404)

Use it when — Variants 2