Card Component Tutorial

4つ目以降のアバターは省略し、省略数を表示する

タイトル

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

PublishDate

• 
• 
• 
• 
• 
• 

<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 class="Avatar">
        <img
          class="Avatar__thumb"
          src="https://i.pravatar.cc/60?img=1"
          alt="hogehogeさん"
        />
      </li>
      <li class="Avatar">
        <img
          class="Avatar__thumb"
          src="https://i.pravatar.cc/60?img=2"
          alt="hogehogeさん"
        />
      </li>
      <li class="Avatar">
        <img
          class="Avatar__thumb"
          src="https://i.pravatar.cc/60?img=3"
          alt="hogehogeさん"
        />
      </li>
      <li class="Avatar">
        <img
          class="Avatar__thumb"
          src="https://i.pravatar.cc/60?img=4"
          alt="hogehogeさん"
        />
      </li>
      <li class="Avatar">
        <img
          class="Avatar__thumb"
          src="https://i.pravatar.cc/60?img=5"
          alt="hogehogeさん"
        />
      </li>
      <li class="Avatar">
        <img
          class="Avatar__thumb"
          src="https://i.pravatar.cc/60?img=6"
          alt="hogehogeさん"
        />
      </li>
    </ul>
  </div>
</div>