Карточки

card
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно создавать карточки

Пример

100%x180

Заголовок карточки

Пример карточки с изображением, заголовком, текстом и кнопкой построенной с помощью модификаторов

Блоки

Пример размещения текста внутри блока карточки

Заголовки, текст и ссылки

Заголовок карточки

Подзаголовок карточки

Пример карточки с заголовком, подзаголовком, текстом и ссылками

Ссылка Еще ссылка

Изображения

Image cap [100%x180]

Пример карточки с изображением и текстом

Списки групп

С помощью модификаторов можно управлять любым содержимым внутри карточки

  • Элемент 1
  • Элемент 2
  • Элемент 3

Полный набор

В карточки можно размещать любой контент

Image cap [100%x180]

Заголовок

Пример карточки с разнообразным содержимым

  • Элемент 1
  • Элемент 2
  • Элемент 3
Ссылка Еще ссылка

Хедер и футер

Добвьте опциональные хедер и/или футер внутри карточки.

Контент сверху

Заголовок

Пример карточки с выделенным текстом сверху

Цитата

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

— Someone famous in Source Title
Контент сверху

Заголовок

Пример текста в карточке

Контент снизу

Изменение размера

У карточек нет определенной начальной ширины, так что они будут 100% в ширину, если не указано иное. Вы можете менять это по мере необходимости с помощью пользовательских CSS, grid classes, grid Sass mixins или утилит

Использование сетки разметки

Используя сетку, оборачивайте карточки в столбцы или строки, если это необходимо.

Заголовок

Пример текста внутри карточки

Заголовок

Пример текста внутри карточки

Использование утилит

Используйте наши доступные утилиты изменения размера, чтобы быстро установить ширину карточки.

Заголовок

Пример текста внутри карточки

Заголовок

Пример текста внутри карточки

Выравнивание текста

Вы можете быстро изменить выравнивание текста на любой карточке — полностью или отдельных ее частей — с помощью наших модификаторов выравивания текста.

Заголовок

Пример текста внутри карточки

Заголовок

Пример текста внутри карточки

Заголовок

Пример текста внутри карточки

Навигация

Добавьте навигацию в хедер или блок карточки с помощью компонентов навигации

Заголовок

Пример текста внутри карточки

Заголовок

Пример текста внутри карточки

Изображения

Карточки включают несколько опций для работы с изображениями. Выберите из добавления "шапки изображения" на обоих концах карты, накладывания изображения с содержимым карты, или просто вложения изображения в карту.

Шапки изображения

Аналогично хедерам и футерам, карточки могут включать верхние и нижние "шапки изображений" - изображения в начале или конце карточки.

100%x180

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад

100%x180

Наложение изображений

Разместите изображение в фон карточки и наложите текст вашей карточки. В зависимости от изображения, вам может или не может понадобиться .card-inverse (смотрите ниже).

100%x270

Заголовок

Пример текста внутри карточки поверх изображения

Обновлено 3 минуты назад

Стили карточек

Карточки включают в себя различные варианты настройки их фона, границ и цвета.

Горизонтальные карточки

100%x270

Заголовок

Пример текста внутри карточки поверх изображения

Обновлено 3 минуты назад

Темы

Заголовок

Пример текста внутри карточки - темная тема

Заголовок

Пример текста внутри карточки - темная тема

Варианты фона

Серая шапка

Заголовок

Пример карточки с выделенным текстом сверху и серым фоном

Красная шапка

Заголовок

Пример карточки с выделенным текстом сверху и красным фоном

Оранжевая шапка

Заголовок

Пример карточки с выделенным текстом сверху и оранжевым фоном

Желтая шапка

Заголовок

Пример карточки с выделенным текстом сверху и желтым фоном

Зеленая шапка

Заголовок

Пример карточки с выделенным текстом сверху и зеленым фоном

Синия шапка

Заголовок

Пример карточки с выделенным текстом сверху и синим фоном

Пурпурная шапка

Заголовок

Пример карточки с выделенным текстом сверху и пурпурным фоном

Розовая шапка

Заголовок

Пример карточки с выделенным текстом сверху и розовым фоном 

<div class="flex flex-col border-1 border-gray-3 radius-1/3 overflow-hidden bg-gray-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-gray-6">
      Серая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и серым фоном
        </p>
    </div>
</div><div class="flex flex-col border-1 border-red-3 radius-1/3 overflow-hidden bg-red-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-red-6">
      Красная шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и красным фоном
        </p>
    </div>
</div><div class="flex flex-col border-1 border-orange-3 radius-1/3 overflow-hidden bg-orange-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-orange-6">
      Оранжевая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и оранжевым фоном
        </p>
    </div>
</div><div class="flex flex-col border-1 border-yellow-3 radius-1/3 overflow-hidden bg-yellow-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-yellow-6">
      Желтая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и желтым фоном
        </p>
    </div>
</div><div class="flex flex-col border-1 border-green-3 radius-1/3 overflow-hidden bg-green-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-green-6">
      Зеленая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и зеленым фоном
        </p>
    </div>
</div><div class="flex flex-col border-1 border-blue-3 radius-1/3 overflow-hidden bg-blue-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-blue-6">
      Синия шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и синим фоном
        </p>
    </div>
</div><div class="flex flex-col border-1 border-purple-3 radius-1/3 overflow-hidden bg-purple-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-purple-6">
      Пурпурная шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и пурпурным фоном
        </p>
    </div>
