# Heading

```ts
import { Heading } from 'cx/widgets';
```

The `Heading` component renders heading elements (`h1` through `h6`) with CxJS data binding support.

```tsx
import { Heading } from "cx/widgets";

export default (
  <div className="flex flex-col items-start gap-1">
    <Heading level={1}>Heading 1</Heading>
    <Heading level={2}>Heading 2</Heading>
    <Heading level={3}>Heading 3</Heading>
    <Heading level={4}>Heading 4</Heading>
    <Heading level={5}>Heading 5</Heading>
    <Heading level={6}>Heading 6</Heading>
  </div>
);

```

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `level` | `number` | Heading level from 1 to 6. Default is `3`. |
| `text` | `string` | Text content of the heading. Supports data binding. |
| `baseClass` | `string` | Base CSS class. Default is `heading`. |
| `className` | `string` | Additional CSS class to apply. |
| `style` | `string \| object` | Additional styles to apply. |