---
title: Title
description: The Title component is a specialized text component designed for headings and titles with proper semantic HTML.
category: Display
related: [Text, Container, Panel, Badge]
commonPatterns: [page-heading, section-heading, card-title]
---

Source: https://clickhouse.design/click-ui/title

# Title

The Title component is a specialized text component designed for headings and titles. It provides a consistent and accessible way to display heading text with proper semantic HTML elements.

## Example

## Props

| Prop      | Type                                            | Default value | Description                                                 |
| --------- | ----------------------------------------------- | ------------- | ----------------------------------------------------------- |
| size      | `"2xl" \| "xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"lg"`        | Font size of the title                                      |
| type      | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`  | `"h1"`        | HTML heading level (h1-h6) for semantic structure           |
| color     | `"default" \| "muted"`                          | `"default"`   | Text color variant                                          |
| align     | `"left" \| "center" \| "right"`                 | `"left"`      | Horizontal text alignment                                   |
| family    | `"product" \| "brand"`                          | `"product"`   | Font family variant - product (default) or brand            |
| as        | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`  | `undefined`   | Alternative prop name for type - sets the HTML element type |
| className | `string`                                        | `undefined`   | Additional CSS class names to apply to the title element    |

```tsx
import { Title } from '@clickhouse/click-ui'

<Title size='lg' type='h1'>Heading</Title>
```

## Quick start

Use Title for page and section headings:

```tsx
<Title size='xl' type='h1'>Page Title</Title>
<Title size='lg' type='h2'>Section</Title>
<Title size='md' type='h3'>Subsection</Title>
```

## Related components

- **Text**: Use Text for body content alongside titles
- **Container**: Use Container to layout titles with content
- **Panel**: Use Title inside Panel for card headings
- **Badge**: Use Badge alongside titles for status indicators

## Common use cases

### Page heading

```tsx
import { Title, Text, Container } from '@clickhouse/click-ui'

function PageHeading() {
return (
  <Container orientation='vertical' gap='sm'>
    <Title size='xl' type='h1'>Page Title</Title>
    <Text size='md' color='muted'>Subtitle</Text>
  </Container>
)
}
```

### Section headings

```tsx
import { Title, Text, Container } from '@clickhouse/click-ui'

function SectionHeadings() {
return (
  <Container orientation='vertical' gap='lg'>
    <Title size='lg' type='h2'>Section</Title>
    <Text>Content</Text>
  </Container>
)
}
```

### Brand vs product titles

```tsx
import { Title } from '@clickhouse/click-ui'

function BrandTitle() {
return (
  <>
    <Title size='xl' family='brand' type='h1'>Brand</Title>
    <Title size='xl' family='product' type='h1'>Product</Title>
  </>
)
}
```

## Variants

### Brand headings

Brand Heading 1
Brand Heading 2
Brand Heading 3
Brand Heading 4
Brand Heading 5
Brand Heading 6

### Product headings

Product Heading 1
Product Heading 2
Product Heading 3
Product Heading 4
Product Heading 5
Product Heading 6