VibeUI
РусEng
Войти

Типографика

Заголовок секции

Надзаголовок мелким uppercase акцентом, заголовок и подводка приглушённым цветом — заголовочная часть секции как один компонент. Гарнитуры, шкала размера, выравнивание и уровень заголовка (h1–h3) — пропсы; размер заголовка считается от ширины контейнера. Из него собираются секции: FAQ, тарифы, контакты, призывы.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • eyebrow, title, lede — тексты
  • level — h1, h2 или h3
  • size — шкала: sm, md, lg, xl

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Заголовок секции — Надзаголовок мелким uppercase акцентом, заголовок и подводка приглушённым цветом — заголовочная часть секции как один компонент. Гарнитуры, шкала размера, выравнивание и уровень заголовка (h1–h3) — пропсы; размер заголовка считается от ширины контейнера. Из него собираются секции: FAQ, тарифы, контакты, призывы.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/heading-001?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Heading001 eyebrow="Вопросы" title="Коротко о том, как это работает" lede="Если ответа здесь нет — напишите." />

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
title · по умолчанию: Коротко о том, как это работает
Надзаголовок
eyebrow · по умолчанию: Заголовок секции
Размер
size · по умолчанию: md
Выравнивание
align · по умолчанию: start
Уровень
level · по умолчанию: h2
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
titleAccent
titleAccent
lede
lede
display
display

Используется в блоках

Ещё в разделе «Типографика»

Частые вопросы

Как установить компонент «Заголовок секции» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Заголовок секции»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Заголовок секции»?
Можно менять: eyebrow, title, lede — тексты; level — h1, h2 или h3; size — шкала: sm, md, lg, xl. Сохранить как есть: уровень заголовка через level: h1 только у первого экрана, остальные секции — h2, иначе документ теряет структуру; размер в cqi от ширины контейнера, а не от окна: в узкой колонке заголовок ужимается сам; палитру --vibeui-heading-001-* и light-dark(): компонент следует color-scheme окружения.
Компонент «Заголовок секции» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/heading-001.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Компонент самодостаточен: один файл, без зависимостей, палитра в --vibeui-heading-001-*. level задаёт тег заголовка: h1 только для первого экрана, остальные секции — h2. size — шкала clamp в cqi (sm, md, lg, xl), align — start или center. display и font — имена гарнитур для заголовка и остального текста: компонент их не грузит, шрифт подключает страница; пусто — системный гротеск. ledeWidth — ширина подводки в символах. Цвет по умолчанию — currentColor окружения, приглушённый тон подводки считается от него; ink переопределяет.

Теги

  • heading
  • title
  • eyebrow
  • lede
  • section
  • typography
  • text
  • intro
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…