# HeadingNode

Text node dành cho tiêu đề. Render qua component `Text` từ `@janbox/storefront-ui`.

## Resolved name

`Heading`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `as` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'div'` | HTML tag (chọn qua inspector) |
| `sizeVariant` | `TypographySizeVariant` | Kích cỡ typography (responsive) |

### `sx` props

```ts
sx?: {
  // typography
  color?: string
  fontStyle?: 'normal' | 'italic'
  fontWeight?: number | string
  textDecorationLine?: 'none' | 'underline' | 'line-through'
  textAlign?: 'left' | 'center' | 'right' | 'justify'
  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'

  // size
  width?: number | string

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { HeadingNode } from '@janbox/storefront-builder';

// H1
<HeadingNode as="h1" sizeVariant="4xl">
  Page Title
</HeadingNode>

// Responsive size
<HeadingNode
  as="h2"
  sizeVariant="2xl"
  md={{ sizeVariant: '4xl' }}
  sx={{ color: '#111111', textAlign: 'center' }}
>
  Section Title
</HeadingNode>

// Dùng div khi không cần semantic heading nhưng muốn style heading
<HeadingNode as="div" sizeVariant="xl" sx={{ fontWeight: 700 }}>
  Display text
</HeadingNode>
```

## Rules

- **Canvas**: no — không chứa node con.
- **Inline editing**: có thể double-click để chỉnh nội dung trong canvas.

## Related nodes

- [`ParagraphNode`](../paragraph/README.md) — dành cho nội dung dạng đoạn văn