TYP-01Typography

セクション見出し

LPやコーポレートサイトのセクション冒頭に置く見出しセット。英字アイブロウ+見出し+リード文+アンバーの短い罫線。

追加日:: 2026-07-23
依存:: なし
tags: #typography #heading #brand

プレビュー

Service

制作して終わり、にしない。

公開後のアクセス解析から改善提案まで。中小企業のWeb集客を、伴走型で支援します。

return function SectionHeading() {
  return (
    <div className="w-full max-w-xl">
      <p className="text-xs font-bold tracking-[0.2em] text-amber-600 uppercase">Service</p>
      <h2 className="mt-2 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
        制作して終わり、にしない。
      </h2>
      <p className="mt-3 text-sm leading-relaxed text-gray-500 sm:text-base">
        公開後のアクセス解析から改善提案まで。中小企業のWeb集客を、伴走型で支援します。
      </p>
      <div className="mt-4 h-px w-12 bg-amber-500" aria-hidden="true" />
    </div>
  );
}

shadcn CLI でプロジェクトに追加

npx shadcn@latest add https://designs.first-ch.com/r/section-heading.json