component-card

echo-card

投稿の繰り返し部分などに使用する、カード状のコンポーネントを表示する。
.echo-title, .echo-thumbnail, .echo-button を含めることができる。

リンクを含む場合は .echo-card-title に下線が引かれる。リンクが不要な場合であっても .echo-card-inner が必須であることに注意する。
カードの背景色は、body要素の基本背景色 $body-bg となる。

スタイルの変化 group: article
(breakpoint) (fontsize) 最大幅 (fontsize) 最大幅 (fontsize) 最大幅
.echo-card-sm .echo-card .echo-card-lg
md以下 xs 26rem
(416px)		 sm 37.5rem
(600px)		 md 48rem
(768px)
lg以上 sm md lg

この表の解説

補足: カードのフッタ

カードのフッタ .echo-card-inner > .echo-card-footer は任意の要素である。
.echo-card-inner の最後の子要素として配置すると、カードがどのような高さであっても内包するコンテンツがカードの下端に接する。
また、 .echo-card-footer > .echo-button は中央寄せとなる。水平に複数のボタンを表示したい場合は .echo-buttons を使用すること。

Note: Card footer

Card footer = .echo-card-inner> .echo-card-footer is an arbitrary element.
When placed as the last child element of .echo-card-inner, the contained content touches the bottom edge of the card, regardless of the height of the card.
Also, .echo-card-footer > .echo-button is centered. Use .echo-buttons if you want to display multiple buttons horizontally.

これはカードです

2021.05.01

これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。

これはカードです

.echo-card-body のコンテンツの一部に .echo-text-xxl を付与しています。
ここが150%になります。画面サイズを変えて、ひとつ前のカードと比較してください。

.echo-card 直下の各要素は必須ではありません。
ここでは .echo-card-contents のみとしています。

カードの背景に .echo-bg-default クラスを指定して色を付けています。

全体がリンクになっているカード

このオブジェクトは、カード全体がリンク範囲となっています。

フッタにボタンがあるカード

カードのフッタにボタンが1個あります。
カード全体がリンク範囲となっています。

ボタン

フッタにボタンがあるカード

カードのフッタにボタンが1個あります。
カード全体ではなく、カードの画像とボタンだけがリンク範囲となっています。

ボタン

複数のボタンがあるカード

カードのフッタにボタンが2個あります。ボタンだけがリンク範囲となっています。
小さなコンポーネントでは、ボタンの文字サイズが変化しないことが望まれる場合があります。ここでは .echo-button-fixed クラスを付与しています。

ボタン
ボタン 
<div class="echo-card">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">これはカードです</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-meta">2021.05.01</p>
            <p class="echo-card-body">これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。</p>
        </div><!-- /.echo-card-contents -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">これはカードです</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-body">.echo-card-body のコンテンツの一部に .echo-text-xxl を付与しています。<br>
            <span class="echo-text-xxl">ここが150%になります。</span>画面サイズを変えて、ひとつ前のカードと比較してください。</p>
        </div><!-- /.echo-card-contents -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card">
    <div class="echo-card-inner">
        <div class="echo-card-contents">
            <p class="echo-card-body">.echo-card 直下の各要素は必須ではありません。<br>ここでは .echo-card-contents のみとしています。</p>
        </div><!-- /.echo-card-contents -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card echo-bg-default">
    <div class="echo-card-inner">
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-body">カードの背景に .echo-bg-default クラスを指定して色を付けています。</p>
        </div><!-- /.echo-card-contents -->
    </div><!-- /.echo-card-innner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card">
    <a href="#" class="echo-card-inner">
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.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 -->
    </a><!-- /.echo-card-innner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card">
    <a href="#" class="echo-card-inner">
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">フッタにボタンがあるカード</h3>  
            <p class="echo-card-body">カードのフッタにボタンが1個あります。<br>
            カード全体がリンク範囲となっています。</p>
        </div><!-- /.echo-card-contents -->
        <div class="echo-card-footer">
            <span class="echo-button echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span>
        </div><!-- /.echo-card-footer -->
    </a><!-- /.echo-card-innner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card">
    <div class="echo-card-inner">
        <figure class="echo-card-object">
            <a href="#" class="echo-thumbnail echo-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>
            </a><!-- /.echo-thumbnail -->
        </figure><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">フッタにボタンがあるカード</h3>  
            <p class="echo-card-body">カードのフッタにボタンが1個あります。<br>
            カード全体ではなく、カードの画像とボタンだけがリンク範囲となっています。</p>
        </div><!-- /.echo-card-contents -->
        <div class="echo-card-footer">
            <a href="#" class="echo-button echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</a>
        </div><!-- /.echo-card-footer -->
    </div><!-- /.echo-card-innner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card">
    <div class="echo-card-inner">
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <h3 class="echo-card-title echo-title echo-title-level-5 echo-title-style-a">複数のボタンがあるカード</h3>  
            <p class="echo-card-body">カードのフッタにボタンが2個あります。ボタンだけがリンク範囲となっています。<br>
            小さなコンポーネントでは、ボタンの文字サイズが変化しないことが望まれる場合があります。ここでは .echo-button-fixed クラスを付与しています。</p>
        </div><!-- /.echo-card-contents -->
        <div class="echo-card-footer">
            <div class="echo-buttons">
                <div class="echo-buttons-item">
                    <a href="#" class="echo-button echo-button-sm echo-button-fixed echo-button-style-b">ボタン</a>
                </div><!-- /.echo-buttons-item -->
                <div class="echo-buttons-item">
                    <a href="#" class="echo-button echo-button-sm echo-button-fixed echo-button-style-a echo-button-icon-arrow">ボタン</a>
                </div><!-- /.echo-buttons-item -->
            </div><!-- /.echo-buttons -->
        </div><!-- /.echo-card-footer -->
    </div><!-- /.echo-card-innner -->
