パーツ番号 10-14-05 ・ CSSのみ

お気に入り済みマーク付きカード

登録済みを示す塗りつぶしハートを角に配置した物件カードです。会員マイページのお気に入り物件一覧に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb">
            <span class="heart">♥</span>
          </div>
          <div class="info">
            <p class="name">パークサイド弦巻 401</p>
            <p class="rent">¥95,000<span>/月</span></p>
          </div>
        </div>

CSS

.d10-14-05 .card{width:190px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-14-05 .thumb{position:relative;height:100px;background:linear-gradient(135deg,#f3c4d1,#f8a5c2);}
        .d10-14-05 .heart{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:#fff;color:#e0393e;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2);}
        .d10-14-05 .info{padding:12px 14px;}
        .d10-14-05 .name{font-size:13px;font-weight:700;color:#333;margin:0 0 6px;}
        .d10-14-05 .rent{margin:0;font-size:16px;font-weight:800;color:#e0574c;}
        .d10-14-05 .rent span{font-size:11px;font-weight:400;color:#999;}

クラス名 .d10-14-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。