Components（コンポーネント）

Card（カード）

2023.06.23

使い方

カードは

画面表示

カードデザイン01

製品・サービスのこだわりを入れましょう。

製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

製品・サービスのこだわりを入れましょう。

製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

カードデザイン02

見出し

製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

詳細はこちら

見出し

製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

詳細はこちら

カードデザイン03

ここにサブタイトルが入ります。ここにタイトルが入ります。

ここに説明文が入ります。

ここにボタンが入ります。

カードデザイン04

タイトル

説明がここに入ります。
タイトル

説明がここに入ります。
タイトル

説明がここに入ります。

カードデザイン05

タイトルがここに入ります

ここに画像ファイルが入ります

見出し

テキストが入ります。
タイトルがここに入ります

ここに画像ファイルが入ります

見出し

テキストが入ります。
タイトルがここに入ります

ここに画像ファイルが入ります

見出し

テキストが入ります。

カードデザイン06

ここに見出しが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

詳細はこちら

カードデザイン07

ここに見出しが入ります。

詳細はこちら

カードデザイン08

ここに見出しが入ります。

詳細はこちら

カードデザイン09

ここに見出しが入ります。

ここに小見出しが入ります。

詳細はこちら

カードデザイン10

ここに見出しが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

カードデザイン11

ここに見出しが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

カードデザイン12

ここに見出しが入ります

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

HOME FAQ PRIVACY

ここに見出しが入ります

HOME FAQ PRIVACY

HTML/CSS（Sass）

<h3>カードデザイン01</h3>
    <div class="b-columns b-columns_col2">
     <div class="b-card">
      <div class="e-carddesign">
       <div class="e-carddesign_sub">
        <img src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Sample" class="e-card_img" alt="...">
       </div>
       <div class="e-carddesign_main">
        <div class="e-carddesign_head">
        <h5 class="">製品・サービスのこだわりを入れましょう。</h5>
        </div>
        <div class="e-carddesign_body">
         <p class="">製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>
       </div>
      </div>
     </div>
     <div class="b-card">
      <div class="e-carddesign">
       <div class="e-carddesign_sub">
        <img src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Sample" class="e-card_img" alt="...">
       </div>
       <div class="e-carddesign_main">
        <div class="e-carddesign_head">
         <h5 class="">製品・サービスのこだわりを入れましょう。</h5>
        </div>
        <div class="e-carddesign_body">
         <p class="">製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>
       </div>
      </div>
     </div>
    </div>

    <h3>カードデザイン02</h3>
    <div class="b-columns b-columns_col2">
    <div class="b-card">
    <article class="e-carddesign02">
    <div class="e-carddesign02_head">
    <figure class="e-carddesign02_thumbnail">
    <img src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Sample" alt="" class="e-carddesign02_img">
    </figure>
    <h3 class="e-carddesign02_title">見出し</h3>
    </div>
    <div class="e-carddesign02_body">
    <p class="e-carddesign02_text">製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
    </div>
    <div class="e-carddesign02_foot">
    <div class="e-carddesign02_btn"><a href="#" class="e-button e-buttondesign e-sm-button">詳細はこちら</a></div>
    </div> 
    </article>
    </div>
    <div class="b-card">
    <article class="e-carddesign02">
    <div class="e-carddesign02_head">
    <figure class="e-carddesign02_thumbnail">
    <img src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Sample" alt="" class="e-carddesign02_img">
    </figure>
    <h3 class="e-carddesign02_title">見出し</h3>
    </div>
    <div class="e-carddesign02_body">
    <p class="e-carddesign02_text">製品・サービスについての内容を記載しましょう。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
    </div>
    <div class="e-carddesign02_foot">
    <div class="e-carddesign02_btn"><a href="#" class="e-button e-buttondesign e-sm-button">詳細はこちら</a></div>
    </div> 
    </article>
    </div>
    </div>

    <h3>カードデザイン03</h3>
    <div class="b-columns e-carddesign03Wrapper">
      <div class="b-container">
        <div class="e-carddesign03 e-carddesign03-reverse">
          <div class="e-carddesign03_sub">
            <img src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Sample" class="e-card_img" alt="...">
          </div>
          <div class="e-carddesign03_main">
            <div class="e-carddesign03_head">
              <h2 id="" class="e-heading e-headingdesign b-container">
                <span class="e-headingdesign_headingSub">ここにサブタイトルが入ります。</span>
                <span class="e-headingdesign_headingMain">ここにタイトルが入ります。</span>
              </h2>   
            </div>
            <div class="e-carddesign03_body">
              <p class="">ここに説明文が入ります。</p>
            </div>    
            <div class="e-carddesign03_foot">
              <div class="e-buttonWrap">ここにボタンが入ります。</div>
            </div>
            </div>
          </div>
        </div>
    </div>

 <h3>カードデザイン04</h3>
    <ul class="b-columns_col3 b-columns">
    <li class="b-card e-carddesign04">
    <div class="e-carddesign04_sub">
    <figure class="e-carddesign04_imgwrapper">
    <img alt="Dummy Image" class="e-carddesign04_img" src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Card">
    </figure>
    </div>
    <div class="e-carddesign04_main">
    <div class="e-carddesign04_body">
    <h3 class="b-carddesign04_title">タイトル</h3>
    <p class="b-carddesign04_text">説明がここに入ります。</p>
    </div>
    </div>
    </li>
    <li class="b-card e-carddesign04">
    <div class="e-carddesign04_sub">
    <figure class="e-carddesign04_imgwrapper">
    <img alt="Dummy Image" class="e-carddesign04_img" src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Card">
    </figure>
    </div>
    <div class="e-carddesign04_main">
    <div class="e-carddesign04_body">
    <h3 class="b-carddesign04_title">タイトル</h3>
    <p class="b-carddesign04_text">説明がここに入ります。</p>
    </div>
    </div>
    </li>
    <li class="b-card e-carddesign04">
    <div class="e-carddesign04_sub">
    <figure class="e-carddesign04_imgwrapper">
    <img alt="Dummy Image" class="e-carddesign04_img" src="https://placehold.jp/dddddd/ffffff/800x450.png?text=Card">
    </figure>
    </div>
    <div class="e-carddesign04_main">
    <div class="e-carddesign04_body">
    <h3 class="b-carddesign04_title">タイトル</h3>
    <p class="b-carddesign04_text">説明がここに入ります。</p>
    </div>
    </div>
    </li>
  </ul>

