Стайл-гайд статьи — двенадцать способов оформить мысль и каждый со своим назначением
Эта страница — живая референс-копия для редакции. Внутри одной статьи показаны все блоки, которые редакция использует: pull quote, обычная цитата, врезки трёх типов, спецификации, списки, чек-листы, картинка с подписью, галерея, CTA, сноски и карточка автора. Каждый блок сопровождён короткой инструкцией — когда его использовать, а когда лучше обойтись обычным абзацем.
Все блоки ниже работают на единой системе токенов: main.css уже подключён, дополнительных стилей не требуется. Если в новой статье нужен блок, которого здесь нет — это сигнал, что система должна расшириться, а не редактор сделает разовое решение в инлайне.
Pull quote — крупная цитата-врезка
Pull quote ставят, когда хочется задержать читателя на короткой плотной мысли — формулировке инженера, выдержке из норматива, фразе из интервью. Это не цитирование в строгом смысле, а композиционный приём: разбить ритм длинных абзацев и дать глазу место отдохнуть.
Pull quote — это всегда мысль автора, выделенная как самая важная на странице. Если её можно убрать, не теряя смысла, — значит, это не pull quote, а просто украшение. Редакция ЭнергоАльянса
Когда применять: один pull quote на длинную статью (от 800 слов). Текст до 25 слов, не дублирует соседний абзац. Когда нет: на коротких новостях, в гайдах-чек-листах, чаще одного на разворот.
Обычная цитата
Когда нужно процитировать ГОСТ, фразу заказчика или фрагмент паспорта — используют обычную цитату. Она читается как нормальный абзац, но визуально отделена синим штрихом и подложкой.
«Дымосос центробежный одностороннего всасывания серии ДН предназначен для отсоса дымовых газов из топок котлов производительностью пара от 2,5 до 75 тонн в час и водогрейных котлов мощностью от 4 до 100 МВт».
ТУ 4861-008-2014 — паспорт серии ДН
Когда применять: прямые цитаты (с автором или источником), выдержки из нормативов, отрывки из писем заказчика. Когда нет: для авторских мыслей — это pull quote.
Врезка-предупреждение
Когда что-то реально может пойти не так — оборудование выйдет из строя, нарушится норматив, аппарат не впишется в существующий тракт — это пометка предупреждения.
Внимание: типовое исполнение не закрывает
Стандартная серия ДН рассчитана на запылённость до 2 г/м³. Если фактический показатель выше — нужно либо предварительное обеспыливание циклоном, либо ДН-ГМ с противоизносной защитой. Без замены аппарат изнашивается за половину сезона.
Когда применять: риск поломки, превышение норматива, ошибка проекта. Заголовок — конкретное предупреждение, не «Важно!». Когда нет: для очевидных вещей. Если предупреждение можно заменить обычным абзацем — заменяйте.
TL;DR / итог раздела
Тёмная плашка с кратким выжимом. Ставят в начале большой статьи или в конце сложного раздела — для тех, кто читает по диагонали.
Коротко по разделу
В длинных материалах TL;DR в начале или в конце раздела помогает читателю, который сканирует, а не читает. Главное правило — TL;DR пишется последним, когда основной текст уже готов.
Когда применять: вступление к статье от 1500 слов; конец длинного раздела; ключевая мысль гайда. Когда нет: в новостях и коротких заметках — там TL;DR сам становится статьёй.
Врезка-факт
Лёгкая голубая подложка для дополнения, без которого статья прожить может, но с которым становится содержательнее.
Из практики инженерного отдела
За 2025 год на заводе пересмотрели 14 опросных листов. После пересборки время от заявки до КП сократилось в среднем с 2,1 до 1,3 рабочих дней — за счёт сокращения уточняющих звонков.
Когда применять: цифры с источником, любопытная статистика, выдержка из практики. Когда нет: если факт критичен — это уже не factbox, а полноценный раздел.
Спецификации — компактная таблица параметров
Когда в тексте идёт ряд числовых параметров — лучше вынести их в отдельную мини-таблицу. Читается за полсекунды, удобно сравнивать.
| Производительность | 3,4–44 тыс. м³/ч |
|---|---|
| Температура газов | до 200 °C |
| Запылённость | до 2 г/м³ |
| Направление вращения | правое или левое |
| Двигатель | 5,5–160 кВт |
Когда применять: 3–7 параметров одного объекта, ключевые показатели серии. Когда нет: сравнение нескольких серий (это полноценная таблица в .specs-shell); один параметр — оставьте абзацем.
Списки — нумерованные и маркированные
Маркированный список — когда порядок не важен. Нумерованный — когда читатель должен выполнить шаги в определённой последовательности.
Маркированный (порядок не важен):
- состав отходящих газов;
- температура на входе в скруббер;
- запылённость и фракционный состав;
- требуемая концентрация на выбросе.
Нумерованный (последовательность шагов):
- Заполнить опросный лист серии.
- Приложить фото или эскиз существующего газохода.
- Отправить заявку через форму или почтой.
- Получить расчёт серии и КП в течение рабочего дня.
Когда применять: 3–7 пунктов. Каждая строка — самостоятельная мысль. Когда нет: 2 пункта — оставьте абзацем; больше 7 — разбивайте на подразделы.
Чек-лист — список с галочками
Когда хочется, чтобы читатель буквально прошёлся по пунктам и проверил себя. Визуально отличается от обычного списка — каждая строка с готовой галочкой.
- Передан расход газов в м³/ч при рабочих условиях.
- Указана температура на входе в скруббер, °C.
- Замерена запылённость и фракция пыли.
- Передан состав газа по компонентам SO₂, NOₓ, HCl.
- Указана требуемая концентрация на выбросе.
- Приложен эскиз привязки к существующему газоходу.
- Уточнено качество орошающей воды.
А если эти же пункты — «что ещё предстоит сделать», используется модификатор .is-todo с пустыми чекбоксами:
- Согласовать сроки шеф-монтажа с пусконаладочной бригадой.
- Передать на завод фактическое разрежение в подходе к газоходу.
- Проверить требования регионального надзора по выбросам.
Когда применять: «что должно быть в заявке», «что проверить перед запуском», «итоговая проверка». Когда нет: простой перечень — обычный <ul>.
Картинка с подписью / figure
Одиночное изображение с заметной подписью. На macOS-фото со стройки, схеме обвязки, графике зависимости.
Когда применять: один значимый кадр или схема. Подпись с пометкой «Рис. N» и кратким описанием. Когда нет: декоративные «иллюстрации» без смыслового слоя — лучше совсем убрать.
Галерея — 2–3 кадра в ряд
Когда нужно показать процесс или сравнение в нескольких ракурсах.
Когда применять: ровно три кадра одной серии, шаги процесса, сравнение состояний. Когда нет: один кадр — это <figure>; больше трёх — отдельная страница галереи.
Кнопка-CTA внутри статьи
Тёмная плашка с короткой формулировкой задачи и одной кнопкой. Ставится в смысловом месте — где у читателя естественным образом возникает желание заказать расчёт.
Готовы прислать параметры?
Опросный лист + замеры — на расчёт серии и КП у инженера уходит один рабочий день.
Когда применять: после раздела «как подобрать», «что приложить», «типовые ошибки». Когда нет: в начале статьи, два CTA подряд, в коротких новостях.
Сноски и ссылки на нормативные документы
Когда в тексте упоминается ГОСТ, ТУ, СНиП или конкретный замер — оформляется сноска с номером в верхнем индексе и блоком с расшифровкой в конце статьи.
Например, балансировка рабочих колёс серии ДН выполняется по нормам ISO 21940-111 на собственной балансировочной машине. Степень очистки скруббера серии ПВ замеряется по методике ГОСТ 17.2.4.06-902.
Источники
Когда применять: нормативная база, технические измерения, любые внешние источники. Когда нет: вместо ссылки достаточно «по нашему опыту» — это не сноска, а обычный текст.
Карточка автора / эксперта
В конце большой статьи — короткий блок «кто это написал». Авторитет через конкретику: должность, опыт работы по серии, что автор делает на заводе.
Когда применять: авторские статьи, большие технические разборы, экспертные интервью. Когда нет: новости (автором считается «инженерный отдел»), переводы, гайды без личного авторства.
Итог
Тринадцать блоков — это весь инструментарий редакции. Если в новой статье потребуется блок, которого здесь нет, — обсуждать с дизайнером и добавлять в editorial.css, а не делать одноразовое решение в инлайне. Любая инлайн-стилизация → технический долг через два месяца.