layout-cards

echo-cards

.echo-card をグリッド状に繰り返すための領域を作成する。.echo-card.echo-card-sm の使用が望ましい。

(breakpoint)が sm 以上で2列、 md 以上で3列、 xl 以上で4列となる。
また、 (breakpoint)が sm 以上で最大幅の制限が解除される(グリッドのセルの100%となる)。

.echo-container で幅を制限することが望ましいが必須ではない。

Internet Explorer 11で段組にならない不具合について

<div class="echo-cards">
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">よくあるカラムレイアウトの例です</h3>
                    <p class="echo-card-body">このカードにはフッタがあります。フッタ内のボタンは、カードがどのような高さであっても、カードの下端に配置されます。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">カード全体をリンク範囲にする場合</h3>
                    <p class="echo-card-body">.echo-card-innner をa要素でマークアップすると、カード全体がリンク範囲になります。カードのどこかにカーソルを置くと、内包しているサムネイルとボタンの外観も変わります。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">グリッドレイアウト</h3>
                    <p class="echo-card-body">echo-cards, echo-cards-item を使用して並べました。画面幅によってカラム数が変化します。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">行数が多い_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</h3>
                    <p class="echo-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">吾輩は猫である。名前はまだ無い</h3>
                    <p class="echo-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">吾輩は猫である。名前はまだ無い</h3>
                    <p class="echo-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">吾輩は猫である。名前はまだ無い</h3>
                    <p class="echo-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">吾輩は猫である。名前はまだ無い</h3>
                    <p class="echo-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">吾輩は猫である。名前はまだ無い</h3>
                    <p class="echo-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
    <div class="echo-cards-item">
        <div class="echo-card echo-card-sm">
            <a href="#" class="echo-card-inner">
                <div class="echo-card-object">
                    <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
                </div><!-- /.echo-card-object -->
                <div class="echo-card-contents">
                    <time class="echo-card-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">吾輩は猫である。名前はまだ無い</h3>
                    <p class="echo-card-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                </div><!-- /.echo-card-contents -->
                <div class="echo-card-footer">
                    <span class="echo-button echo-button-sm echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
                </div><!-- /.echo-card-footer -->
            </a><!-- /.echo-card-innner -->
        </div><!-- /.echo-card -->
    </div><!-- /.echo-cards-item -->
</div><!-- .echo-cards -->