component-card

card

新着情報のエントリー繰り返し部分などに使用する、カード状のコンポーネントを表示する。
必ずcard-(type)クラスを付与する。

card-linked

リンクがある場合に付与するクラス。ボタンを絶対配置する。

card-01

サムネイルの上が.card-header、下が.card-contentsとなる。

New

カテゴリーカードのタイトルですカードのタイトルですカードのタイトルです

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

ボタン

カードのタイトルですカードのタイトルですカードのタイトルです

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

<div style="max-width: 640px;">

<div class="card card-01 card-linked">
    <a href="#" class="card-inner">
        <div class="card-new"><span class="label label-important">New</span></div>
        <div class="card-thumb">
            <picture>
            <source
                media="(max-width:640px)"
                srcset="http://placehold.jp/12/9ed8db/ffffff/200x150.png?text=small_image 640w"
                sizes="100vw">
            <source
                srcset="http://placehold.jp/36/ffcc66/ffffff/640x480.png?text=large_image 1280w"
                sizes="(max-width:1280px) 100vw, 1280px">
            <img class="card-object" alt="" src="http://placehold.jp/24/9ed8db/ffffff/640x360.png?text=renponsive_image">
            </picture>
        </div>
        <div class="card-contents">
            <h3 class="title title-06 m-b-sm"><span class="label">カテゴリー</span>カードのタイトルですカードのタイトルですカードのタイトルです</h3>
            <time>2017-12-28</time>
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
            <p class="card-link">
                <span href="#" class="btn btn-block btn-first btn-flat">ボタン</span>
            </p>
        </div>
    </a>
</div>

<div class="card card-01">
    <div class="card-header">
        <h3 class="title title-06">カードのタイトルですカードのタイトルですカードのタイトルです</h3>
    </div>

    <div class="card-thumb" style="padding-bottom: 50%;"><img src="http://placehold.jp/24/9ed8db/ffffff/400x200.png?text=dummy_image" class="card-object" /></div>

    <div class="card-contents">
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
    </div>
</div>

</div>

card-02

.card-headerは常に表示、.card-contentsはホバーするか、.is-activeクラスを付与すると表示される。モバイル端末ではJavaScript等を併用しなければ.card-contentsの内容が読めない。

<div style="width: 300px;">

<div class="card card-02">
    <a href="#" class="card-inner">
        <div class="card-new"><span class="label label-important">New</span></div>
        <div class="card-thumb"><img src="http://placehold.jp/24/9ed8db/ffffff/400x300.png?text=dummy_image" class="card-object" /></div>

        <div class="card-header">
            <h3 class="title title-06">カードのタイトルですカードのタイトルですカードのタイトルです</h3>
            <time>2017-12-28</time>
        </div>

        <div class="card-contents">
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
        </div>
    </a>
</div>

</div>

<div style="width: 300px;">

<div class="card card-02">
    <a href="#" class="card-inner">
        <div class="card-thumb"><img src="http://placehold.jp/24/9ed8db/ffffff/400x300.png?text=dummy_image" class="card-object" /></div>
        <div class="card-contents">
            <h3 class="title title-03 text-inverse m-b">タイトル</h3>
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
            <time>2017-12-28</time>
        </div><!-- /.card-contents -->
    </a>
</div>

</div>