<h3>カードデザイン05</h3>
<ul class="b-columns_col3 b-columns">
<li class="b-card e-carddesign05_imgWrap">
<div class="carddesign05_contentWrap">
<div class="e-carddesign05_main">
<div class="e-carddesign05_body">
<h3 class="e-carddesign05_title">タイトルがここに入ります</h3>
<p class="e-carddesign05_imageWrap">ここに画像ファイルが入ります</p>
</div>
</div>
</div>
<h4 class="">見出し</h4>
<p class="">テキストが入ります。</p>
</li>
<li class="b-card e-carddesign05_imgWrap">
<div class="carddesign05_contentWrap">
<div class="e-carddesign05_main">
<div class="e-carddesign05_body">
<h3 class="e-carddesign05_title">タイトルがここに入ります</h3>
<p class="e-carddesign05_imageWrap">ここに画像ファイルが入ります</p>
</div>
</div>
</div>
<h4 class="">見出し</h4>
<p class="">テキストが入ります。</p>
</li>
<li class="b-card e-carddesign05_imgWrap">
<div class="carddesign05_contentWrap">
<div class="e-carddesign05_main">
<div class="e-carddesign05_body">
<h3 class="e-carddesign05_title">タイトルがここに入ります</h3>
<p class="e-carddesign05_imageWrap">ここに画像ファイルが入ります</p>
</div>
</div>
</div>
<h4 class="">見出し</h4>
<p class="">テキストが入ります。</p>
</li>
</ul>

<h3>カードデザイン06</h3>
<div class="b-columnsWrapper">
<div class="b-columns e-carddesign06Wrapper">
<div class="l-main_inner">
<div class="e-carddesign06 e-carddesign06-reverse">
<div class="e-carddesign06_sub">
<img src="https://placehold.jp/500x314.png" class="e-card_img" alt="...">
</div>
<div class="e-carddesign06_main">
<div class="e-carddesign06_head">
<h5 class="">ここに見出しが入ります。</h5>
</div>
<div class="e-carddesign06_body">
<p class="">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>    
<div class="e-carddesign06_foot">
<a href="#" class="e-button e-buttondesign e-sm-button">詳細はこちら</a>
</div>
</div>
</div>
</div>
</div>
</div>

