Карточки

Контентные и интерактивные контейнеры

Data Display

Карточка объединяет связанный контент

Карточка нужна только тогда, когда рамка и поверхность помогают увидеть самостоятельную сущность или действие.

Базовая структура

Header, body и footer остаются независимыми смысловыми зонами.

Проект

Новый интерфейс

Краткое описание связанного содержимого карточки.

Конверсия

24,8%

За последние 30 дней

+4,2%
HTMLСтруктура
<article class="ox-card">
  <header class="ox-card-header">
    <h3 class="ox-card-title">Новый интерфейс</h3>
  </header>
  <div class="ox-card-body">...</div>
  <footer class="ox-card-footer">...</footer>
</article>

Интерактивная карточка

Если кликабельна вся поверхность, она должна получать фокус и иметь понятное действие.

Личный кабинет

Вход в OKAUX

или по email

Нет аккаунта?