Card Component Tutorial

完成品デモ
TOC - All Steps

2つの子要素を両端に寄せる ~ space-between ~

猫

タイトル

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

PublishDate
  • Avator
<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">
    <div class="PublishDate">PublishDate</div>
    <ul class="Avatars">
      <li>Avator</li>
    </ul>
  </div>
</div>