Карточки как на Медузе: новый важный блок Базиума

Ознакомьтесь с возможностями и попробуйте его прямо сейчас. Добавить блок → Карточки →  MdzCr: Карточки с оглавлением
17.08.2020

Представление начнём с того, что объявим конкурс на его использование. Лучшие 3 внедрения блока наградим книгой по развитию креативного мышления. Печатная версия. Вышлем Почтой России. До 7 октября собираем примеры, а с 7 до 13 выбираем победителей. Скидывать результаты можно в чат Базиума в Телеграме.

Карточки, чтобы рассказывать свои истории
Делитесь информацией, создавая карточки, как на Медузе
1
5 типов карточек
Карточки могут быть 5 типов. Первый: обычная с текстом, фото, видео. Второй: со слайдером. Со списком. С формой. И последний тип карточки — с HTML-кодом.  Сейчас мы покажем каждый из них.
2
Обычная карточка
Показываем все составляющие. Выше вы видите заголовок — обязательный элемент каждой карточки. Он выводится в оглавлении, которое может быть слева или справа. А этот текст — это просто текст. Разумеется, в тексте возможно форматирование жирным и курсивом, перечёркивание и ссылки.
Изображение с подписью
Текстовых полей может быть два. Мы их сделали раздельными, чтобы можно было ставить в разные места карточек. Данные карточки, по сути, являются блочным конструктором внутри блочного конструктора 🔥А внутри карточек элементы тоже можно переставлять вверх-вниз 🖖
Подпись к видео
В карточке может быть примечание, которое выделяется цветом и шрифтом. В примечание может быть вынесена какая-то важная ключевая информация. Тут мы отметим, что данные карточки позволяют описывать услуги, делать публикации в блоге быстро, в соответствии с чёткой логикой. За основу мы взяли карточки Медузы, расширив их функционал
3
Это карточка со слайдером
На карточках со слайдером есть сам слайдер, текст, примечание и кнопка. В слайдер можно поместить смысловые иллюстрации к карточкам, скриншоты отзывов из соцсетей, просто красивые фотографии.
Фотографии можно увеличивать, если данная опция включена в настройках. Также в настройках можно задать пропорции изображений и автоматическое кадрирование.
4
Карточка со списком
Списки могут быть в рамках текстовых блоков, но но отдельный тип карточек позволяется сделать на списке акцент, настроив дизайн так, как нужно вам
В карточке со списком может быть изображение
Заголовок даёт представление, о чём рассказывается в карточке. Заголовок также отображается в боковом меню
Карточки не должны содержать "воды", а ключевую и важную информацию для посетителя
Используйте фотографии и иллюстрации для визуализации текстовой информации
Примечание есть и на карточке со списком. В этом примечании мы отметим, что в настройках дизайна можно выбрать тип маркера
5
Карточка с HTML-кодом
Если у вас есть какая-то нестандартная задача, то можете ставить в карточку любой HTML-код. Это может быть как самописный код, так и код внешних сервисов (гуглокарт, crm-систем и тп)
6
Карточка с формой
В рамках одного набора карточек можно использовать одну форму. 
Форму может сопровождать изображение
Товар добавлен в корзину
Оформить заказ

Смотрите также
от