component-hero

echo-hero

メインビジュアルなどに使用される全面背景を持つコンポーネントを表示する。

.echo-hero-contents-inner が必須であることと、内容が多すぎると領域をはみ出すことがある点に注意する。

.echo-hero-lead は短文向けの要素となる。 .echo-hero-body とは文字サイズが異なるだけではなく、文字が太くなり、行高さがやや少なくなる。

.echo-hero-image の画像はトリミングされず、縦横比を保って伸縮する。レスポンシブイメージを併用することが望ましい。

.echo-flip-title.echo-title に付与されている .echo-font-first, .echo-font-third は必須ではない。詳細は utility > font を参照。

文字サイズの変化 group: display
(breakpoint)(fontsize)
.echo-***-header.echo-***-lead.echo-***-body
.echo-***-link
sm以下lgmdsm
md以上xllgmd
xl以上xxlxllg

この表の解説

吾輩は猫である

名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー

詳しくはこちら

.echo-hero-leadのみを本文に使用し、かつ複数のボタンを表示している例

吾輩は猫である

名前はまだ無い
どこで生れたかとんと見当がつかぬ。

ボタン1
ボタン2

.echo-hero-titleのフォントを変更した例

ユーティリティクラス .echo-font-third は、字体を大見出し用に変更する。デフォルトでは游明朝体 (Yu Mincho) となる。

吾輩は猫である

名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー

詳しくはこちら

文字サイズを変更している例

.echo-title-level-3 を使用して、見出しを小さくしている。
また、 .echo-hero-body > p に文字サイズを大きくするクラス .echo-text-xstomd を付与している。モバイル端末での文字サイズが1rem(16px)となる。

吾輩は猫である名前は

まだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-hero">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_10_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_10.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_10.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-lead">
                <p>名前はまだ無い。</p>
            </div><!-- /.echo-hero-lead -->
            <div class="echo-hero-body">
                <p>どこで生れたかとんと見当がつかぬ。<br>
                何でも薄暗いじめじめした所でニャーニャー</p>
            </div><!-- /.echo-hero-body -->
            <div class="echo-hero-link">
                <div class="echo-buttons">
                    <div class="echo-buttons-item">
                        <a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
                    </div><!-- /.echo-buttons-item -->
                </div><!-- /.echo-buttons -->
            </div><!-- /.echo-hero-link -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>

<p class="echo-title echo-title-style-a echo-title-level-3 echo-margin-top-lg echo-margin-bottom-md">.echo-hero-leadのみを本文に使用し、かつ複数のボタンを表示している例</p>

<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-hero">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_10_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_10.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_10.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-lead">
                <p>名前はまだ無い<br>
                どこで生れたかとんと見当がつかぬ。</p>
            </div><!-- /.echo-hero-lead -->
            <div class="echo-hero-link">
                <div class="echo-buttons">
                    <div class="echo-buttons-item">
                        <a href="#" class="echo-button echo-button-style-b">ボタン1</a>
                    </div><!-- /.echo-buttons-item -->
                    <div class="echo-buttons-item">
                        <a href="#" class="echo-button echo-button-style-a">ボタン2</a>
                    </div><!-- /.echo-buttons-item -->
                </div><!-- /.echo-buttons -->
            </div><!-- /.echo-hero-link -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>


<p class="echo-title echo-title-style-a echo-title-level-3 echo-margin-top-lg echo-margin-bottom-md">.echo-hero-titleのフォントを変更した例</p>

<p class="echo-margin-bottom-md">ユーティリティクラス .echo-font-third は、字体を大見出し用に変更する。デフォルトでは游明朝体 (Yu Mincho) となる。</p>

<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-hero">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_10_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_10.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_10.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-level-1 echo-font-third">吾輩は猫である</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-lead">
                <p>名前はまだ無い。</p>
            </div><!-- /.echo-hero-lead -->
            <div class="echo-hero-body">
                <p>どこで生れたかとんと見当がつかぬ。<br>
                何でも薄暗いじめじめした所でニャーニャー</p>
            </div><!-- /.echo-hero-body -->
            <div class="echo-hero-link">
                <div class="echo-buttons">
                    <div class="echo-buttons-item">
                        <a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
                    </div><!-- /.echo-buttons-item -->
                </div><!-- /.echo-buttons -->
            </div><!-- /.echo-hero-link -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>

<p class="echo-title echo-title-style-a echo-title-level-3 echo-margin-top-lg echo-margin-bottom-md">文字サイズを変更している例</p>

<p>.echo-title-level-3 を使用して、見出しを小さくしている。<br>
また、 .echo-hero-body > p に文字サイズを大きくするクラス .echo-text-smtomd を付与している。モバイル端末での文字サイズが1rem(16px)となる。</p>

