component-card

c-card

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

これはカードです

これはカードの本文です。最大幅は480ピクセルとなり、画面中央に配置されます。

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

ボタン

カード全体ではなく、カードの画像とボタンだけがリンク範囲となっています

ボタン 
<div style="margin-bottom: 2rem; padding: 1rem; background-color: #aaddff;">
<div class="c-card">
    <div class="c-card-inner">
        <div class="c-card-header">
            <h3 class="c-card-title">これはカードです</h3>
        </div>
        <div 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 alt="" src="../images/_dummy/image_01.jpg">
            </picture>
        </div>
        <div class="c-card-contents">
            <p class="c-card-body">これはカードの本文です。最大幅は480ピクセルとなり、画面中央に配置されます。</p>
        </div>
    </div>
</div>
</div>

<div style="margin-bottom: 2rem;">
<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="m-thumbnail m-thumbnail-ogimage">
                    <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 alt="" src="../images/_dummy/image_02.jpg">
                    </picture>
                </div>
                <div class="c-card-contents">
                    <p>よくあるカラムレイアウトの例です</p>
                </div>
            </a>
        </div>
    </div>
    <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="m-thumbnail m-thumbnail-ogimage">
                    <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 alt="" src="../images/_dummy/image_02.jpg">
                    </picture>
                </div>
                <div class="c-card-contents">
                    <p>カード全体がリンク範囲となっています</p>
                </div>
            </a>
        </div>
    </div>
    <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="m-thumbnail m-thumbnail-ogimage">
                    <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 alt="" src="../images/_dummy/image_02.jpg">
                    </picture>
                </div>
                <div class="c-card-contents">
                    <p>l-grid-row, l-grid-col を使用して4カラムに並べました</p>
                </div>
            </a>
        </div>
    </div>
    <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="m-thumbnail m-thumbnail-ogimage">
                    <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 alt="" src="../images/_dummy/image_02.jpg">
                    </picture>
                </div>
                <div class="c-card-contents">
                    <p>グリッド内に配置した場合は最大幅が解除されます</p>
                </div>
            </a>
        </div>
    </div>
</div>
</div>

<div class="l-grid-row">
    <div class="l-grid-col">
        <div class="c-card u-bg-first">
            <div class="c-card-inner">
                <a href="#" 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 alt="" src="../images/_dummy/image_03.jpg">
                    </picture>
                </a>
                <div class="c-card-contents">
                    <p>カードの背景に u-bg-first クラスを指定して色を付けています</p>
                    <a href="#" class="m-btn m-btn-inverse m-btn-bordered m-btn-block">ボタン</a>
                </div>
            </div>
        </div>
    </div>
    <div class="l-grid-col">
        <div class="c-card u-bg-first">
            <div class="c-card-inner">
                <a href="#" 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 alt="" src="../images/_dummy/image_03.jpg">
                    </picture>
                </a>
                <div class="c-card-contents">
                    <p>カード全体ではなく、カードの画像とボタンだけがリンク範囲となっています</p>
                    <a href="#" class="m-btn m-btn-inverse m-btn-bordered m-btn-block">ボタン</a>
                </div>
            </div>
        </div>
    </div>
</div>