echo-card
投稿の繰り返し部分などに使用する、カード状のコンポーネントを表示する。
.echo-title, .echo-thumbnail, .echo-button
を含めることができる。
リンクを含む場合は .echo-card-title
に下線が引かれる。リンクが不要な場合であっても .echo-card-inner
が必須であることに注意する。
カードの背景色は、body要素の基本背景色 $body-bg
となる。
(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.
これはカードです

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

.echo-card-body のコンテンツの一部に .echo-text-xxl を付与しています。
ここが150%になります。画面サイズを変えて、ひとつ前のカードと比較してください。
.echo-card 直下の各要素は必須ではありません。
ここでは .echo-card-contents のみとしています。

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

複数のボタンがあるカード
カードのフッタにボタンが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
の余白も拡大する。
これはカードです

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

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

これはカードの本文です。 .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) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。
文字サイズの固定

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

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

.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>