<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-hero">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_10_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_10.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_10.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-style-c echo-title-level-3 echo-font-first">吾輩は猫である名前は</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-body">
                <p class="smtomd">まだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            </div><!-- /.echo-hero-body -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>

sub class echo-hero-fit

背景画像が縦横比を保ってトリミングされる。
ブレークポイントが xs では 1:1 、sm, md, lg では 16:9 、xl 以上では 2.5:1 となる。
画像のトリミングにはobject-fitを使用しているため、Internet Explorer 11には対応していない。
ライブラリを追加した場合でも、レスポンシブイメージとの併用ができないことに注意（画面サイズに関係なく、img要素のsrc属性に指定した画像が使用される）。

吾輩は猫である

名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

詳しくはこちら 
<div class="echo-hero echo-hero-fit">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_10_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_10.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_10.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-style-b echo-title-level-1 echo-font-first">吾輩は猫である</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-body">
                <p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>
                何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
            </div><!-- /.echo-hero-body -->
            <div class="echo-hero-link">
                <div class="echo-buttons">
                    <div class="echo-buttons-item">
                        <a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
                    </div><!-- /.echo-buttons-item -->
                </div><!-- /.echo-buttons -->
            </div><!-- /.echo-hero-link -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>

sub class echo-hero-(direction)

.echo-hero-contents-inner を指定した方向に寄せる。
ブレークポイントが md 以上の場合は最大幅が66%、 xxl 以上の場合は50%に制限される。

.echo-hero + .echo-hero-left

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

詳しくはこちら

.echo-hero + .echo-hero-right

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

詳しくはこちら 
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm">.echo-hero + .echo-hero-left</p>

<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-hero echo-hero-fit echo-hero-left">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_09_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_09.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_09.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-level-2 echo-font-first">吾輩は猫である</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-lead">
                <p>名前はまだ無い</p>
            </div><!-- /.echo-hero-lead -->
            <div class="echo-hero-body">
                <p>どこで生れたかとんと見当がつかぬ。<br>
                    何でも薄暗いじめじめした所で<br class="echo-hidden-sm-up">ニャーニャー泣いていた事だけは記憶している。</p>
            </div><!-- /.echo-hero-body -->
            <div class="echo-hero-link">
                <a href="#" class="echo-button echo-button-style-a echo-button-icon-arrow">詳しくはこちら</a>
            </div><!-- /.echo-hero-link -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-xl echo-margin-bottom-sm">.echo-hero + .echo-hero-right</p>

<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-hero echo-hero-right">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_06_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_06.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_06.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-level-2 echo-font-first">吾輩は猫である</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-lead">
                <p>名前はまだ無い</p>
            </div><!-- /.echo-hero-lead -->
            <div class="echo-hero-body">
                <p>どこで生れたかとんと見当がつかぬ。<br>
                    何でも薄暗いじめじめした所で<br class="echo-hidden-sm-up">ニャーニャー泣いていた事だけは記憶している。</p>
            </div><!-- /.echo-hero-body -->
            <div class="echo-hero-link">
                <a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
            </div><!-- /.echo-hero-link -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>

sub class echo-hero-inverse

コンテンツの色が反転する。
ボタンの色は .echo-button-inverse を付与しなければ変わらないことに注意する。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

詳しくはこちら 
lt;div class="echo-hero echo-hero-inverse">
    <div class="echo-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_07_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_07.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_07.jpg" alt="">
        </picture>
    </div><!-- /.echo-hero-image -->
    <div class="echo-hero-contents">
        <div class="echo-hero-contents-inner">
            <div class="echo-hero-header">
                <h2 class="echo-hero-title echo-title echo-title-level-2 echo-font-first">吾輩は猫である</h2>
            </div><!-- /.echo-hero-header -->
            <div class="echo-hero-lead">
                <p>名前はまだ無い</p>
            </div><!-- /.echo-hero-lead -->
            <div class="echo-hero-body">
                <p>どこで生れたかとんと見当がつかぬ。<br>
                    何でも薄暗いじめじめした所で<br class="echo-hidden-sm-up">ニャーニャー泣いていた事だけは記憶している。</p>
            </div><!-- /.echo-hero-body -->
            <div class="echo-hero-link">
                <div class="echo-buttons">
                    <div class="echo-buttons-item">
                        <a href="#" class="echo-button echo-button-inverse echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
                    </div><!-- /.echo-buttons-item -->
                </div><!-- /.echo-buttons -->
            </div><!-- /.echo-hero-link -->
        </div><!-- /.echo-hero-contents-inner -->
    </div><!-- /.echo-hero-contents -->
</div><!-- /.echo-hero -->

</div>