НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Заголовок страницы

Блок в начале страницы: хлебные крошки, заголовок, описание, действия и вкладки. Отдельного компонента для него нет: он собирается из четырёх компонентов и двух токенов отступов.

Стабильный
ОбзорИспользованиеДоступность
Projects Aurora
Aurora A shared workspace for the design team.
Duplicate Share
Overview Files Activity 
<header style="display: flex; flex-direction: column; gap: var(--space-16); inline-size: 100%">
  <tk-breadcrumb>
    <tk-breadcrumb-item href="/projects">Projects</tk-breadcrumb-item>
    <tk-breadcrumb-item>Aurora</tk-breadcrumb-item>
  </tk-breadcrumb>
  <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16)">
    <div style="display: flex; flex-direction: column; gap: var(--space-4)">
      <tk-text as="h2" variant="title-lg">Aurora</tk-text>
      <tk-text color="secondary">A shared workspace for the design team.</tk-text>
    </div>
    <tk-button-group spaced label="Project actions">
      <tk-button>Duplicate</tk-button>
      <tk-button variant="primary">Share</tk-button>
    </tk-button-group>
  </div>
  <tk-tab-bar label="Project views" value="overview">
    <tk-tab value="overview">Overview</tk-tab>
    <tk-tab value="files">Files</tk-tab>
    <tk-tab value="activity">Activity</tk-tab>
  </tk-tab-bar>
</header>

Из чего состоит

Часть Для чего Обязательна
Breadcrumb где находится страница нет, на странице верхнего уровня уберите её
Text заголовок и описание с color="secondary" заголовок — да
Button group с spaced действия страницы нет
Tab bar представления одной и той же страницы нет

Тот же макет на классах:

.page-header { display: flex; flex-direction: column; gap: var(--space-16); }
.page-header__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); }
.page-header__text { display: flex; flex-direction: column; gap: var(--space-4); }

Как отделить от страницы

  • Если заголовок заканчивается панелью вкладок, ничего не добавляйте. Tab bar уже рисует тонкую линию под вкладками.
  • Иначе дайте заголовку нижнюю рамку: border-block-end: 1px solid var(--border-subtle). Не используйте для этого Divider: он разделяет фрагменты содержимого.