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

急募バッジ付き求人カード

角に急募ラベルを掲げ緊急性を伝える求人カードです。至急採用したいポジションを一覧の中で目立たせたい場合に使います。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <span class="ribbon">急募</span>
          <p class="job">配送ドライバー</p>
          <p class="salary">日給 11,000円〜</p>
          <p class="loc">埼玉県さいたま市</p>
        </div>

CSS

.d10-15-04 .card{position:relative;width:220px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:16px;padding-top:14px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-15-04 .ribbon{position:absolute;top:12px;right:-30px;transform:rotate(45deg);background:#e0393e;color:#fff;font-size:10px;font-weight:700;padding:3px 34px;letter-spacing:1px;}
        .d10-15-04 .job{margin:0 0 8px;font-size:15px;font-weight:700;color:#222;padding-right:40px;}
        .d10-15-04 .salary{margin:0 0 6px;font-size:13px;color:#c0392b;font-weight:700;}
        .d10-15-04 .loc{margin:0;font-size:12px;color:#777;}

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