Card Component Tutorial

完成品デモ
TOC - All Steps

画像とテキストのコントラストを確保する ~ mask-image ~

猫

タイトル

CardBody
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">CardBody</div>
  <div class="CardFooter">CardFooter</div>
</div>