S shadcn · 06

홈 머리

Home hero

왼쪽 정렬의 아주 큰 제목과 옅은 리드글. 대표 글은 테두리 상자(editorial)나 검은 버튼(featured)으로 이어져요.

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

다른 이름: 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 은 제목, 리드, 방패 아이콘이 붙은 출처 줄 다음에 「처음이라면 여기부터」 상자 하나가 와요. 상자는 테두리와 옅은 그림자가 있고 아래에 「읽어 보기」 링크가 있어요. finder 는 제목이 한 단계 작고, 「어떤 정보가 필요하세요?」 아래 주제 바로가기 격자가 주인공이며 마지막에 대표 글 링크가 한 줄로 붙어요. featured 는 사이트 제목이 작은 회색 한 줄로 물러나고 대표 글 제목이 가장 크게 나오며 「이 글부터 읽기」 검은 버튼이 있어요.

대표 글 하나로 첫인상을 정하려면 featured, 주제가 여럿이라 길 찾기가 먼저면 finder, 소개와 대표 글을 둘 다 보여 주려면 editorial 이에요. 모두 흰 바탕에 검은 글자라 화면이 시원해요.

랜딩 페이지 소개의 짜임(작은 머리말, 큰 제목, 큰 회색 리드)을 왼쪽 정렬로 옮긴 모양이에요. 허브처럼 대표 글이 없으면 featured 대신 editorial 로 그려요.

이럴 때 — 변형 3

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

항목 추가 요청

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