CoreTitle
Примеры использования и документация.
Заголовок раздела или карточки с контролем над визуальной высотой: длинные названия схлопываются до заданного числа строк с многоточием, и вёрстка не ломается от пользовательского контента. Выбор тега (as) позволяет сохранить правильную семантику документа h1–h6, не привязываясь к стилям.
Технические детали: рендерится любым тегом через as (h1–h6 или p, по умолчанию h2). maxLines ограничивает число строк — обрезка многоточием через CSS line-clamp (миксин core-line-clamp, класс-модификатор применяется только при заданном ограничении). flow — переливающийся градиент по тексту: background-clip: text с прозрачным цветом, анимация background-position (9s ease-in-out infinite); цвета настраиваются парой CSS-переменных --title-flow-a/-b (по умолчанию primary/secondary темы) или полной заменой градиента через --title-flow-image. Нижний padding-bottom: 0.2em с компенсирующим отрицательным margin-bottom расширяет область покраски под дескендеры («g», «у», «р») при background-clip: text, не меняя раскладку. Reduced motion — статичный градиент. Содержимое — слот default.
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
h1 · max-lines="2"
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
h2 · max-lines="1"
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
h3 · max-lines="3"
Средний заголовок: на ширине блока занимает две-три строки — лимит строк виден сразу
h4 · max-lines="2" · средний текст
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
h5 · text-lg + max-lines="2" — размер утилитой
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
h6 · max-lines="1"
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
p · без max-lines — не обрезается
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
p · text-sm + max-lines="4"
Средний заголовок: на ширине блока занимает две-три строки — лимит строк виден сразу
h2 · text-2xl — размер из утилит
Очень длинный заголовок, который гарантированно не помещается в отведённое число строк и должен обрезаться многоточием — визуальная проверка line-clamp в компоненте CoreTitle
h3 · text-primary + max-lines="2" — цвет утилитой
Средний заголовок: на ширине блока занимает две-три строки — лимит строк виден сразу
p · text-fg-muted + max-lines="3" — приглушённый
Короткий заголовок
h6 · короткий текст не режется
Средний заголовок: на ширине блока занимает две-три строки — лимит строк виден сразу
h2 · flow — градиент по тексту
Короткий заголовок
h4 · flow — цвета темы
Средний заголовок: на ширине блока занимает две-три строки — лимит строк виден сразу
h3 · flow + кастомная пара
Средний заголовок: на ширине блока занимает две-три строки — лимит строк виден сразу
h4 · flow + радужная картинка