S shadcn · 06

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

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 shows the title, the lead, and a source line with a shield icon, followed by a single “Start here” card with a border and a faint shadow and a “Read” link at the bottom. finder has a slightly smaller title; a grid of topic shortcuts under “What do you need?” is the star, with a one-line link to the featured post at the end. featured shrinks the site title to a small gray line, makes the featured post’s title the largest thing on screen, and adds a black “Read this first” button.

Choose featured when one post should set the first impression, finder when several topics make navigation the priority, and editorial to show both the intro and the featured post. All use black text on white, so the screen feels open.

It moves the layout of a landing-page intro (small label, large title, large gray lead) to left alignment. When there is no featured post, as on the hub, it draws editorial instead of featured.

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.