# Title

> Section headings with scalable sizes and weights.

**URL:** https://inference.sh/docs/agents/widgets/title
**Last updated:** 2026-09-18

---

Section headings with scalable sizes and weights.

## Preview

```
Title sm
Title md
Title lg
Title xl
```

## Usage

```go
node := models.WidgetNode{
    Type:  models.WidgetNodeTypeTitle,
    Value: "Section Title",
    Size:  "lg",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"title"` | Node type | required |
| `value` | `string` | Text content to display | required |
| `size` | `string` | Size token: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `"md"` |
| `weight` | `string` | Font weight: `normal`, `medium`, `semibold`, `bold` | `"medium"` |
| `color` | `string \| ThemeColor` | Text color | `"prose"` |
| `textAlign` | `string` | Horizontal alignment: `start`, `center`, `end` | `"start"` |
| `truncate` | `boolean` | Truncate overflow with ellipsis | `false` |
| `maxLines` | `number` | Limit to maximum lines with line clamp | - |

### Size Reference

| Size | Font Size |
|------|-----------|
| `xs` | 0.875rem (14px) |
| `sm` | 1rem (16px) |
| `md` | 1.125rem (18px) |
| `lg` | 1.25rem (20px) |
| `xl` | 1.5rem (24px) |
| `2xl` | 1.875rem (30px) |
| `3xl` | 2.25rem (36px) |

## Examples

### Basic Title

```go
{Type: models.WidgetNodeTypeTitle, Value: "Welcome"}
```

### Large Title

```go
{Type: models.WidgetNodeTypeTitle, Value: "Dashboard", Size: "xl", Weight: "bold"}
```

### Title with Subtitle

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeTitle, Value: "Settings", Size: "lg"},
        {Type: models.WidgetNodeTypeCaption, Value: "Manage your account preferences"},
    },
}
```

### Centered Title

```go
{Type: models.WidgetNodeTypeTitle, Value: "Confirmation", TextAlign: "center"}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "title",
  value: "Section Title",
  size: "lg",
  weight: "semibold",
}
```

## Best Practices

1. **Use semantic sizes** - `lg` for main headings, `md` for subheadings
2. **Pair with Caption** - Add context with a subtitle
3. **Keep titles concise** - Aim for 2-5 words
4. **Use hierarchy** - Larger titles for more important sections