Not found (404)

없는 페이지(404)

A big left-aligned "404", a thin title and a blue button. Nothing is centred, so it reads like a document.

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

Also known as: NotFound

···

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 stacks a grey "404", a title, a description and a blue "Go home" button (label left, arrow at the right end), then a numbered "New posts" list. directory keeps the same head but puts "Find by topic" (topic names with post counts) in a narrow left column and the new posts in a wide right column.

For a lost visitor, one home button plus new posts is cleanest with simple. When there are several topics worth jumping to, directory fits. Both are text only, with no illustration, so they feel calm but not especially friendly.

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