Акцентный блок

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

Содержимое акцентного блока

Внутри блока могут быть любые стили и содержание:

• Заголовки, абзацы, списки и ссылки. По умолчанию размер шрифта равен <p>. Для короткого текста подходит более крупный шрифт <p.lead>.
• Иконка, картинки или кнопка.
• Серый фон, в исключительных случаях — красный для для более сильного акцента.

Виды акцентных блоков

Существует несколько типов акцентных блоков. Выбирайте вариант осмысленно.

Интересный факт

Блок подходит для выделения интересного факта, термина или описания ситуации. Заголовок не нужен, так как по смыслу блок подчиняется основному тексту.

Ссылка на статью

Блок подходит для связи с другой статьей. Например:

• Ссылка требует комментария.
• Когда ссылка относится не к конкретному абзацу, а ко всему тексту или разделу.

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

Файлы для скачивания

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

Расчеты

Блок подходит для отделения расчёта от текста всей статьи. Заголовок обычно нужен, но необязателен.

Другое

Если не подошел ни один из примеров, возможно, выделение не нужно. Если оно всё-таки требуется, посмотри, как в вашей справочной оформляются подобные блоки, и подбери подходящую иконку.

Врезка на красной подложке

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

Врезка с картинкой

Во врезке можно использовать небольшие картинки — например, формулы. 

Большие картинки: скриншоты, образцы заполнения — вставлять не нужно. Скриншоты и бланки вставляются в статью со своими стилями, а в случае с акцентным блоком они встают не на белый фон, а на подложку. Оформление получается грязным.

Врезка с кнопкой

В общем случае мы рекомендуем использовать ссылки или кнопки-ссылки в акцентных блоках.

Врезка без иконки

Ошибки

Акцентный блок как элемент навигации

Не используйте акцентный блок для навигации по тексту. Акцентный блок предназначен для того, чтобы дать пользователю нужное здесь и сейчас, а не перебрасывать в другую часть страницы.

«Важно!» во врезках

В акцентных блоках мы не пишем «Важно!» словами, если этот смысл уже передается иконкой. В противном случае выходит тавтология.

Слишком много текста

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

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

Таблица внутри акцентного блока

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

Акцентный блок внутри списка

Акцентный блок не знает, куда мы его встраиваем, — в основной текст или в пункт списка. У него стандартные отступы. Поэтому он просто разобьет список.

Несколько акцентных блоков подряд или соседство с другими акцентными элементами

Когда визуальные элементы — рекламные врезки, иллюстрации — стоят слишком близко, блоки перестают быть акцентами и перегружают экран. Страница становится полосатой и «шумной».

Смещение акцента с других СТА

Если в рекламе используете кнопки-ссылки, проследите, чтобы информационный и рекламный фокусы не перебивали друг друга. Убедитесь, что в акцентном блоке вам нужна именно кнопка-ссылка.

Перекрашивание элементов

Иконки размещаются в цветах по умолчанию, а кнопки — в продуктовых цветах.