Card component
Універсальна картка з border-radius, легкою тінню та hover-ефектом підняття — типовий блок для списків товарів, статей, тарифів.
Код
<style>
.card { background:#161b22;border:1px solid #30363d;border-radius:8px;padding:1.25rem;max-width:280px;transition:transform 0.2s; }
.card:hover { transform: translateY(-4px); }
</style>
<article class="card">
<h3 style="margin:0 0 0.5rem;color:#fff">Заголовок картки</h3>
<p style="margin:0;color:#8b949e;font-size:0.9rem">Короткий опис вмісту картки.</p>
</article>
Попередній перегляд
Пояснення
article використано, бо картка — самодостатня одиниця контенту. Ефект підняття реалізований через CSS transform на :hover — плавна анімація без зміни розмірів layout і без жодного JavaScript.
- Додайте box-shadow на :hover для ще виразнішого ефекту глибини.