Title
Flexible heading component with typography variants and CSLP support.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
text | string | Yes | - | Text content to display |
as | ElementType | No | 'h1' | HTML element to render as |
variant | TypographyVariant | No | - | Typography variant class |
classes | string | No | - | Additional CSS classes |
$ | CSLPFieldMapping | No | - | CSLP mapping for editable fields |
uppercase | boolean | No | - | Apply uppercase transform (legacy) |
size | 'sm' | 'lg' | No | - | Size variant (legacy) |
theme | 'light' | 'dark' | No | - | Theme variant (legacy) |
weight | 'light' | 'medium' | No | - | Font weight (legacy) |
Typography Variants
| Variant | Description |
|---|---|
'cs-h1-display' | Large display heading |
'h1-standard' | Standard H1 |
'h1-compact' | Compact H1 |
'h1-display-compact' | Compact display H1 |
'cs-h1-header' | Header H1 |
'cs-h1-3xl' | 3XL H1 |
'cs-h2' | H2 heading |
'cs-h3' | H3 heading |
'cs-h4' | H4 heading |
'cs-h5' | H5 heading |
'cs-h6' | H6 heading |
'hero-text' | Hero section text |
'section-heading' | Section heading |
Usage
import Title from '@/components/atoms/Title';
// Basic usage
<Title text="Hello World" as="h1" variant="cs-h1" />
// With CSLP
<Title
text="Editable Title"
as="h2"
variant="cs-h2"
$={cslpData}
/>
// With custom classes
<Title
text="Custom Styled"
variant="cs-h3"
classes="mb-4 text-center"
/>Features
- Flexible element: Can render as any HTML heading element
- Typography variants: Supports all design system typography variants
- CSLP support: Contentstack Live Preview editing
- Class merging: Uses
twMergefor proper class handling - Legacy support: Still supports old size/weight/theme props
Notes
- Uses
twMergefor intelligent class merging - If variant is provided, it takes precedence over legacy props
- Legacy props (size, weight, theme) only apply if no utility classes are detected
- CSLP attributes are applied to the rendered element