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 — плавная анимация без единого JavaScript.
- Добавьте box-shadow на :hover для более выраженного эффекта глубины.