Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#event" class="tbx-1163"><span class="tbx-1163__date"><strong>28</strong><span>OCT<br>2026</span></span><span class="tbx-1163__content"><span class="tbx-1163__eyebrow">UPCOMING SESSION</span><strong>Design Systems<br>Workshop</strong><span class="tbx-1163__detail">14:00–16:30 <i>↗</i></span><span class="tbx-1163__venue">TOKYO / STUDIO NORTH</span></span></a>
CSS
.tbx-1163{box-sizing:border-box;display:flex;position:relative;width:281px;max-width:100%;height:160px;background:#fff;color:#213441;border:1px solid #d4dce1;border-radius:9px;text-decoration:none;overflow:hidden;box-shadow:0 5px 15px #23374613;font-family:system-ui,sans-serif;transition:box-shadow .35s,transform .35s}.tbx-1163__date{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;width:77px;flex-shrink:0;background:#263f59;color:#fff;transition:background .3s}.tbx-1163__date strong{font:800 39px/1 Georgia,serif}.tbx-1163__date span{font:750 9px/1.4 system-ui,sans-serif;text-align:center;letter-spacing:.14em}.tbx-1163__content{flex:1;padding:19px 13px 12px;display:flex;flex-direction:column;position:relative}.tbx-1163__eyebrow{font-size:9px;font-weight:800;letter-spacing:.08em;color:#a86e48}.tbx-1163__content>strong{font-size:16px;line-height:1.2;margin:7px 0 9px}.tbx-1163__detail{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:#5c7180}.tbx-1163__detail i{font-size:14px;font-style:normal;transition:transform .28s}.tbx-1163__venue{position:absolute;left:0;right:0;bottom:0;padding:9px 11px;text-align:center;background:#d8eee8;color:#315851;transform:translateY(100%);transition:transform .32s cubic-bezier(.25,.8,.2,1);font-size:9px;letter-spacing:.09em;font-weight:850}.tbx-1163:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 12px 23px #23374629}.tbx-1163:is(:hover,:focus-visible) .tbx-1163__date{background:#376b68}.tbx-1163:is(:hover,:focus-visible) .tbx-1163__venue{transform:translateY(0)}.tbx-1163:is(:hover,:focus-visible) .tbx-1163__detail i{transform:translate(3px,-3px)}.tbx-1163:focus-visible{outline:3px solid #376b68;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1163, .tbx-1163 *, .tbx-1163::before, .tbx-1163::after, .tbx-1163 *::before, .tbx-1163 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Events / Schedule
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。