Title and subtitle display with multiple layout variants and image support.
Simple Variant
The simplest form of the Title component, displaying text without any additional styling.
Example Title
Subtitle goes here
With Emphasis
Add emphasis text above the title for additional context or categorization.
FEATURED
Important Announcement
This is a highlighted section
Image Variant
Horizontal layout with an image alongside the text content.
Alex Thompson
Product Manager at TechCorp
Profile Variant
Centered layout perfect for profile displays with a circular avatar.
Jamie Lee
UX Designer
Cover Variant
Cover layout with a header image area and a profile image with text at the bottom. Perfect for profile headers or detail pages.
Cover Title
Subtitle
Compact Size
All variants support a compact size option for tighter layouts.
Compact Title
Uses less vertical space
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Main title text (required) |
subtitle | string | - | Subtitle text (optional) |
emphasis | string | - | Emphasized text above title (optional) |
imageUrl | string | - | Profile/main image URL (optional) |
coverImageUrl | string | - | Cover header image URL (for cover variant only) |
imageAlt | string | "" | Alt text for profile/main image |
coverImageAlt | string | "" | Alt text for cover header image |
variant | "simple" | "image" | "cover" | "profile" | "simple" | Layout style |
size | "default" | "compact" | "default" | Component size |
imageFill | "fill" | "fit" | "fill" | Image object-fit behavior |
truncate | boolean | false | Truncate text with ellipsis |
className | string | - | Additional CSS classes |