c-flip
全面背景とボックスを持つ、フリップボードのようなコンポーネントを表示する。
.c-flip-contents-inner が必須であることに注意する。
.c-flip-cover の背景画像はインラインスタイル、もしくは追加CSSで定義する。
.c-flip-title > .m-title のフォントサイズはこのコンポーネント独自の変化をする。
なお、.c-flip-title > .m-title に付与されている .u-font-first は必須ではない。詳細は utility > font を参照。
.c-flip-link > .m-btn のfont-size、paddingはこのコンポーネント独自の変化をする。
吾輩は猫である
名前はまだ無い
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
<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 m-title u-font-first">吾輩は猫である</h2>
<p class="c-flip-caption">名前はまだ無い</p>
<div class="c-flip-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
</div><!-- /.c-flip-body -->
<p class="c-flip-link">
<a href="#" class="m-btn m-btn-gray m-btn-bordered m-btn-block">詳しくはこちら</a>
</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 m-title u-font-first">吾輩は猫である</h2>
<p class="c-flip-caption">名前はまだ無い</p>
<div class="c-flip-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
</div><!-- /.c-flip-body -->
<p class="c-flip-link">
<a href="#" class="m-btn m-btn-gray m-btn-bordered m-btn-block">詳しくはこちら</a>
</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_03.jpg)"></div>
<div class="c-flip-container">
<div class="c-flip-contents">
<div class="c-flip-contents-inner">
<h2 class="c-flip-title m-title u-font-first">吾輩は猫である</h2>
<p class="c-flip-caption">名前はまだ無い</p>
<div class="c-flip-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
</div><!-- /.c-flip-body -->
<p class="c-flip-link">
<a href="#" class="m-btn m-btn-gray m-btn-bordered m-btn-block">詳しくはこちら</a>
</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_03.jpg)"></div>
<div class="c-flip-container">
<div class="c-flip-contents">
<div class="c-flip-contents-inner">
<h2 class="c-flip-title m-title u-font-first">吾輩は猫である</h2>
<p class="c-flip-caption">名前はまだ無い</p>
<div class="c-flip-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p>
</div><!-- /.c-flip-body -->
<p class="c-flip-link">
<a href="#" class="m-btn m-btn-inverse m-btn-bordered m-btn-block">詳しくはこちら</a>
</p>
</div><!-- /.c-flip-contents-inner -->
</div><!-- /.c-flip-contents -->
</div><!-- /.c-flip-container -->
</div><!-- /.c-flip -->