Title

Semantic heading component mapping order={1..6} to typography variants h1..h6 while offering decorative enhancements like underline, afterline, and prefix adornments.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁶⁾

Properties

⁽⁶⁰⁾

Playground

Basic Usage

Default Title usage shows the h2-style heading produced by the component without additional props.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
,
 
Title
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Title
>
Default
 section heading
</Title
>
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Titles
 
default
 to order 
2
,
 making them a natural choice 
for
 section headings
.
        
</Text
>
      
</Block
>
    
</Card
>
  
)
;
}

Heading Levels

Set the order prop to align Title with semantic heading levels from h1 through h6.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Title
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Title
 
order
=
{
1
}
>
Page
 
heading
 
(
order
=
1
)
</Title
>
        
<Title
 
order
=
{
2
}
>
Section
 
heading
 
(
order
=
2
)
</Title
>
        
<Title
 
order
=
{
3
}
>
Subsection
 
heading
 
(
order
=
3
)
</Title
>
        
<Title
 
order
=
{
4
}
>
Fourth
-
level 
heading
 
(
order
=
4
)
</Title
>
        
<Title
 
order
=
{
5
}
>
Fifth
-
level 
heading
 
(
order
=
5
)
</Title
>
        
<Title
 
order
=
{
6
}
>
Sixth
-
level 
heading
 
(
order
=
6
)
</Title
>
      
</Block
>
    
</Card
>
  
)
;
}

Prefix Styles

Enable the prefix prop to add visual markers, switching variants or supplying a custom icon for emphasis.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Icon
,
 
Title
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Title
 prefix
>
Default
 bar prefix
</Title
>
        
<Title
 prefix 
prefixVariant
=
"dot"
>
Dot
 prefix
</Title
>
        
<Title
 prefix 
prefixVariant
=
"bar"
 
prefixSize
=
{
6
}
 
prefixLength
=
{
40
}
 
prefixColor
=
"#6366f1"
>
          
Custom
 bar size and color
        
</Title
>
        
<Title
 
prefix
=
{
<Icon
 
name
=
"star"
 
/>
}
 
prefixGap
=
{
8
}
 
prefixColor
=
"#f59e0b"
>
          
Icon
 prefix with custom color
        
</Title
>
      
</Block
>
    
</Card
>
  
)
;
}

Underlines

Toggle underline and afterline to add emphasis and separation, including custom color and stroke weights.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Title
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Title
 underline
>
Underline
 only
</Title
>
        
<Title
 afterline
>
Afterline
 only
</Title
>
        
<Title
 underline afterline
>
Underline
 with afterline
</Title
>
        
<Title
 underline 
underlineColor
=
"#ff4d4f"
 
underlineStroke
=
{
4
}
>
          
Custom
 underline color and stroke
        
</Title
>
      
</Block
>
    
</Card
>
  
)
;
}

Actions

Pass an action element to align buttons or toggles alongside the heading.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Card
,
 
Title
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Title
 
action
=
{
<Button
 
title
=
"Action"
 
size
=
"sm"
 
/>
}
>
Basic
 with action
</Title
>
        
<Title
 underline 
action
=
{
<Button
 
title
=
"Edit"
 
size
=
"sm"
 
variant
=
"outline"
 
/>
}
>
          
Underline
 with action
        
</Title
>
        
<Title
 afterline 
action
=
{
<Button
 
title
=
"Settings"
 
size
=
"sm"
 
variant
=
"ghost"
 
/>
}
>
          
Afterline
 with action
        
</Title
>
        
<Title
 underline afterline 
action
=
{
<Button
 
title
=
"More"
 
size
=
"sm"
 
/>
}
>
          
Full
 layout with action
        
</Title
>
      
</Block
>
    
</Card
>
  
)
;
}

Combined Accents

Mix prefix, underline, and afterline props to create a primary heading and aligned subsection titles with consistent accents.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
,
 
Title
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Title
          prefix
          underline
          afterline
          
prefixVariant
=
"bar"
          
prefixSize
=
{
6
}
          
prefixLength
=
{
48
}
          
prefixColor
=
"#10b981"
          
underlineStroke
=
{
3
}
        
>
          
Analytics
 overview
        
</Title
>
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Combine
 prefixes
,
 underline
,
 and afterline to create a structured page heading with a strong visual anchor
.
        
</Text
>
        
<Block
>
          
<Title
            
order
=
{
3
}
            prefix
            
prefixVariant
=
"dot"
            
prefixColor
=
"#ef4444"
            underline
            
underlineColor
=
"#ef4444"
            
underlineStroke
=
{
2
}
          
>
            
Active
 users
          
</Title
>
          
<Title
            
order
=
{
3
}
            prefix
            
prefixVariant
=
"dot"
            
prefixColor
=
"#6366f1"
            underline
            
underlineColor
=
"#6366f1"
            
underlineStroke
=
{
2
}
          
>
            
Conversion
 rate
          
</Title
>
        
</Block
>
      
</Block
>
    
</Card
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Title

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap