c-hero
メインビジュアルなどに使用される全面背景を持つコンポーネントを表示する。
.c-hero-contents-inner
が必須であることに注意する。
.c-hero-cover
の背景画像はインラインスタイル、もしくは追加CSSで定義する。
高さは 100vh
としているため、適当調整すること。
吾輩は猫である
名前はまだ無い
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
<div class="c-hero"> <div class="c-hero-cover" style="background-image: url(../images/_dummy/image_06.jpg);"></div> <div class="c-hero-contents"> <div class="c-hero-contents-inner"> <h2 class="c-hero-title">吾輩は猫である</h2> <p class="c-hero-caption">名前はまだ無い</p> <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p> </div><!-- /.c-hero-contents-inner --> </div><!-- /.c-hero-contents --> </div><!-- /.c-hero -->
c-hero-(direction)
コンテンツブロックを指定した方向に寄せる。
.c-hero + .c-hero-left
吾輩は猫である
名前はまだ無い
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
.c-hero + .c-hero-right
吾輩は猫である
名前はまだ無い
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
<h3>.c-hero + .c-hero-left</h3> <div class="c-hero c-hero-left" style="margin-bottom: 2rem;"> <div class="c-hero-cover" style="background-image: url(../images/_dummy/image_09.jpg);"></div> <div class="c-hero-contents"> <div class="c-hero-contents-inner"> <h2 class="c-hero-title">吾輩は猫である</h2> <p class="c-hero-caption">名前はまだ無い</p> <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p> </div><!-- /.c-hero-contents-inner --> </div><!-- /.c-hero-contents --> </div><!-- /.c-hero --> <h3>.c-hero + .c-hero-right</h3> <div class="c-hero c-hero-right" style="margin-bottom: 2rem;"> <div class="c-hero-cover" style="background-image: url(../images/_dummy/image_08.jpg);"></div> <div class="c-hero-contents"> <div class="c-hero-contents-inner"> <h2 class="c-hero-title">吾輩は猫である</h2> <p class="c-hero-caption">名前はまだ無い</p> <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p> </div><!-- /.c-hero-contents-inner --> </div><!-- /.c-hero-contents --> </div><!-- /.c-hero -->
c-hero-inverse
コンテンツの色が反転する。
テキストリンク、ボタン等の色は反転前とは変わらないことに注意。
吾輩は猫である
名前はまだ無い
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ
<div class="c-hero c-hero-inverse"> <div class="c-hero-cover" style="background-image: url(../images/_dummy/image_07.jpg);"></div> <div class="c-hero-contents"> <div class="c-hero-contents-inner"> <h2 class="c-hero-title">吾輩は猫である</h2> <p class="c-hero-caption">名前はまだ無い</p> <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ</p> </div><!-- /.c-hero-contents-inner --> </div><!-- /.c-hero-contents --> </div><!-- /.c-hero -->