Availability Profile Card

Live Demo

マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。

Source Code

必要なコードをコピーして実装に利用できます。

<a class="tbx-1199" href="#consultation" aria-label="担当者の予約状況を見る"><span class="tbx-1199__avatar" aria-hidden="true"><svg viewBox="0 0 70 70"><circle cx="35" cy="35" r="35" fill="#9abfcb"/><circle cx="35" cy="29" r="13" fill="#f5dfc9"/><path d="M12 71c2-19 12-26 23-26s21 7 23 26" fill="#345a6e"/><path d="M22 28q1-26 25-18 10 8 1 23l-1-9q-14-17-25 4" fill="#4a4855"/></svg><i></i></span><span class="tbx-1199__body"><small>PROJECT ADVISOR</small><strong>山本 美咲</strong><span>制作のご相談</span><span class="tbx-1199__slots">受付可能 <b>月・水・金</b></span></span></a>

.tbx-1199{display:flex;gap:14px;align-items:center;box-sizing:border-box;width:275px;max-width:100%;min-height:152px;padding:21px 17px;background:#fff;border:1px solid #d8e1e4;border-radius:13px;text-decoration:none;color:#1a3b52;font-family:system-ui;box-shadow:0 5px 18px #113c5713;transition:box-shadow .35s,transform .35s}.tbx-1199__avatar{flex:none;width:67px;height:67px;position:relative}.tbx-1199__avatar svg{width:100%;height:100%;border-radius:100%}.tbx-1199__avatar i{position:absolute;right:1px;bottom:3px;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#3baf83;box-shadow:0 0 0 0 #3baf8355;transition:box-shadow .4s}.tbx-1199__body{display:grid;gap:5px;min-width:0}.tbx-1199__body small{font-size:8px;letter-spacing:.14em;color:#67849b}.tbx-1199__body strong{font-size:15px}.tbx-1199__body>span:not(.tbx-1199__slots){font-size:11px;color:#5d7484}.tbx-1199__slots{font-size:10px;max-height:0;opacity:0;overflow:hidden;transition:opacity .4s,max-height .4s;color:#367969}.tbx-1199__slots b{font-size:10px;margin-left:4px}.tbx-1199:is(:hover,:focus-visible){box-shadow:0 13px 25px #113c5722;transform:translateY(-2px)}.tbx-1199:is(:hover,:focus-visible) .tbx-1199__slots{max-height:22px;opacity:1}.tbx-1199:is(:hover,:focus-visible) .tbx-1199__avatar i{box-shadow:0 0 0 7px #3baf8325}.tbx-1199:focus-visible{outline:3px solid #347a82;outline-offset:2px}
@media (prefers-reduced-motion: reduce) {.tbx-1199,.tbx-1199 *,.tbx-1199::before,.tbx-1199::after,.tbx-1199 *::before,.tbx-1199 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

How to Use

HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。

Use Case

Team / Contact

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。

Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。

Reduced Motion：prefers-reduced-motion: reduce 対応。