Как сделать карточку
Короткий ответ
Картинка, текст и кнопка в блоке со скруглением и тенью:
<style>
.card { width: 220px; border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 2px 10px rgb(0 0 0 / 15%); }
.card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card .body { padding: 12px; }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0 0 12px; color: dimgray; font-size: 14px; }
</style>
<article class="card">
<img src="/media/photo-400x250.jpg" alt="Lake in the mountains">
<div class="body"><h3>Alpine Lakes Tour</h3><p>Five days of hiking and fresh air.</p><button>From $299</button></div>
</article>overflow: hidden обрезает углы картинки по скруглению карточки, а object-fit: cover подгоняет фото любых пропорций под одинаковую высоту.
Вся карточка — ссылка
Чтобы кликалась вся карточка, растяните псевдоэлемент ссылки на неё целиком:
<style>
.c { position: relative; width: 220px; padding: 12px; border: 1px solid gainsboro; border-radius: 12px; }
.c a::after { content: ""; position: absolute; inset: 0; }
.c:hover { border-color: royalblue; }
</style>
<div class="c"><h3 style="margin: 0;"><a href="https://example.com">Read the guide</a></h3><p style="margin: 6px 0 0;">Ten tips for beginners.</p></div>Так ссылкой остаётся только заголовок, и экранный диктор прочитает короткий понятный текст, а не всё содержимое карточки.
Частая ошибка
Оборачивают всю карточку с кнопкой внутри в a. Кнопка внутри ссылки — недопустимая разметка, и клик по ней срабатывает непредсказуемо. Используйте приём с растянутым ::after.
Функции из этого ответа
- <article> — Самостоятельный фрагмент, понятный и вне страницы: статья, пост, отзыв, карточка товара.
- border-radius — Скругляет углы элемента.
- box-shadow — Тень вокруг блока элемента.
- object-fit — Как картинка `<img>` или `<video>` вписывается в размеры элемента.