NurOSNupek

Card

Карточка Nupek - разделение пробелом, сдвигом фона и мягкой тенью, обводка только как крайняя мера.

Card группирует связанный контент - раздел гайда, элемент списка компонентов, карточку в сетке на главной странице.

Foundations

Цвет, типографика, отступы, движение и доступность - базовые токены системы.

Components

Button, Field, Tag, Callout, Code Block и Card как переиспользуемые блоки.

Порядок средств разделения

Card по умолчанию не имеет обводки. Отделение от фона страницы строится в три шага, применяемых по порядку:

  1. Пробел - достаточный отступ вокруг карточки в сетке или списке.
  2. Сдвиг фона - заливка surface на фоне paper (или surface-dark на bg-dark) уже создаёт видимую границу без линии.
  3. Мягкая тень - двухслойная тень с низкой непрозрачностью усиливает отделение на однородном фоне.

Обводка line добавляется только если этих трёх средств не хватило - например, когда карточка стоит на фоне, совпадающем по тону с surface.

Разметка

<a class="card" href="/components/button">
  <h3>Button</h3>
  <p>Кнопка с тремя вариантами и минимальной высотой 44px.</p>
</a>
.card {
  display: block;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  box-shadow: 0 1px 2px rgb(20 33 61 / 0.06), 0 8px 24px rgb(20 33 61 / 0.06);
}