「New」タグの大きさを調整する
New
タイトル
この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。
<div class="CardWrapper">
<div class="CardTag">
<div class="CardTag__text">New</div>
</div>
<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>
</div>