Heading

Heading is the semantic heading primitive.

Overview

Heading is driven by theme typography tokens and a size-specific heading line-height scale.

Public CSS Variables

Aa

Variable	Value	Affects
heading font familyroot		No visible change in this state
default heading weightroot		No visible change in this state
default heading colorroot		No visible change in this state
visual size mappingsize scale	—	No visible change in this state
heading line-height mappingsize scale	—	No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root consumes:

--heading-font-family
--heading-font-weight
--text-color
size-specific font-size and heading line-height tokens

State And Variant Interaction

data-size changes the visual scale
data-font-weight overrides the default heading weight
semantic level is controlled by as, not by CSS

Examples

Font weight

fontWeight overrides the theme default --heading-font-weight for one heading while the size and line height stay on the scale.

LTRRTL

emphasized-section-title.tsx · 12 lines

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>
  );
}

Do Not Override

using arbitrary font sizes outside the heading scale
relying on color alone to communicate heading hierarchy