Assurance Checklist Panel

Live Demo

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

Source Code

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

<div class="tbx-1223"><a href="#demo-1223" class="tbx-1223-card"><span class="tbx-1223-heading">OUR STANDARD <b>✓</b></span><span class="tbx-1223-point"><span>01</span>Transparent pricing</span><span class="tbx-1223-point"><span>02</span>Clear communication</span><span class="tbx-1223-extra">Every step is documented ↗</span></a></div>

.tbx-1223{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1223{display:grid;place-items:center;width:100%;min-height:200px;padding:15px;background:#ecf0e9;font-family:Arial,sans-serif}.tbx-1223 *{box-sizing:border-box}.tbx-1223-card{position:relative;display:grid;gap:9px;width:min(100%,300px);min-height:153px;padding:19px 16px 15px 20px;background:white;border-radius:6px;text-decoration:none;color:#24433b;box-shadow:0 7px 23px #25423517;overflow:hidden;outline-offset:4px}.tbx-1223-card:before{position:absolute;content:'';left:0;top:0;width:5px;height:100%;background:#5b9e76;transform:scaleY(.2);transform-origin:top;transition:transform .5s}.tbx-1223-heading{font-size:11px;font-weight:900;letter-spacing:.13em;display:flex;justify-content:space-between}.tbx-1223-heading b{font-size:20px;color:#72a888}.tbx-1223-point{display:flex;gap:14px;font-size:12px;font-weight:650;padding-bottom:5px;border-bottom:1px solid #e4e9e2;transition:padding-left .35s}.tbx-1223-point span{color:#83a291;font-size:11px}.tbx-1223-extra{font-size:10px;letter-spacing:.04em;opacity:0;transform:translateX(-15px);transition:opacity .34s,transform .34s;color:#38704d}.tbx-1223-card:is(:hover,:focus-visible):before{transform:scaleY(1)}.tbx-1223-card:is(:hover,:focus-visible) .tbx-1223-point{padding-left:6px}.tbx-1223-card:is(:hover,:focus-visible) .tbx-1223-extra{opacity:1;transform:none}.tbx-1223-card:focus-visible{outline:3px solid #3c825b}
@media(prefers-reduced-motion:reduce){.tbx-1223 *, .tbx-1223 *::before,.tbx-1223 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

How to Use

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

Use Case

Corporate, Service

Technical Notes

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

Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。

Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。

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