K KRDS · 06

Home 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.

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: HomeHero
···
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'>;
}

editorial puts a big title, intro and source line on a grey band, with a bordered white box inside for the "Start here" post. finder uses white, a slightly smaller title, and a topic list under "What do you need?" (name, description, count, chevron) as the star. featured shrinks the site title to one line on a grey band and makes the featured post title the largest, with a blue "Read this first" button.

The sentence naming the sources shows in bold right under the intro in editorial and finder, and drops to the bottom in regular grey text under a rule in featured. Use featured when there is one clear lead post and finder to guide by topic. With no photo it feels trustworthy but does not grab attention.

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.