<h3>カードデザイン07</h3>
<div class="b-columnsWrapper">
<div class="b-columns">
<div class="">
<div class="e-carddesign07">
<div class="e-carddesign07_sub">
<img src="https://placehold.jp/180x180.png" class="e-rounded-circle e-card_img" alt="...">
</div>
<div class="e-carddesign07_main">
<div class="e-carddesign07_head">
<h5 class="">ここに見出しが入ります。</h5>
</div>
<div class="e-carddesign07_body">
<p class="">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>    
<div class="e-carddesign07_foot">
<a href="#" class="e-button e-buttondesign e-sm-button">詳細はこちら</a>
</div>
</div>
</div>
</div>
</div>
</div>

<h3>カードデザイン08</h3>
<div class="b-columnsWrapper">
<div class="b-columns">
<div class="">
<div class="e-carddesign08 e-carddesign08-reverse">
<div class="e-carddesign08_sub">
<img src="https://placehold.jp/286x180.png" class="e-card_img" alt="...">
</div>
<div class="e-carddesign08_main">
<div class="e-carddesign08_head">
<h5 class="">ここに見出しが入ります。</h5>
</div>
<div class="e-carddesign08_body">
<p class="">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>    
<div class="e-carddesign08_foot">
<a href="#" class="e-button e-buttondesign e-sm-button">詳細はこちら</a>
</div>
</div>
</div>
</div>
</div>
</div>

<h3>カードデザイン09</h3>
<div class="b-columnsWrapper">
<div class="b-columns">
<div class="">
<div class="e-carddesign09_title">
ここに見出しが入ります。
</div>
<div class="e-carddesign09">
<div class="e-carddesign09_sub">
<img src="https://placehold.jp/180x180.png" class="e-rounded-circle e-card_img" alt="...">
</div>
<div class="e-carddesign09_main">
<div class="e-carddesign09_head">
<h5 class="">ここに小見出しが入ります。</h5>
</div>
<div class="e-carddesign09_body">
<p class="">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>    
<div class="e-carddesign09_foot">
<a href="#" class="e-button e-buttondesign e-sm-button">詳細はこちら</a>
</div>
</div>
</div>
</div>
</div>
</div>

<h3>カードデザイン10</h3>
<div class="b-columnsWrapper">
<div class="b-columns">
<div class="">
<div class="e-carddesign10">
<div class="e-carddesign10_sub">
<img src="https://placehold.jp/50x50.png" class="e-rounded-circle e-card_img" alt="...">
</div>
<div class="e-carddesign10_main">
<div class="e-carddesign10_head">
<h5 class="">ここに見出しが入ります。</h5>
</div>
</div>
</div>
<div class="e-carddesign10_desc">
<p class="">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
</div>
</div>
</div>

<h3>カードデザイン11</h3>
<div class="b-columnsWrapper">
<div class="b-columns">
<div class="">
<div class="e-carddesign11">
<div class="e-carddesign11_main">
<h5 class="">ここに見出しが入ります。</h5>
</div>
<div class="e-carddesign11_sub">
<img src="https://placehold.jp/200x200.png" class="e-card_img" alt="...">
</div>
<div class="e-carddesign11_desc">
<p class="">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
</div>
</div>
</div>
</div>

<h3>カードデザイン12</h3>
<div class="b-columns b-columns_col2">
<div class="b-card">
<div class="e-carddesign12">
<img class="e-carddesign12_img" src="https://placehold.jp/dddddd/ffffff/350x200.png?text=Card" alt="">
<div class="card-content_titleWrap">
<h3 class="e-carddesign12_head">ここに見出しが入ります</h3>
<p class="e-carddesign12_body">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
<div class="e-carddesign12_foot">
<a class="e-carddesign12_link" href="#">HOME</a>
<a class="e-carddesign12_link" href="#">FAQ</a>
<a class="e-carddesign12_link" href="#">PRIVACY</a>
</div>
</div>
</div>
<div class="b-card">
<div class="e-carddesign12">
<img class="e-carddesign12_img" src="https://placehold.jp/dddddd/ffffff/350x200.png?text=Card" alt="">
<div class="card-content_titleWrap">
<h3 class="e-carddesign12_head">ここに見出しが入ります</h3>
<p class="e-carddesign12_body">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
<div class="e-carddesign12_foot">
<a class="e-carddesign12_link" href="#">HOME</a>
<a class="e-carddesign12_link" href="#">FAQ</a>
<a class="e-carddesign12_link" href="#">PRIVACY</a>
</div>
</div>
</div>

