component:faq-block
Превращает стандартные раскрывающиеся секции в аккуратные блоки «вопрос — ответ».
- Плавное раскрытие ответа и симметричный переворот стрелки в обе стороны.
- Шапка с акцентной полосой; свёрнутая и развёрнутая шапки выровнены идеально.
- Цвета по умолчанию из темы — работает и в светлой, и в тёмной теме.
- Настраиваются акцент, скругление, толщина полосы, отступы и цвета шапки/тела.
- Совместим со старым синтаксисом:
[[include component:faq-block]]без параметров работает как раньше.
Живой пример
Варианты оформления
Использование
Один инклуд вверху страницы, дальше оборачивайте контент в секции:
[[include component:faq-block]]
[[collapsible show="Ваш вопрос" hide="Ваш вопрос"]]
Ваш ответ
[[/collapsible]]
Примеры
Свой акцент, скругление и толстая полоса:
[[include component:faq-block
|accent=#b33939
|radius=6px
|bar-width=6px
]]
Полностью свои цвета:
[[include component:faq-block
|accent=#2e8b57
|header-bg=#1e1810
|header-color=#e8e0d0
|content-bg=#f3ede0
|content-color=#333333
]]
accent / radius
accent — акцентный цвет: левая полоса, стрелка и рамка фокуса. По умолчанию — акцент темы (—bright-accent). Пример: accent=#b33939.radius — скругление углов блока. По умолчанию 4px. Пример: radius=6px.
bar-width / gap
bar-width — толщина акцентной полосы слева. По умолчанию 4px; bar-width=0 убирает её. Пример: bar-width=6px.gap — вертикальный отступ между блоками. По умолчанию 0.6rem. Пример: gap=1rem.
header-bg / header-color
Фон и цвет текста шапки (вопроса). По умолчанию — из темы. Примеры: header-bg=#1e1810, header-color=#e8e0d0.
content-bg / content-color
Фон и цвет текста тела (ответа). По умолчанию — из темы. Примеры: content-bg=#f3ede0, content-color=#333333.