echo-flip
全面背景とボックスを持つ、フリップボードのようなコンポーネントを表示する。
.echo-flip-cover
の背景画像はインラインスタイル、もしくは追加CSSで定義する。
.echo-flip-contents-inner
が必須であることに注意する。
画面サイズによって .echo-flip-contents-inner
の左右余白が大きく変化する。
.echo-flip-lead
は短文向けの要素となる。 .echo-flip-body
とは文字サイズが異なるだけではなく、文字が太くなり、行高さがやや少なくなる。
.echo-flip-title.echo-title
に付与されている .echo-font-first
は必須ではない。詳細は 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-flip-leadのみを本文に使用し、かつ複数のボタンを表示している例
吾輩は猫である
名前はまだ無い
どこで生れたかとんと見当がつかぬ。
.echo-flip-titleのフォントを変更した例
ユーティリティクラス .echo-font-third は、字体を大見出し用に変更する。デフォルトでは游明朝体 (Yu Mincho) となる。
文字サイズを変更している例
.echo-title-level-3 を使用して、見出しを小さくしている。
また、 .echo-flip-body > p に文字サイズを大きくするクラス .echo-text-smtomd を付与している。モバイル端末での文字サイズが1rem(16px)となる。
吾輩は猫である名前は
まだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-lead">
<p>名前はまだ無い。</p>
</div><!-- /.echo-flip-lead -->
<div class="echo-flip-body">
<p>どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
<div class="echo-flip-link">
<a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
</div><!-- /.echo-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>
<p class="echo-title echo-title-style-a echo-title-level-3 echo-margin-top-lg echo-margin-bottom-md">.echo-flip-leadのみを本文に使用し、かつ複数のボタンを表示している例</p>
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-lead">
<p>名前はまだ無い<br>
どこで生れたかとんと見当がつかぬ。</p>
</div><!-- /.echo-flip-lead -->
<div class="echo-flip-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-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>
<p class="echo-title echo-title-style-a echo-title-level-3 echo-margin-top-lg echo-margin-bottom-md">.echo-flip-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-flip">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-third">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-lead">
<p>名前はまだ無い。</p>
</div><!-- /.echo-flip-lead -->
<div class="echo-flip-body">
<p>どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
<div class="echo-flip-link">
<a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
</div><!-- /.echo-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</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-flip-body > p に文字サイズを大きくするクラス .echo-text-smtomd を付与している。モバイル端末での文字サイズが1rem(16px)となる。</p>
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-style-c echo-title-level-3 echo-font-first">吾輩は猫である名前は</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-body">
<p class="echo-text-smtomd">まだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>
sub class echo-flip-reverse
(breakpoint)が lg
以上でのコンテンツの位置が逆となる。
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip echo-flip-reverse">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-body">
<p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
<div class="echo-flip-link">
<a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
</div><!-- /.echo-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>
sub class echo-flip-half
(breakpoint)が lg
以上で、画像とコンテンツが二分割となる。
.echo-flip-reverse を併用している例
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip echo-flip-half">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-body">
<p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
<div class="echo-flip-link">
<a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
</div><!-- /.echo-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>
<p class="echo-title echo-title-style-a echo-title-level-3 echo-margin-top-lg echo-margin-bottom-md">.echo-flip-reverse を併用している例</p>
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip echo-flip-half echo-flip-reverse">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-body">
<p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
<div class="echo-flip-link">
<a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
</div><!-- /.echo-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>
sub class echo-flip-inverse
コンテンツの色が反転する。
ボタンの色は .echo-button-inverse
を付与しなければ変わらないことに注意。
.echo-flip-half.echo-flip-reverse を併用している例
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip echo-flip-inverse">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-body">
<p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
<div class="echo-flip-link">
<a href="#" class="echo-button echo-button-inverse echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
</div><!-- /.echo-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>
<p class="echo-title echo-title-style-a echo-title-level-3 echo-margin-top-lg echo-margin-bottom-md">.echo-flip-half.echo-flip-reverse を併用している例</p>
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">
<div class="echo-flip echo-flip-inverse echo-flip-half echo-flip-reverse">
<div class="echo-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
<div class="echo-flip-container">
<div class="echo-flip-contents">
<div class="echo-flip-contents-inner">
<div class="echo-flip-header">
<h2 class="echo-flip-title echo-title echo-title-level-1 echo-font-first">吾輩は猫である</h2>
</div><!-- /.echo-flip-header -->
<div class="echo-flip-body">
<p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所で<br class="echo-hidden-lg-up">ニャーニャー泣いていた事だけは記憶している。</p>
</div><!-- /.echo-flip-body -->
<div class="echo-flip-link">
<a href="#" class="echo-button echo-button-inverse echo-button-style-b echo-button-icon-arrow">詳しくはこちら</a>
</div><!-- /.echo-flip-link -->
</div><!-- /.echo-flip-contents-inner -->
</div><!-- /.echo-flip-contents -->
</div><!-- /.echo-flip-container -->
</div><!-- /.echo-flip -->
</div>