</div>

.e-card_img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.e-cardWrapper {
  background-color: #efefef;
}
.e-card-textWhite {
  color: #fff;
}
.e-card-bgPrimary {
  background-color: #193162;
}
.e-card-bgSecondary {
  background-color: #e8eaef;
}

.e-carddesign {
  display: flex;
  flex-direction: column;
}
.e-carddesign_foot {
  margin-top: auto;
}

.e-carddesign02 {
  background-color: #fff;
  color: #212121;
  text-decoration: none;
}
.e-carddesign02_head {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.e-carddesign02_foot {
  border-top: 1px solid #ddd;
}
.e-carddesign02_title {
  font-weight: bold;
  text-decoration: none;
}
.e-carddesign02_thumbnail {
  margin: 0;
}
.e-carddesign02_img {
  width: 100%;
}
.e-carddesign02_text {
  text-align: center;
  text-decoration: none;
}
.e-carddesign02_btn {
  text-align: center;
  text-decoration: none;
  padding-bottom: 0;
}

.e-carddesign03 {
  display: flex;
}
@media screen and (min-width: 768px) {
  .e-carddesign03 {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign03 {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign03-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign03-reverse {
    flex-direction: column;
  }
}
.e-carddesign03Wrapper {
  background-color: #eee;
}
@media screen and (min-width: 768px) {
  .e-carddesign03_main {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign03_main {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign03_sub {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign03_sub {
    width: 100%;
  }
}
.e-carddesign04 {
  position: relative;
}
.e-carddesign04_img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.e-carddesign04_main {
  position: absolute;
  top: 0;
  left: 0;
}
.e-carddesign05 {
  position: relative;
}
.e-carddesign05_title {
  background-color: rgba(255, 255, 255, 0.5);
}
.e-carddesign05_body {
  background-color: #333;
  display: block;
}
.e-carddesign06 {
  display: flex;
}
@media screen and (min-width: 768px) {
  .e-carddesign06 {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign06 {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign06-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign06-reverse {
    flex-direction: column;
  }
}
.e-carddesign06Wrapper {
  background-color: #aaa;
}
@media screen and (min-width: 768px) {
  .e-carddesign06Wrapper {
    background: linear-gradient(90deg, transparent 0%, transparent 50%, #aedae7 50%, #aedae7);
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign06Wrapper {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign06_main {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign06_main {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign06_sub {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign06_sub {
    width: 100%;
  }
}
.e-carddesign07 {
  display: flex;
  flex-direction: row;
}
@media screen and (min-width: 768px) {
  .e-carddesign07-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign07-reverse {
    flex-direction: column;
  }
}
.e-carddesign07_main {
  flex: 1;
}
.e-carddesign07_sub {
  width: 28rem;
}
.e-carddesign08 {
  display: flex;
}
@media screen and (min-width: 768px) {
  .e-carddesign08 {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign08 {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign08-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign08-reverse {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign08_main {
    flex: 1;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign08_main {
    flex: 1;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign08_sub {
    width: 28rem;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign08_sub {
    flex: 1;
  }
}
.e-carddesign09 {
  display: flex;
}
@media screen and (min-width: 768px) {
  .e-carddesign09 {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign09 {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign09-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign09-reverse {
    flex-direction: column;
  }
}
.e-carddesign09_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .e-carddesign09_main {
    flex: 1;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign09_main {
    flex: 1;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign09_sub {
    width: 28rem;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign09_sub {
    flex: 1;
  }
}
.e-carddesign10 {
  display: flex;
}
@media screen and (min-width: 768px) {
  .e-carddesign10 {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign10 {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign10-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign10-reverse {
    flex-direction: column;
  }
}
.e-carddesign10_desc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .e-carddesign10_main {
    flex: 1;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign10_main {
    flex: 1;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign10_sub {
    width: 15rem;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign10_sub {
    flex: 1;
  }
}
.e-carddesign11 {
  display: flex;
}
@media screen and (min-width: 768px) {
  .e-carddesign11 {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign11 {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign11_main {
    width: 35%;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign11_main {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign11_sub {
    width: 20%;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign11_sub {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .e-carddesign11_desc {
    width: 45%;
  }
}
@media screen and (max-width: 767px) {
  .e-carddesign11_desc {
    width: 100%;
  }
}

.e-carddesign12 {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}
.e-carddesign12_img {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
  height: auto;
}
.e-carddesign12_head {
  font-size: 1.6em;
  color: #333;
  font-weight: 700;
}
.e-carddesign12_body {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.2em;
}

.e-card {
  &_img {
    display: block;
    object-fit: cover;
    width: 100%;
  }
  &Wrapper {
    background-color: #efefef;
  }
  &-textWhite {
    color: #fff;
  } 
  &-bgPrimary {
    background-color: #193162;
  }
  &-bgSecondary{
    background-color: #e8eaef;
  } 
}

.e-carddesign {
  display: flex;
  flex-direction: column;
  &_main {
  }
  &_sub {
  }
  &_head {
  }
  &_body {
  }
  &_foot {
    margin-top: auto;
  }
}

.e-carddesign02 {
  background-color: #fff;
  color: #212121;
  text-decoration: none;

  &_head {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  &_body {

  }
  
  &_foot {
    border-top: 1px solid #ddd;
  }

  &_title {
    font-weight: bold;
    text-decoration: none;
  }

  &_thumbnail {
    margin: 0;
  }

  &_img {
    width: 100%;
  }

  &_text {
    text-align:center;
    text-decoration: none;
  }

  &_btn {
    text-align:center;
    text-decoration: none;
    padding-bottom: 0;
  }  

}

.e-carddesign03 {
  display: flex;
  @include mq(pc) {
    flex-direction: row;
  }
  @include mq(sp) {
    flex-direction: column;
  }    
  &-reverse {
    @include mq(pc) {
      flex-direction: row-reverse;
    }
    @include mq(sp) {
      flex-direction: column;
    }   
  }
  &Wrapper {
    background-color: #eee;
  }
  &_main {
    @include mq(pc) {
      width: 50%;
    }
    @include mq(sp) {
      width: 100%;
    }    
  }
  &_sub {
    @include mq(pc) {
      width: 50%;
    }
    @include mq(sp) {
      width: 100%;
    }  
  }
  &_head {
  }
  &_body {
  }
  &_foot {
  }
}

.e-carddesign04 {
  position: relative;
  &_img {
    display: block;
    object-fit: cover;
    width: 100%;
  }
  &_sub {
  }
  &_main {
    position: absolute;
    top: 0;
    left: 0;
  }
  &_head {
  }
  &_body {
  }
  &_foot {
  }
}

.e-carddesign05 {
  position: relative;
  &_title {
    background-color: rgba(255,255,255,0.5);
  }
  &_img {
  }
  &_sub {

  }
  &_main {

  }
  &_head {
  }
  &_body {
    background-color: #333;
    display: block;
  }
  &_foot {
  }
}

.e-carddesign06 {
  display: flex;
  @include mq(pc) {
    flex-direction: row;
  }
  @include mq(sp) {
    flex-direction: column;
  }
  &-reverse {
    @include mq(pc) {
      flex-direction: row-reverse;
    }
    @include mq(sp) {
      flex-direction: column;
    }   
  }
  &Wrapper {
    background-color: #aaa;
    @include mq(pc) {
      background: linear-gradient(90deg, transparent 0%, transparent 50%, #aedae7 50%, #aedae7);
    }
    @include mq(sp) {
      width: 100%;
    }  
  }
  &_main {
    @include mq(pc) {
      width: 50%;
    }
    @include mq(sp) {
      width: 100%;
    }  
  }
  &_sub {
    @include mq(pc) {
      width: 50%;
    }
    @include mq(sp) {
      width: 100%;
    }  
  }
  &_head {
  }
  &_body {
  }
  &_foot {
  }
}

.e-carddesign07 {
  display: flex;
  flex-direction: row;
  &-reverse {
    @include mq(pc) {
      flex-direction: row-reverse;
    }
    @include mq(sp) {
      flex-direction: column;
    }
  }
  &Wrapper {

  }
  &_main {
    flex: 1;
  }
  &_sub {
    width: 28rem;
  }
  &_head {
  }
  &_body {
  }
  &_foot {
  }
}

.e-carddesign08 {
  display: flex;
  @include mq(pc) {
    flex-direction: row;
  }
  @include mq(sp) {
    flex-direction: column;
  }    
  &-reverse {
    @include mq(pc) {
      flex-direction: row-reverse;
    }
    @include mq(sp) {
      flex-direction: column;
    } 
  }
  &Wrapper {

  }
  &_main {
    @include mq(pc) {
      flex: 1;
    }
    @include mq(sp) {
      flex: 1;
    } 
  }
  &_sub {
    @include mq(pc) {
      width: 28rem;
    }
    @include mq(sp) {
      flex: 1;
    } 
  }
  &_head {
  }
  &_body {
  }
  &_foot {
  }
}

.e-carddesign09 {
  display: flex;
  @include mq(pc) {
    flex-direction: row;
  }
  @include mq(sp) {
    flex-direction: column;
  }
  &-reverse {
    @include mq(pc) {
      flex-direction: row-reverse;
    }
    @include mq(sp) {
      flex-direction: column;
    } 
  }
  &Wrapper {

  }
  &_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  &_main {
    @include mq(pc) {
      flex: 1;
    }
    @include mq(sp) {
      flex: 1;
    } 
  }
  &_sub {
    @include mq(pc) {
      width: 28rem;
    }
    @include mq(sp) {
      flex: 1;
    } 
  }
  &_head {
  }
  &_body {
  }
  &_foot {
  }
}

.e-carddesign10 {
  display: flex;
  @include mq(pc) {
    flex-direction: row;
  }
  @include mq(sp) {
    flex-direction: column;
  }
  &-reverse {
    @include mq(pc) {
      flex-direction: row-reverse;
    }
    @include mq(sp) {
      flex-direction: column;
    } 
  }
  &Wrapper {

  }
  &_desc {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  &_main {
    @include mq(pc) {
      flex: 1;
    }
    @include mq(sp) {
      flex: 1;
    } 
  }
  &_sub {
    @include mq(pc) {
      width: 15rem;
    }
    @include mq(sp) {
      flex: 1;
    } 
  }
  &_head {
  }
  &_body {
  }
  &_foot {
  }
}

.e-carddesign11 {
  display: flex;
  @include mq(pc) {
    flex-direction: row;
  }
  @include mq(sp) {
    flex-direction: column;
  }
  &Wrapper {

  }
  &_main {
    @include mq(pc) {
      width: 35%;
    }
    @include mq(sp) {
      width: 100%;
    }
  }
  &_sub {
    @include mq(pc) {
      width: 20%;
    }
    @include mq(sp) {
      width: 100%;
    }
  }
  &_desc {
    @include mq(pc) {
      width: 45%;
    }
    @include mq(sp) {
      width: 100%;
    }
  }
}

.e-carddesign12 {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
  &_img {
    border-radius: 5px 5px 0 0;
    max-width: 100%;
    height: auto;
  }
  &titleWrapper {

  }
  &_head {
    font-size: 1.6em;
    color: #333;
    font-weight: 700;
  }
  &_body {
    color: #777;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0.2em;
  }
  &_foot {

  }
  &_link {
    
  }

}

Card（カード）

使い方

画面表示

カードデザイン01

製品・サービスのこだわりを入れましょう。

製品・サービスのこだわりを入れましょう。

カードデザイン02

見出し

見出し

カードデザイン03

ここにサブタイトルが入ります。 ここにタイトルが入ります。

カードデザイン04

タイトル

タイトル

タイトル

カードデザイン05

タイトルがここに入ります

見出し

タイトルがここに入ります

見出し

タイトルがここに入ります

見出し

カードデザイン06

ここに見出しが入ります。

カードデザイン07

ここに見出しが入ります。

カードデザイン08

ここに見出しが入ります。

カードデザイン09

ここに小見出しが入ります。

カードデザイン10

ここに見出しが入ります。

カードデザイン11

ここに見出しが入ります。

カードデザイン12

ここに見出しが入ります

ここに見出しが入ります

HTML/CSS（Sass）

関連記事

Label（ラベル）

Heading (見出し)

Buttons (ボタン)

カテゴリー

Keyvisual（キービジュアル / メインビジュアル）

FAQ（よくある質問）

Menu（メニュー）

News（お知らせ）

ここにサブタイトルが入ります。ここにタイトルが入ります。