Not found (404)

없는 페이지(404)

Left-aligned. A small “404”, a very large title and a black “Back to home” button, in that order.

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 lists three “New posts” under the button, each with a large number (01, 02, 03). directory splits below the same head into two columns: “Find by topic” (name, post count, two-line description) on the left and “New posts” on the right. Neither centers its content.

Use simple to just send lost readers home, and directory to also show topics. The stars of the screen are the big title and the black button; there is no decorative illustration.

Center alignment is deliberately not used.

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