Design Pack Atlas
한국어
C Carbon · 06

Home hero

홈 머리

No pictures or gradients: a thin, large title on white, left-aligned. You choose the star: a featured-post box, topic tiles, or a giant featured-post title.

RuleThe home page’s only title (h1) lives here. The hub (the directory of sites) shows baby-age links instead of a featured post.

Also known as: HomeHeroLead space
···
usage (Astro)
---
// src/pages/index.astro
import { HomeHero } from '../components/registry';
---
<HomeHero
  eyebrow={eyebrow}
  title={IS_HUB ? site.name : site.tagline}
  lead={IS_HUB ? HUB_LEAD : site.description}
  publishers={IS_HUB ? HUB_PUBLISHERS : topPublishers(posts)}
  aboutHref="/about/"
  featured={featured ? postSummary(featured) : undefined}
  topics={IS_HUB ? undefined : await topicLinks()}
  stages={stageGroups.length > 1 ? stageGroups.map((g) => ({ href: `#${g.id}`, label: g.label })) : undefined}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "HomeHero": "editorial" }
}
props (TypeScript)
export interface HomeHeroProps {
  /** 「글 13편 · 10월 13일 업데이트」 */
  eyebrow: string;
  /** 페이지의 유일한 h1 */
  title: string;
  lead: string;
  /** 실제 인용 상위 기관 */
  publishers: string[];
  aboutHref: string;
  /** 사이트 홈: 「처음이라면 여기부터」 대표 글. 허브에는 없다 */
  featured?: PostSummary;
  /** 사이트 홈: 주제(카테고리) */
  topics?: NavLink[];
  /** 허브: 아기 시기 묶음(앵커) */
  stages?: Link[];
  variant?: VariantOf<'HomeHero'>;
}

See all four packs side by side →

···

KRDS

06Home hero홈 머리

A home header that starts with words and links, no picture. A big title, a line naming the sources, then a post or topic list to read.

···

Primer

06Home hero홈 머리

The home opens with text and bordered boxes only, no pictures. editorial puts a “Start here” box under the big title; finder centers on a topic-finder box.

···

shadcn/ui

06Home hero홈 머리

A very large left-aligned title and a light lead. The featured post follows as an outlined card (editorial) or a black button (featured).

editorial shows the title, intro and a credit line (shield icon and an "Editorial policy" link), then one grey box for the featured post with a blue arrow at its bottom right. finder makes the title a step smaller and lines up four topic tiles under "What do you need?". featured shrinks the site title to a small label, makes the featured post’s title the largest text and adds a blue "Read this first" button.

Pick editorial to say where to start, finder to let people branch by topic, featured to push one article hard. With no photos, the first screen is mostly type, which is this pack’s character.

Hub sites also get stage tags or stage tiles, and the page title lives here.

Use it when — Variants 3

  1. editorialEditorial When you want to lead with what the site is and which institutions it relies on.Used by 4: babyplay, feeding, toddlerfood, vaccination
  2. finderFinder When most visitors arrive looking for one topic — “What do you need?” takes center stage.Used by 3: babysleep, newborn, 허브
  3. featuredFeatured When there is one obvious first article — its title is the biggest thing on the page.Used by 4: babyfood, babysick, birthprep, milestone
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.