Section headings with scalable sizes and weights.
Preview
code
1Title sm2Title md3Title lg4Title xlUsage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeTitle,3 Value: "Section Title",4 Size: "lg",5}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
1{Type: models.WidgetNodeTypeTitle, Value: "Welcome"}Large Title
go
1{Type: models.WidgetNodeTypeTitle, Value: "Dashboard", Size: "xl", Weight: "bold"}Title with Subtitle
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeTitle, Value: "Settings", Size: "lg"},6 {Type: models.WidgetNodeTypeCaption, Value: "Manage your account preferences"},7 },8}Centered Title
go
1{Type: models.WidgetNodeTypeTitle, Value: "Confirmation", TextAlign: "center"}TypeScript
typescript
1const node: WidgetNode = {2 type: "title",3 value: "Section Title",4 size: "lg",5 weight: "semibold",6}Best Practices
- Use semantic sizes -
lgfor main headings,mdfor subheadings - Pair with Caption - Add context with a subtitle
- Keep titles concise - Aim for 2-5 words
- Use hierarchy - Larger titles for more important sections