Зображення і текст - окремо. Тема знаходиться під картинкою або поруч. Такі картки можуть розташовуватися в колонках або по парам на одному рівні. Замість картинки може використовуватися також іконка. Є широка картка, наприклад, коли потрібно привернути увагу до одного продукту. Вона займає майже всю ширину поля, при цьому зображення знаходиться зліва, а підпис - справа.
Сайт дизайн дуету Piece of Cake
IKRA. Майстерня освітніх проектів
Тільки текст. Гранично лаконічна картка: заголовок і підпис. Цей тип може використовуватися, наприклад, для розділу з тарифами, де потрібно швидко повідомити інформацію, не відволікаючи увагу користувача.
Лендінг дизайнера Dan Tase
Лендінг центру йоги і фітнесу MindBody
Робота з картками на Тільда
Кількість карток в ряду залежить від контенту. Якщо елементів багато і їх значення другорядне, можна розмістити їх на шести картках.
Картка - часто (але не завжди) сама по собі кнопка: натиснув на неї, перейшов на сторінку. Можна ввести одну кнопку СТА (call-to-action - «заклик до дії»), яка дає користувачеві «підказку». Наприклад, напис «дізнатися більше» запрошує клікнути на картку.
Сайт KAFEDRA. Практичні курси для архітекторів
Лендінг проекту LASKA
Атрибут, який приховує потрібні посилання від пошукової індексації. Працює і з Google, і з Яндекс.
Ще пара рад, як працювати з картками
Одна картка - одна ідея. На картці може бути багато різних елементів, але вони все повинні формувати один зрозумілий об'єкт. Це повинен бути цілісний шматок контенту для користувача.
Сайт Bunch of questions. збори історій
Не шкодуйте білого простору. Кожна картка - окремий елемент контенту. Щоб користувач міг добре засвоїти весь контент, варто не скупитися на порожній простір навколо і між картками.
Онлайн магазин Voodooboks
Обмежте розмір контенту. У картці міститься найважливіша інформація. Картка може вести на сторінку з докладною інформацією, але сама повинна відображати тільки суть. Багато інформації в неї просто не поміститься, а контент буде гірше сприйматися.
Лендінг Mazda CX-5
Шаблон Лендінгем на Tilda.cc
Створіть ієрархію всередині картки. Ієрархія контенту в самій картці допомагає привернути увагу користувача. Найважливіший контент розмістіть нагорі картки. Використовуйте роздільники, коли потрібно явно позначити кордон між контентом.
Відштовхуйтеся від завдань сайту і продукту. Від цілей сайту і бізнесу залежить, який контент показати користувачеві. Нам потрібно розташувати елементи каталогу в магазині одягу або зробити картку закликом до броні квитків? Картки під різні цілі будуть відрізнятися.