Card Component Tutorial

完成品デモ
TOC - All Steps

3行以上は省略する ~ -webkit-line-clamp ~

猫

タイトル

この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

CardFooter
 
<div class="Card">
  <div class="CardHeader">
    <img
      class="CardHeader__image"
      src="https://placekitten.com/500/500"
      alt="猫"
    />
    <h2 class="CardHeader__title">タイトル</h2>
  </div>
  <div class="CardBody">
    <p class="CardBody__paragraph">
      この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。
    </p>
  </div>
  <div class="CardFooter">CardFooter</div>
</div>