P Primer · 06

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

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: HomeHeroSubhead
···
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 shows a big title, an intro, a source line with a shield icon (and an “Editorial policy” link) and a featured-post box with a grey header row. finder shrinks the title and makes the “What do you need?” box the star, with topic name, description and post count in two columns. featured reduces the site title to one line, makes the featured post’s title the biggest text and adds a grey “Read this first” button.

If the post should come first, choose featured; if topic navigation should, finder. Using only boxes and lines, it suits sites without photos, though it does not grab the eye. With an odd number of topics the two-column box leaves an empty cell, so a single-column list is used then.

It holds the page title, and there is only one.

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.