component-flip

c-flip

全面背景とボックスを持つ、フリップボードのようなコンポーネントを表示する。
.c-flip-contents-inner が必須であることに注意する。
.c-flip-cover の背景画像はインラインスタイル、もしくは追加CSSで定義する。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ

<div class="c-flip">
    <div class="c-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
    <div class="c-flip-container">
        <div class="c-flip-contents">
            <div class="c-flip-contents-inner">
                <h2 class="c-flip-title">吾輩は猫である</h2>
                <p class="c-flip-caption">名前はまだ無い</p>
                <p class="c-flip-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
            </div><!-- /.c-flip-contents-inner -->
        </div><!-- /.c-flip-contents -->
    </div><!-- /.c-flip-container -->
</div><!-- /.c-flip -->

c-flip-reverse

(breakpoint)が lg 以上でのコンテンツの位置が逆となる。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ

<div class="c-flip c-flip-reverse">
    <div class="c-flip-cover" style="background-image: url(../images/_dummy/image_03.jpg)"></div>
    <div class="c-flip-container">
        <div class="c-flip-contents">
            <div class="c-flip-contents-inner">
                <h2 class="c-flip-title">吾輩は猫である</h2>
                <p class="c-flip-caption">名前はまだ無い</p>
                <p class="c-flip-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
            </div><!-- /.c-flip-contents-inner -->
        </div><!-- /.c-flip-contents -->
    </div><!-- /.c-flip-container -->
</div><!-- /.c-flip -->

c-flip-half

(breakpoint)が lg 以上で、画像とコンテンツが二分割となる。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ

<div class="c-flip c-flip-half">
    <div class="c-flip-cover" style="background-image: url(../images/_dummy/image_02.jpg)"></div>
    <div class="c-flip-container">
        <div class="c-flip-contents">
            <div class="c-flip-contents-inner">
                <h2 class="c-flip-title">吾輩は猫である</h2>
                <p class="c-flip-caption">名前はまだ無い</p>
                <p class="c-flip-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
            </div><!-- /.c-flip-contents-inner -->
        </div><!-- /.c-flip-contents -->
    </div><!-- /.c-flip-container -->
</div><!-- /.c-flip -->

c-flip-inverse

コンテンツの色が反転する。
テキストリンク、ボタン等の色は反転前とは変わらないことに注意。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ

<div class="c-flip c-flip-inverse">
    <div class="c-flip-cover" style="background-image: url(../images/_dummy/image_04.jpg)"></div>
    <div class="c-flip-container">
        <div class="c-flip-contents">
            <div class="c-flip-contents-inner">
                <h2 class="c-flip-title">吾輩は猫である</h2>
                <p class="c-flip-caption">名前はまだ無い</p>
                <p class="c-flip-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
            </div><!-- /.c-flip-contents-inner -->
        </div><!-- /.c-flip-contents -->
    </div><!-- /.c-flip-container -->
</div><!-- /.c-flip -->