</div><div class="flex flex-col border-1 border-pink-3 radius-1/3 overflow-hidden bg-pink-9 color-on-surface-inverse">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-pink-6">
      Розовая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и розовым фоном
        </p>
    </div>
</div>

Цвет границ и текста

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и серым текстом и границами

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и красным текстом и границами

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и оранжевым текстом и границами

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и желтым текстом и границами

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и зеленым текстом и границами

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и синим текстом и границами

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и пурпурным текстом и границами

Шапка

Заголовок

Пример карточки с выделенным текстом сверху и розовым текстом и границами 

<div class="flex flex-col border-1 border-gray-1 radius-1/3 overflow-hidden bg-surface-0 color-gray-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Серая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и серым текстом и границами
        </p>
    </div>
</div><div class="flex flex-col border-1 border-red-1 radius-1/3 overflow-hidden bg-surface-0 color-red-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Красная шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и красным текстом и границами
        </p>
    </div>
</div><div class="flex flex-col border-1 border-orange-1 radius-1/3 overflow-hidden bg-surface-0 color-orange-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Оранжевая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и оранжевым текстом и границами
        </p>
    </div>
</div><div class="flex flex-col border-1 border-yellow-1 radius-1/3 overflow-hidden bg-surface-0 color-yellow-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Желтая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и желтым текстом и границами
        </p>
    </div>
</div><div class="flex flex-col border-1 border-green-1 radius-1/3 overflow-hidden bg-surface-0 color-green-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Зеленая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и зеленым текстом и границами
        </p>
    </div>
</div><div class="flex flex-col border-1 border-blue-1 radius-1/3 overflow-hidden bg-surface-0 color-blue-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Синия шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и синим текстом и границами
        </p>
    </div>
</div><div class="flex flex-col border-1 border-purple-1 radius-1/3 overflow-hidden bg-surface-0 color-purple-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Пурпурная шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и пурпурным текстом и границами
        </p>
    </div>
</div><div class="flex flex-col border-1 border-pink-1 radius-1/3 overflow-hidden bg-surface-0 color-pink-9">
    <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 bg-surface-inverse">
      Розовая шапка
    </div>
    <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
        <h4 class="m-top-0 m-bottom-1">
            Заголовок
        </h4>
        <p class="m-bottom-0">
            Пример карточки с выделенным текстом сверху и розовым текстом и границами
        </p>
    </div>
</div>

Сетка для карточек

Группы карточек

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад 

<div class="grid grid-col-3 radius-1/3 border-top-1 border-bottom-1 border-left-1 border-surface-lowest overflow-hidden">
  <div class="flex flex-col border-right-1 border-surface-lowest overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-1">
              Пример текста внутри карточки
          </p>
          <p class="m-bottom-0">
              <small class="text-1/3 color-on-surface-variant">Обновлено 3 минуты назад</small>
          </p>
      </div>
  </div>
<div class="flex flex-col border-right-1 border-surface-lowest overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-1">
              Пример текста внутри карточки
          </p>
          <p class="m-bottom-0">
              <small class="text-1/3 color-on-surface-variant">Обновлено 3 минуты назад</small>
          </p>
      </div>
  </div>
<div class="flex flex-col border-right-1 border-surface-lowest overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-1">
              Пример текста внутри карточки
          </p>
          <p class="m-bottom-0">
              <small class="text-1/3 color-on-surface-variant">Обновлено 3 минуты назад</small>
          </p>
      </div>
  </div>
</div>

При использовании групп карточек с футерами, их содержание будет автоматически выровнено.

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад
Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад
Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Обновлено 3 минуты назад 
<div class="grid grid-col-3 radius-1/3 border-top-1 border-bottom-1 border-left-1 border-surface-lowest overflow-hidden">
  <div class="flex flex-col border-right-1 border-surface-lowest overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
      <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 bg-surface-1 border-top-1 border-surface-lowest">
          <small class="text-1/3 color-on-surface-variant">Обновлено 3 минуты назад</small>
      </div>
  </div>
<div class="flex flex-col border-right-1 border-surface-lowest overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
      <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 bg-surface-1 border-top-1 border-surface-lowest">
          <small class="text-1/3 color-on-surface-variant">Обновлено 3 минуты назад</small>
      </div>
  </div>
<div class="flex flex-col border-right-1 border-surface-lowest overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
      <div class="p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 bg-surface-1 border-top-1 border-surface-lowest">
          <small class="text-1/3 color-on-surface-variant">Обновлено 3 минуты назад</small>
      </div>
  </div>
</div>

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

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Image cap [100%x180]

Заголовок

Пример текста внутри карточки 

<div class="grid grid-col-2">
  <div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
<div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
<div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
<div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
</div>

Как и в случае с группами карточек, футера в колодах автоматически выстраиваются в линию.

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Image cap [100%x180]

Заголовок

Пример текста внутри карточки

Image cap [100%x180]

Заголовок

Пример текста внутри карточки 

<div class="grid grid-col-3">
  <div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
<div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
<div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
<div class="flex flex-col border-1 border-surface-lowest radius-1/3 overflow-hidden bg-surface-0">
      <img class="w-full block grow-none" src="/image/img.jpg" alt="Image cap [100%x180]">
      <div class="flex flex-col items-cross-start grow shrink basis-auto p-1">
          <h4 class="m-top-0 m-bottom-1">
              Заголовок
          </h4>
          <p class="m-bottom-0">
              Пример текста внутри карточки
          </p>
      </div>
  </div>
</div>

Адаптивность

Для установки адаптивности карточек, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью