ヒーロー画像／Hero

ページの背景いっぱいに大きく画像を表示するコンポーネントです。
ページタイトルをグラフィック表現で惹きつけたい際に利用します。


<a class="c-hero" href="/">
  <div class="c-hero__body">
    <div class="container">
      <div class="grid grid--justifyStart sm:grid--justifyCenter">
        <div class="grid__col grid__col--span8">
          <div class="c-hero__title">
            <h1 class="c-hero__heading">タイトル</h1>
            <p class="c-hero__shoulder">ショルダーコピー</p>
          </div>
          <div class="c-hero__description">
            <p class="c-paragraph">
              情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="c-hero__image">
    <div class="c-image c-image--fullWidth">
      <picture>
        <img
          src="/images/sample.webp"
          width="1600"
          height="900"
          alt="画像のalt"
        />
      </picture>
    </div>
  </div>
</a>

原則

ページの最上部に「見出し h1」の代わりとして利用します。
「デフォルト」タイプは、「タイトル」「リード文」を表示するセーフティエリアが画像の左下に設けられています。
「人物」タイプは、「所属」「氏名」「役職名」を表示するセーフティエリアが画像左側に高さ中央揃えで設けられています。
- セーフティエリアの情報量を考慮し、画像はバストアップ程度の構図を推奨します。

パターン

人物

人物画像を表示することができます。


<a class="c-hero c-hero--person" href="/">
  <div class="c-hero__body">
    <div class="container">
      <div class="grid grid--justifyStart sm:grid--justifyCenter">
        <div class="grid__col grid__col--span8">
          <div class="c-hero__title">
            <h1 class="c-hero__heading">苗字 名前</h1>
            <p class="c-hero__shoulder">大学名　学部名</p>
          </div>
          <p class="c-hero__subTitle">Name Name</p>
          <div class="c-hero__description">
            <p class="c-paragraph">准教授</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="c-hero__image">
    <div class="c-image c-image--fullWidth">
      <picture>
        <img
          src="/images/sample-size.webp"
          width="1600"
          height="900"
          alt="画像のalt"
        />
      </picture>
    </div>
  </div>
</a>