Школа
Вёрстка

Как семантически верно сверстать карточку?

Виталий
12 мар 2025
👁 1223   🗩2
Вёрстка

Как семантически верно сверстать карточку?

Виталий
12 мар 2025
👁 1223   🗩2
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Виталий!

Первым делом, нужно поставить ссылки и кнопки вниз: сначала я замечаю картинку, потом читаю текст и только после этого решаю, переходить ли по ссылке —

Очевидно, картину хочется сохранить квадратной. Не знаю, можно ли просто увеличить высоту карточки, но давайте ради интереса постановим, что нельзя. Попробуем упихнуть информацию в оставшееся место. Первым делом просто подожмём кнопки и вертикальные расстояния:

Теперь поработаем с информацией. Рейтинг явно выпадает из общего ряда и достаточно независим, поставим его в свободный уголок фотографии. Масса вполне будет считываться и без иконки. Передержку и выгул ничто не мешает уподобить станции метро и массе. Вуаля:

Глядя на одну карточку, невозможно понять, может ли быть больше тегов. Если да, то значит у нас может появиться вторая и третья строка. Я бы предложил рассмотреть возможность избавиться от внешней белой плашки — и тогда карточки разной высоты будут более симпатично соседствовать друг с другом.

P. S. Уверенно верстать без плашек я учу на курсе «Типографика и вёрстка». Записывайтесь, пока есть места.

Типографика в вебеДоработка вёрсткиНоситель: сайт
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы