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

ソースコード

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

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

HTML

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

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

<div class="mfc-mainvisual mfc-mainvisual-001-001-2">
    <div class="mfc-mainvisual-img">
        <ul>
            <li style="background-image:url('https://via.placeholder.com/1280/f0a0a0/ffffff')"></li>
        </ul>
    </div>
    <div class="mfc-mainvisual-content">
        <h1>見出し</h1>
        <p>テキスト</p>
        <a class="mfc-link" href="#">リンク</a>
    </div>
</div>