Карточки и UI-блоки

Паттерны карточек, структура компонента, изображение, контент с flex/grid, юниформные карточки и состояния.

Уровень: средний 9 разделов 1,5 часа

1. Паттерн карточки

Карточка — ячейка в грид из изображения, заголовка, текста и кнопки. Её сила в единообразии: одинаковый ритм контента читается сеткой в секунды.

<article class="card">
  <img class="card__img" src="photo.jpg" alt="Природа"/>
  <div class="card__body">
    <h3 class="card__title">Заголовок</h3>
    <p class="card__text">Короткое описание…</p>
    <a class="btn card__link" href="#">Подробнее</a>
  </div>
</article>

2. Макет карточек

.card { display:flex; flex-direction:column; }
.card--horizontal { flex-direction:row; }
.card__body { flex:1; display:flex; flex-direction:column; }
.card__link { margin-top:auto; }

flex-column + margin-top:auto у кнопки прижимает CTA вниз карточки — все кнопки на одном уровне, текст разной длины не ломает ритм.

3. Изображение в карточке

.card__img { width:100%; height:160px; object-fit:cover; border-radius:12px 12px 0 0; }

object-fit: cover даёт ровную «обложку». aspect-ratio: 16/9 лучше height — управляет кадрированием заранее.

4. Сетка карточек

.grid {
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}

auto-fill/minmax — карточки «текут» по ширине сами: меньше медиазапросов, консистентная сетка на всех вьюпортах.

5. Карточка-ссылка целиком

<a class="card" href="/article/42">
  <img class="card__img" src="thumb.jpg" alt="Интервью"/>
  <h3 class="card__title">…</h3>
</a>

Если вся карточка кликабельна — делайте ссылкой сам её контент: проще для доступности и индексируемости. Смесь ссылки и данных — сложнее.

6. Состояния карточек

.card { transition: box-shadow .2s ease; }
.card:hover, .card:focus-within { box-shadow:0 8px 24px rgba(15,23,42,.1); }

Зависание — лёгкая тень или сдвиг. focus-within ловит фокус вложенной ссылки — карточка «реагирует» и при клавиатурной навигации.

7. Согласованность компонентов

одинаковые интервалы: ожидание gap 16–24px внутри карточек;
общие токены размеров/цвета (круг углов, тень);
единый шрифт заголовков/текстов;
повторный вычисли: каждый компонент — отдельный skill.

.card { --radius:12px; --gap:16px;
  border-radius:var(--radius); padding:var(--gap); }

8. Доступность карточек

заголовок карточки — h2/h3 по контексту страницы;
alt у картин короткий и точный, декоративный — пустой;
карточка-ссылка: название читается в ссылке;
контраст текста на фото — подложка или деталь-тень.

<article class="card">
  <img class="card__img" src="banner.png" alt="" aria-hidden="true"/>
  <h3 class="card__title"><a href="/promo">Новинка сезона</a></h3>
</article>

9. Чек-лист карточек

структура article + заголовок + текст + CTA;
выравнивание CTA через margin-top:auto;
изображение object-fit/cover или aspect-ratio;
сетка auto-fill/minmax;
состояния hover + focus-within;
доступные alt и размеры.

Что дальше

Курс завершён.

← Вернуться к курсам