component-hero

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