メインコンテンツまでスキップ

Heroブロック

Hero は、MUI 上に構築されたレスポンシブなマーケティングヒーローセクションで、見出しコピー、プライマリのコールトゥアクション、大画面では横並びの大きなヒーロー画像を備えています。

インストール​

npm install @nodeblocks/frontend-hero-block@0.3.2

必要なもの​

項目用途
byline見出し
buttonTextCTA のラベル
onClickButtonCTA クリック時のハンドラー
imageUrl画像のソース URL（2:1 のアスペクト比を想定）
コンテンツはアプリ側で管理する

ページまたは CMS からコピーと画像を渡してください。任意の secondaryText と tertiaryText は byline の下、ボタンの下にレンダリングされます。大画面での画像の縦位置は imageAlignment（top、center、bottom）で調整できます。

コード例​

ドキュメントのプレビューでは、ヒーローがライブエディターに収まるよう境界付きフレームと明示的な Hero.Img サイズを使います。アプリでは全幅レイアウトを使い、プレビュー専用のスタイルは省略してください。

ライブエディター
function Example() {
  const imageUrl = '/img/undraw_docusaurus_mountain.svg';

  return (
    <Hero
      byline="プラットフォームへようこそ"
      secondaryText="業務を効率化し、生産性を向上"
      tertiaryText="30日間無料トライアル • クレジットカード不要"
      buttonText="始める"
      imageUrl={imageUrl}
      onClickButton={() => {}}
      sx={{
        '& .nbb-hero-content': {
          position: 'relative',
          zIndex: 1,
          maxWidth: '100%',
        },
        '& .nbb-hero-content-byline, & .nbb-hero-content-secondary-text, & .nbb-hero-content-tertiary-text': {
          color: 'grey.900',
          textShadow:
            '0 0 8px rgba(255,255,255,1), 0 0 16px rgba(255,255,255,0.9), 0 1px 2px rgba(255,255,255,0.95)',
        },
        '& .nbb-hero-content-tertiary-text': {
          color: 'primary.dark',
        },
      }}
    />
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
bylineReactNodeはい—Hero.Content.Byline でレンダリングされるメイン見出し
buttonTextstringはい—Hero.Content.ActionButton のラベル
onClickButton() => voidはい—アクションボタンクリック時に呼び出される（Hero.Content.ActionButton に onClick がない場合も使用）
imageUrlstringはい—サブコンポーネントで src が未設定のとき Hero.Img に渡される画像ソース

コンテンツプロパティ​

プロパティ型必須デフォルト説明
secondaryTextReactNodeいいえ-byline 下の大きな補助行（Hero.Content.SecondaryText）
tertiaryTextReactNodeいいえ-アクションボタン下の小さな行（Hero.Content.TertiaryText）
imageAlignment'top' | 'center' | 'bottom'いいえ-大画面（lg ブレークポイント）での Hero.Img の縦位置

レイアウトと構成プロパティ​

プロパティ型必須デフォルト説明
childrenReactNode | functionいいえ-複合サブコンポーネント（Hero.Content、Hero.Img など）、またはレイアウトブロックの注入・並べ替え用の関数 ({ defaultBlocks, defaultBlockOrder }) => ({ blocks, blockOrder })
classNamestringいいえ-ルートスタックのクラス名（nbb-hero）
sxSxPropsいいえ-ルートスタック用の MUI システムスタイル

Hero は StackProps（children を除く）を継承します。デフォルトの defaultBlockOrder: content、img、byline、secondaryText、actionButton、tertiaryText。

サブコンポーネントのプロパティ​

サブコンポーネントはコンテキストから読み取り、同じコンテンツキーをプロパティとして渡すとローカルで上書きできます。

サブコンポーネント主要プロパティ継承ベース
Hero.Contentchildren、spacing（デフォルト { xs: 3, lg: 4 }）、className、sxStackPropsStack
Hero.Imgsrc、alt（デフォルト hero image）、imageUrl、imageAlignment、component、className、sxBoxPropsBox（component="img"）
Hero.Content.Bylinebyline、children、variant（デフォルト h3）、className、sxTypographyPropsTypography
Hero.Content.SecondaryTextsecondaryText、children、variant（デフォルト h2）、className、sxTypographyPropsTypography
Hero.Content.ActionButtonbuttonText、onClickButton、onClick、children、variant（デフォルト contained）、className、sxButtonPropsButton
Hero.Content.TertiaryTexttertiaryText、children、variant（デフォルト h6）、color（デフォルト primary）、className、sxTypographyPropsTypography

デフォルト UI ブロック​

ブロックベース備考
Hero（ルート）Stacklg では横並び、中央揃え、最大高さに上限（nbb-hero）
content（Hero.Content）Stackbyline グループと CTA グループを持つテキスト列（nbb-hero-content）
img（Hero.Img）BoximageUrl をレンダリング。alt のデフォルトは hero image（nbb-hero-img）
byline（Hero.Content.Byline）Typographyコンテキストの byline からのレスポンシブ見出し
secondaryText（Hero.Content.SecondaryText）TypographysecondaryText が設定されているときの大きな中央揃え行
actionButton（Hero.Content.ActionButton）Buttonコンテキストの buttonText を使う contained CTA
tertiaryText（Hero.Content.TertiaryText）TypographytertiaryText が設定されているときのプライマリカラー行

デフォルトのルートレンダリング順序: content → img。

TypeScript​

import * as React from 'react';
import { Hero } from '@nodeblocks/frontend-hero-block';
import type { ReactNode } from 'react';

type HeroSectionProps = {
  byline: ReactNode;
  buttonText: string;
  imageUrl: string;
  onClickButton: () => void;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
  imageAlignment?: 'top' | 'center' | 'bottom';
};

export function HeroSection({
  byline,
  buttonText,
  imageUrl,
  onClickButton,
  secondaryText,
  tertiaryText,
  imageAlignment,
}: HeroSectionProps) {
  return (
    <Hero
      byline={byline}
      buttonText={buttonText}
      imageUrl={imageUrl}
      onClickButton={onClickButton}
      secondaryText={secondaryText}
      tertiaryText={tertiaryText}
      imageAlignment={imageAlignment}
    />
  );
}