Адаптивная карточка события должна выдерживать длинное название, увеличение текста и узкий экран. Для такого компонента не нужен тяжёлый фреймворк. В примере CSS отвечает за расположение, а JavaScript только записывает данные в предназначенный элемент.
Разметка и стили адаптивной карточки
index.html
<!doctype html>
<html lang="ru"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Карточка события</title>
<style>
* { box-sizing: border-box; }
body { margin: 1rem; font: 1rem/1.5 system-ui; }
.card { max-width: 48rem; padding: 1rem; border: 1px solid #555;
display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.card h1 { margin: 0; overflow-wrap: anywhere; }
.card a { justify-self: start; }
@media (min-width: 42rem) {
.card { grid-template-columns: minmax(0, 1fr) auto; }
.card a { align-self: center; }
}
</style>
<article class="card"><div><h1 id="name"></h1>
<p>Дата уточняется организатором</p></div>
<a href="#details">Условия участия</a></article>
<section id="details"><h2>Учебное событие</h2><p>Это демонстрационная карточка, регистрации нет.</p></section>
<script>document.querySelector('#name').textContent = 'Открытая тренировка городского клуба';</script>
</html>Сохраните страницу и откройте её. На узком экране ссылка располагается после текста, на широком — во второй колонке. Порядок чтения в DOM остаётся прежним. Порог 42rem — условный выбор примера, его нужно подбирать по содержимому вашего компонента, а не по названию устройства.
| Что сравнить | На что смотреть | Что сделать |
|---|---|---|
| minmax(0, 1fr) | Колонка может сжиматься | Длинное содержимое не задаёт лишний минимум |
| overflow-wrap | Длинный непрерывный текст переносится | Проверить названия без пробелов |
| Обычная ссылка | Переход имеет явную цель | Не делать всю карточку набором вложенных кликов |
| Текстовый статус даты | Нет вымышленной точности | Не подставлять случайную дату ради дизайна |
Сначала проверьте содержание
Карточка сообщает название, состояние даты и действие. Если дата неизвестна, интерфейс честно это показывает. Не скрывайте важную информацию только потому, что она ломает высоту макета. Для повторяющегося списка используйте подходящий уровень заголовка: h1 в отдельном демонстрационном файле не означает, что каждая карточка большого каталога должна иметь такой уровень.
- Проверить узкую ширину без горизонтальной прокрутки.
- Увеличить текст и убедиться, что ссылка остаётся доступной.
- Подставить очень длинное название.
- Пройти ссылку клавиатурой и проверить её цель.
Не добавляйте JavaScript-расчёт ширины, пока задача решается стилями. Обработчик resize увеличит число состояний и может конфликтовать с размером шрифта. Если позже появятся реальные данные, отдельно нужны загрузка и обработка отсутствующих полей. Пример не делает запросов и не обещает актуального расписания.
Вопросы и ответы
Почему нет изображения?
У карточки сначала проверяется информационная задача. Обложку можно добавить при наличии смысла и подходящего альтернативного описания.
Нужно ли выравнивать все высоты?
Только если это помогает чтению. Ограничение текста может скрыть важные условия и требует отдельного решения.
Где должен находиться фокус после перехода?
В этом простом примере ссылка ведёт к разделу страницы. Для другого действия нужно спроектировать соответствующее поведение.
Это готовый календарь клуба?
Нет. Это локальный компонент с демонстрационным содержимым, без реального расписания и регистрации.
