component-card

c-card

新着情報のエントリー繰り返し部分などに使用する、カード状のコンポーネントを表示する。
.m-title, .m-thumbnail を含む前提となっている。
リンクを含む場合は .c-card-title.m-title に下線が引かれる。リンクが不要な場合であっても .c-card-inner が必須であることに注意する。
カード背景には、body要素の基本背景色 $body-bg が指定されている。

これはカードです

これはカードの本文です。最大幅は480ピクセルとなり、画面中央に配置されます。カードにはヘッダを付けることができます。

よくあるカラムレイアウトの例です

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

カード全体をリンク範囲にする場合

このカードは、全体がリンク範囲になっています。c-card-innner をa要素に書き換えてください。

グリッドレイアウト

l-grid-row, l-grid-col を使用して4カラムに並べました。グリッド内に配置した場合は最大幅が解除され、常にカラムの幅いっぱいに広がります。

コンテンツが長すぎる_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

背景に色がついているカードの例です

カードの背景に u-bg-first クラスを指定して色を付けています
リンクは指定していません

カードの背景に u-bg-gray クラスを指定して色を付けています
カード全体ではなく、カードの画像とボタンだけがリンク範囲となっています

ボタン

<div class="c-card">
    <div class="c-card-inner">
        <div class="c-card-header">
            <h3 class="c-card-title m-title m-title-level-3 m-title-style-b">これはカードです</h3>
        </div><!-- /.c-card-header -->
        <div class="c-card-object">
            <figure class="m-thumbnail m-thumbnail-ogimage">
                <picture>
                <source
                    media="(max-width:640px)"
                    srcset="../images/_dummy/image_01_s.jpg 640w"
                    sizes="100vw">
                <source
                    srcset="../images/_dummy/image_01.jpg 1280w"
                    sizes="(max-width:1280px) 100vw, 1280px">
                <img src="../images/_dummy/image_01.jpg" alt="">
                </picture>
            </figure><!-- /.m-thumbnail -->
        </div><!-- /.c-card-object -->
        <div class="c-card-contents">
            <p class="c-card-body">これはカードの本文です。最大幅は480ピクセルとなり、画面中央に配置されます。カードにはヘッダを付けることができます。</p>
        </div><!-- /.c-card-contents -->
    </div><!-- /.c-card-inner -->
</div><!-- /.c-card -->

<div class="l-grid-row">
    <div class="l-grid-col-6 l-grid-col-md-3" style="padding-bottom: 1rem;">
        <div class="c-card">
            <a href="#" class="c-card-inner">
                <div class="c-card-object">
                    <figure class="m-thumbnail m-thumbnail-16to9">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_02_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_02.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img src="../images/_dummy/image_02.jpg" alt="">
                        </picture>
                    </figure><!-- /.m-thumbnail -->
                </div><!-- /.c-card-object -->
                <div class="c-card-contents">
                    <time class="c-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="c-card-title m-title m-title-level-4 m-title-style-a">よくあるカラムレイアウトの例です</h3>
                    <p class="c-card-body">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
                </div><!-- /.c-card-contents -->
            </a><!-- /.c-card-innner -->
        </div><!-- /.c-card -->
    </div><!-- /.l-grid-col -->
    <div class="l-grid-col-6 l-grid-col-md-3" style="padding-bottom: 1rem;">
        <div class="c-card">
            <a href="#" class="c-card-inner">
                <div class="c-card-object">
                    <figure class="m-thumbnail m-thumbnail-16to9">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_02_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_02.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img src="../images/_dummy/image_02.jpg" alt="">
                        </picture>
                    </figure><!-- /.m-thumbnail -->
                </div><!-- /.c-card-object -->
                <div class="c-card-contents">
                    <time class="c-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="c-card-title m-title m-title-level-4 m-title-style-a">カード全体をリンク範囲にする場合</h3>
                    <p class="c-card-body">このカードは、全体がリンク範囲になっています。c-card-innner をa要素に書き換えてください。</p>
                </div><!-- /.c-card-contents -->
            </a><!-- /.c-card-innner -->
        </div><!-- /.c-card -->
    </div><!-- /.l-grid-col -->
    <div class="l-grid-col-6 l-grid-col-md-3" style="padding-bottom: 1rem;">
        <div class="c-card">
            <a href="#" class="c-card-inner">
                <div class="c-card-object">
                    <figure class="m-thumbnail m-thumbnail-16to9">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_02_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_02.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img src="../images/_dummy/image_02.jpg" alt="">
                        </picture>
                    </figure><!-- /.m-thumbnail -->
                </div><!-- /.c-card-object -->
                <div class="c-card-contents">
                    <time class="c-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="c-card-title m-title m-title-level-4 m-title-style-a">グリッドレイアウト</h3>
                    <p class="c-card-body">l-grid-row, l-grid-col を使用して4カラムに並べました。グリッド内に配置した場合は最大幅が解除され、常にカラムの幅いっぱいに広がります。</p>
                </div><!-- /.c-card-contents -->
            </a><!-- /.c-card-innner -->
        </div><!-- /.c-card -->
    </div><!-- /.l-grid-col -->
    <div class="l-grid-col-6 l-grid-col-md-3" style="padding-bottom: 1rem;">
        <div class="c-card">
            <a href="#" class="c-card-inner">
                <div class="c-card-object">
                    <figure class="m-thumbnail m-thumbnail-16to9">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_02_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_02.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img src="../images/_dummy/image_02.jpg" alt="">
                        </picture>
                    </figure><!-- /.m-thumbnail -->
                </div><!-- /.c-card-object -->
                <div class="c-card-contents">
                    <time class="c-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="c-card-title m-title m-title-level-4 m-title-style-a">コンテンツが長すぎる_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</h3>
                    <p class="c-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
                </div><!-- /.c-card-contents -->
            </a><!-- /.c-card-innner -->
        </div><!-- /.c-card -->
    </div><!-- /.l-grid-col -->
</div><!-- .l-grid-row -->

<div class="l-grid-row">
    <div class="l-grid-col">
        <div class="c-card u-bg-first">
            <div class="c-card-inner">
                <div class="c-card-object">
                    <figure class="m-thumbnail m-thumbnail-ogimage">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_03_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_03.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img src="../images/_dummy/image_03.jpg" alt="">
                        </picture>
                    </figure><!-- /.m-thumbnail -->
                </div><!-- /.c-card-object -->
                <div class="c-card-contents">
                    <h3 class="c-card-title m-title m-title-level-4 m-title-style-a">背景に色がついているカードの例です</h3>  
                    <p class="c-card-body">カードの背景に u-bg-first クラスを指定して色を付けています<br>
                    リンクは指定していません</p>
                </div><!-- /.c-card-contents -->
            </div><!-- /.c-card-innner -->
        </div><!-- /.c-card -->
    </div><!-- /.l-grid-col -->
    <div class="l-grid-col">
        <div class="c-card u-bg-gray">
            <div class="c-card-inner">
                <a href="#" class="c-card-object">
                    <figure class="m-thumbnail m-thumbnail-ogimage">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_03_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_03.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img src="../images/_dummy/image_03.jpg" alt="">
                        </picture>
                    </figure><!-- /.m-thumbnail -->
                </a><!-- /.c-card-object -->
                <div class="c-card-contents">
                    <p class="c-card-body">カードの背景に u-bg-gray クラスを指定して色を付けています<br>
                    カード全体ではなく、カードの画像とボタンだけがリンク範囲となっています</p>
                    <p class="c-card-body"><a href="#" class="m-btn m-btn-inverse m-btn-bordered m-btn-block">ボタン</a></p>
                </div><!-- /.c-card-contents -->
            </div><!-- /.c-card-innner -->
        </div><!-- /.c-card -->
    </div><!-- /.l-grid-col -->
</div><!-- .l-grid-row -->