</div><!-- /.echo-card -->

sub class echo-card-(size)

カードの文字サイズと最低高さを変更する。
(size)は、 sm, lg に対応している。

lg のみ (breakpoint) が xl のときに .echo-card-contents の余白も拡大する。

これはカードです

2021.05.01

これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。

これはカードです

2021.05.01

これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。

これはカードです

2021.05.01

これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。

<div class="echo-card echo-card-sm">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">これはカードです</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-meta">2021.05.01</p>
            <p class="echo-card-body">これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。</p>
        </div><!-- /.echo-card-contents -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">これはカードです</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-meta">2021.05.01</p>
            <p class="echo-card-body">これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。</p>
        </div><!-- /.echo-card-contents -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card echo-card-lg">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">これはカードです</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-meta">2021.05.01</p>
            <p class="echo-card-body">これはカードの本文です。 .echo-cards に含まれない場合、最大幅を保って画面中央に配置されます。カードにはヘッダを付けることができます。.echo-card-title には .echo-title を付与できます（推薦）。</p>
        </div><!-- /.echo-card-contents -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

sub class echo-card-fixed

文字が (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

文字サイズの固定

2021.05.01

.echo-card-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズを維持します。ボタンのサイズは追随しません。ボタンも固定する場合は、別途 .echo-button-fixed を付与します。

ボタン

文字サイズの固定

2021.05.01

.echo-card-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズを維持します。ボタンのサイズは追随しません。ボタンも固定する場合は、別途 .echo-button-fixed を付与します。

ボタン

文字サイズの固定

2021.05.01

.echo-card-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズを維持します。ボタンのサイズは追随しません。ボタンも固定する場合は、別途 .echo-button-fixed を付与します。

ボタン 
<div class="echo-card echo-card-sm echo-card-fixed">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">文字サイズの固定</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-meta">2021.05.01</p>
            <p class="echo-card-body">.echo-card-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズを維持します。ボタンのサイズは追随しません。ボタンも固定する場合は、別途 .echo-button-fixed を付与します。</p>
        </div><!-- /.echo-card-contents -->
        <div class="echo-card-footer">
            <a href="#" class="echo-button echo-button-fixed echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</a>
        </div><!-- /.echo-card-footer -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card echo-card-fixed">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">文字サイズの固定</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-meta">2021.05.01</p>
            <p class="echo-card-body">.echo-card-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズを維持します。ボタンのサイズは追随しません。ボタンも固定する場合は、別途 .echo-button-fixed を付与します。</p>
        </div><!-- /.echo-card-contents -->
        <div class="echo-card-footer">
            <a href="#" class="echo-button echo-button-fixed echo-button-md echo-button-style-b echo-button-icon-arrow">ボタン</a>
        </div><!-- /.echo-card-footer -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

<hr class="echo-margin-y-lg">

<div class="echo-card echo-card-lg echo-card-fixed">
    <div class="echo-card-inner">
        <div class="echo-card-header">
            <h3 class="echo-card-title echo-title echo-title-level-4 echo-title-style-b">文字サイズの固定</h3>
        </div><!-- /.echo-card-header -->
        <div class="echo-card-object">
            <figure class="echo-thumbnail echo-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><!-- /.echo-thumbnail -->
        </div><!-- /.echo-card-object -->
        <div class="echo-card-contents">
            <p class="echo-card-meta">2021.05.01</p>
            <p class="echo-card-body">.echo-card-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズを維持します。ボタンのサイズは追随しません。ボタンも固定する場合は、別途 .echo-button-fixed を付与します。</p>
        </div><!-- /.echo-card-contents -->
        <div class="echo-card-footer">
            <a href="#" class="echo-button echo-button-fixed echo-button-lg echo-button-style-b echo-button-icon-arrow">ボタン</a>
        </div><!-- /.echo-card-footer -->
    </div><!-- /.echo-card-inner -->
</div><!-- /.echo-card -->

</div>