Текстовые модули с иллюстрациями

В прошлой лекции мы поговорили о том, как из базовых элементов вёрстки собирать текстовые модули — модули с текстом, заголовками, символами и элементами управления. Теперь поговорим о том, как собирать модули с иллюстрациями.

Модули с иллюстрациями мы встречаем постоянно. Самый простой пример — интернет‑магазин.

В старой версии интернет‑магазина Билайна все карточки товаров — это модули с иллюстрациями. В каждом модуле есть иллюстрация телефона и текст с описанием товара:

Лучше всего иллюстрация чувствует себя над текстом, то есть порядок такой: иллюстрация, заголовок, текст. Так лучше потому, что иллюстрация в данной конфигурации не отрывает заголовок от текста. При этом иллюстрация заметнее всего остального в модуле:

В этом модуле я сначала обращаю внимание на иллюстрацию, потом смотрю на заголовок и читаю текст. Ничто не мешает получить информацию последовательно.