component-hero

hero

メインビジュアルなどに使用される全面背景を持つコンポーネントを表示する。
必ず.hero-(type)クラスを付与する必要がある。

hero-img

背景として表示する場合と、レスポンシブイメージで表示する場合ではマークアップが異なる。

メインビジュアル

吾輩は猫である。名前はまだ無い。

メインビジュアル

吾輩は猫である。名前はまだ無い。

<div class="hero hero-img m-b">
    <div class="hero-cover" style="background-image:url(http://placehold.jp/64/d2e2a2/ffffff/1280x480.png?text=background"></div>
    <div class="hero-contents">
        <h2 class="hero-title">メインビジュアル</h2>
        <p class="hero-text">吾輩は猫である。名前はまだ無い。</p>
    </div>
</div>

<div class="hero hero-img">
    <picture>
    <source media="(max-width:640px)" srcset="background-image:url(http://placehold.jp/18/d2e2a2/ffffff/640x480.png?text=responsive_image 640w" sizes="100vw">
    <source srcset="http://placehold.jp/64/d2e2a2/ffffff/1280x480.png?text=responsive_image 1280w" sizes="(max-width:1280px) 100vw, 1280px">
    <img class="hero-object" alt="" src="http://placehold.jp/64/d2e2a2/ffffff/1600x480.png?text=responsive_image">
    </picture>
    <div class="hero-contents">
        <h2 class="hero-title">メインビジュアル</h2>
        <p class="hero-text">吾輩は猫である。名前はまだ無い。</p>
    </div>
</div>

hero-movie

動画を背景として表示する。「jquery.mb.YTPlayer」必須。常に縦横比が維持される。
https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

メインビジュアル

吾輩は猫である。名前はまだ無い。

YouTubeで見る 
<div id="js-bgndVideo-001" class="player" data-property="{videoURL:'http://youtu.be/rFg5ve9z1NM', mobileFallbackImage:'/themes/zeroichi_lp/images/_dummy/test.gif', containment:'#hero-rFg5ve9z1NM', autoPlay:true, mute:true, loop:true, startAt:0, opacity:1, showControls:false, showYTLogo:true, addRaster:true }"></div>
<div class="hero hero-inverse hero-movie">
    <div class="hero-contents">
        <h2 class="hero-title">メインビジュアル</h2>
        <p class="hero-text">吾輩は猫である。名前はまだ無い。</p>
    </div>
    <div class="hero-link">
        <a href="https://www.youtube.com/watch?v=rFg5ve9z1NM"><i class="fa fa-youtube-square"></i><span class="sr">YouTubeで見る</span></a>
    </div>
</div>
<script>
// jQuery(function(){
//     jQuery('#js-bgndVideo-001').YTPlayer();
// });
</script>

hero-inverse

暗色向けに文字色を反転する。

メインビジュアル

吾輩は猫である。名前はまだ無い。

<div class="hero hero-img hero-inverse">
    <div class="hero-cover" style="background-image:url(http://placehold.jp/96/005522/338855/1600x480.png?text=dummy_image"></div>
    <div class="hero-contents">
        <h2 class="hero-title">メインビジュアル</h2>
        <p class="hero-text">吾輩は猫である。名前はまだ無い。</p>
    </div>
</div>