C Carbon · 06

홈 머리

Home hero

그림도 그라데이션도 없이 흰 바탕에 가는 큰 제목만 왼쪽에 둬요. 대표 글 상자, 주제 타일, 큰 대표 글 제목 중에서 무엇을 주인공으로 할지 골라요.

쓰는 규칙홈의 유일한 제목(h1)이 여기 있다. 허브(사이트 모음)는 대표 글 대신 아기 시기 링크를 둔다.

다른 이름: 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'>;
}

editorial은 제목, 소개, 출처 줄(방패 아이콘과 「편집 원칙」 링크)에 이어 회색 상자 하나로 대표 글을 보여 줘요. 상자 오른쪽 아래에 파란 화살표가 있어요. finder는 제목이 한 단계 작고, 「어떤 정보가 필요하세요?」 아래에 주제 타일이 네 칸으로 나란히 놓여요. featured는 사이트 제목이 작은 라벨 줄로 물러나고, 대표 글 제목이 가장 크게 나오며 「이 글부터 읽기」 파란 버튼이 붙어요.

글이 많은 정보 사이트라 어디서 시작할지 알려 주려면 editorial, 주제로 갈라 찾게 하려면 finder, 글 하나를 강하게 밀려면 featured예요. 사진이 없어서 첫 화면이 글자 위주로 보이는 게 이 팩의 특징이에요.

허브 사이트에서는 시기 태그나 시기 타일이 따라붙어요. 페이지 제목도 여기에 있어요.

이럴 때 — 변형 3

  1. editorial제목 중심 사이트가 무엇이고 어느 기관 자료를 보고 쓰는지를 먼저 보여 주고 싶을 때.쓰는 사이트 4곳: babyplay, feeding, toddlerfood, vaccination
  2. finder찾기 검색으로 들어와 주제를 바로 고르는 사람이 많을 때 — 「어떤 정보가 필요하세요?」가 주인공.쓰는 사이트 3곳: babysleep, newborn, 허브
  3. featured대표 글 처음 읽어야 할 글이 분명한 사이트 — 그 글 제목이 가장 크다.쓰는 사이트 4곳: babyfood, babysick, birthprep, milestone
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.