component-flip

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 を参照。

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

この表の解説

吾輩は猫である

名前はまだ無い。

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

.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>