Card Component Tutorial

アイコンとテキストが縦中央一直線に並ぶようにする

タイトル

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

2022/12/03

• 
• 
• 
• 
• 
• 

<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 IconText">
      <span class="IconText__icon PublishDate__icon">
        <svg
          version="1.1"
          width="1em"
          height="1em"
          viewBox="0 0 36 36"
          preserveAspectRatio="xMidYMid meet"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <title>clock-line</title>
          <path
            d="M18,2A16,16,0,1,0,34,18,16,16,0,0,0,18,2Zm0,30A14,14,0,1,1,32,18,14,14,0,0,1,18,32Z"
            class="clr-i-outline clr-i-outline-path-1"
          ></path>
          <path
            d="M18.92,18.4V10.75a1,1,0,0,0-2,0v8.72l5.9,4a1,1,0,1,0,1.11-1.66Z"
            class="clr-i-outline clr-i-outline-path-2"
          ></path>
          <path
            d="M8,17.94A9.94,9.94,0,0,1,23.41,9.59l.85-1.36a11.55,11.55,0,1,0-8.53,21L16,27.7A10,10,0,0,1,8,17.94Z"
            class="clr-i-outline clr-i-outline-path-3"
          ></path>
          <rect x="0" y="0" width="36" height="36" fill-opacity="0" />
        </svg>
      </span>
      <time class="IconText__text PublishDate__date" datetime="2022-12-03"
        >2022/12/03</time
      >
    </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>