メインビジュアル - メインビジュアル1-3

ソースコード

ソースコードである HTML を利用するページにコピーし、ご利用ください。mfc-base.cssおよびmfc-layout.cssの読み込みが必要です。

デザインコンポーネントについて

HTML

以下のコードをmain要素直下に配置します。

<hr class="mf-hr mf-col-2 mf-width-fullexpand" style="display: none">

<section class="mfc-mainvisual mfc-mainvisual-img mfc-mainvisual-001-001-3">
  <ul>
    <li style="background-image:url('https://via.placeholder.com/1280/f0a0a0/ffffff')"></li>
  </ul>
</section>

<div class="mfc-mainvisual mfc-mainvisual-content mfc-mainvisual-001-001-3">
  <h1>見出し</h1>
  <p>テキスト</p>
  <a class="mfc-link" href="#">リンク</a>
</div>