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 を参照。
(breakpoint) | (fontsize) | ||
---|---|---|---|
.echo-***-header | .echo-***-lead | .echo-***-body .echo-***-link | |
sm以下 | lg | md | sm |
md以上 | xl | lg | md |
xl以上 | xxl | xl | lg |

吾輩は猫である
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー
.echo-hero-leadのみを本文に使用し、かつ複数のボタンを表示している例

吾輩は猫である
名前はまだ無い
どこで生れたかとんと見当がつかぬ。
.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>