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
Page Title
Section Heading
Subsection
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop size | Type "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | Default value "lg" | Description Font size of the title |
Prop type | Type "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | Default value "h1" | Description HTML heading level (h1-h6) for semantic structure |
Prop color | Type "default" | "muted" | Default value "default" | Description Text color variant |
Prop align | Type "left" | "center" | "right" | Default value "left" | Description Horizontal text alignment |
Prop family | Type "product" | "brand" | Default value "product" | Description Font family variant - product (default) or brand |
Prop as | Type "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | Default value undefined | Description Alternative prop name for type - sets the HTML element type |
Prop className | Type string | Default value undefined | Description Additional CSS class names to apply to the title element |
Quick Start
Use Title for page and section headings:
<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
Dashboard
Overview of your account
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
Main Section
Section content goes here
Subsection
Subsection content
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
Brand Heading
Product Heading
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>
</>
)
}