Heading

Heading — семантический примитив заголовка.

Обзор

Heading управляется типографическими токенами темы и шкалой межстрочных интервалов заголовков, зависящей от размера.

Публичные CSS-переменные

Aa

Переменная	Значение	Влияет на
семейство шрифтов заголовкакорень		В этом состоянии изменений не видно
насыщенность заголовка по умолчаниюкорень		В этом состоянии изменений не видно
цвет заголовка по умолчаниюкорень		В этом состоянии изменений не видно
соответствие визуальных размеровшкала размеров	—	В этом состоянии изменений не видно
соответствие межстрочных интервалов заголовковшкала размеров	—	В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Корень использует:

--heading-font-family
--heading-font-weight
--text-color
токены размера шрифта и межстрочного интервала заголовков для конкретного размера

Взаимодействие состояний и вариантов

data-size меняет визуальную шкалу
data-font-weight переопределяет насыщенность заголовка по умолчанию
семантический уровень задаётся через as, а не через CSS

Примеры

Насыщенность шрифта

fontWeight переопределяет значение темы --heading-font-weight для одного заголовка, а размер и межстрочный интервал остаются на шкале.

LTRRTL

emphasized-section-title.tsx · 12 строк

import { Heading } from '@vega-ui/react';

export default function EmphasizedSectionTitle() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-4)' }}>
      <Heading as='h3' size={6} fontWeight={400}>Access control</Heading>
      <Heading as='h3' size={6} fontWeight={500}>Access control</Heading>
      <Heading as='h3' size={6} fontWeight={700}>Access control</Heading>
      <Heading as='h3' size={6} fontWeight={900}>Access control</Heading>
    </div>
  );
}

Чего не переопределять

не используйте произвольные размеры шрифта вне шкалы заголовков
не передавайте иерархию заголовков одним только цветом