パーツ番号 10-11-04 ・ CSSのみ

距離・所要時間バッジ付き店舗カード

「徒歩5分」のようなバッジを添えた店舗カード。駅からの距離感を一目で伝えたいアクセス欄向けの見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <span class="badge">徒歩5分</span>
          <p class="shop">架空ベーカリー 南口店</p>
          <p class="addr">サンプル県サンプル市南町4-5-6</p>
        </div>

CSS

.d10-11-04 .card{position:relative;width:100%;background:#fff;border:1px solid #e5e9ee;
          border-radius:10px;padding:20px;}
        .d10-11-04 .badge{position:absolute;top:14px;right:14px;background:#fef3e8;color:#c2670c;
          font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;}
        .d10-11-04 .shop{margin:4px 0 6px;font-size:14px;font-weight:700;color:#1f2937;}
        .d10-11-04 .addr{margin:0;font-size:12px;color:#8792a2;}

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