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