Демонстрация работы компонента
component:page-subtitle
Элегантный компонент для добавления стилизованного подзаголовка к основному заголовку страницы (H1).
Особенности:
- Сохраняет оригинальный механизм позиционирования под заголовком.
- Все параметры опциональны. Если не передать их, применятся настройки по умолчанию.
- Полностью настраиваемые цвет, размер шрифта, регистр и ширина декоративной линии.
- Текст и линия выровнены точно по центру.
- Работает "из коробки" на странице самого компонента, показывая демо-версию.
Параметры (Все опциональны!)
[[include component:page-subtitle |subtitle=Текст подзаголовка |color=#666666 |size=16px |font='Fantasque Sans Mono', monospace |transform=none |line-width=25px |bottom=80px |margin=-4em |letter-spacing=1px ]]
subtitle
Основной текст подзаголовка. На странице самого компонента автоматически отобразится демо-текст.
bottom (Важно!)
Параметр работает наоборот: чем больше значение, тем выше поднимается подзаголовок (ближе к заголовку).
По умолчанию: 80px.
Если подзаголовок слишком низко: увеличьте значение (например, 90px или 100px).
Если подзаголовок наезжает на заголовок: уменьшите значение (например, 70px).
margin
Отрицательный отступ, компенсирующий сдвиг от `bottom`, чтобы текст статьи не уехал вниз.
По умолчанию: -4em. Обычно менять не нужно, но если меняете `bottom` — пропорционально усильте/ослабьте `margin`.
color
Цвет текста и декоративной линии. Принимает любые CSS-цвета: #666666, rgb(100,100,100), darkgray.
По умолчанию: #666666.
size и font
size — размер шрифта (например, 16px, 1.2em). По умолчанию: 16px.font — семейство шрифтов. По умолчанию: 'Fantasque Sans Mono', monospace.
transform и letter-spacing
transform — CSS-свойство text-transform (uppercase, lowercase, none). По умолчанию: none.letter-spacing — межбуквенный интервал. По умолчанию: 1px.
line-width
Ширина декоративной черты перед текстом. По умолчанию: 25px.
Результат
Стандартный вид (параметры не переданы):
С кастомными параметрами (uppercase, поднят выше, другой цвет):