Homecomponentsinformational
Heading
A marker to help communicate content of the screen.
Use Heading to display titles and subtitles.
Additional Services
DieticianLevel
Use the level property to set the size of the heading.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Weight
Use the weight property to set the heading thickness.
Level 1 and Strong
Level 1 and Weak
Level 2 and Strong
Level 2 and Weak
Level 3 and Strong
Level 3 and Weak
Level 4 and Strong
Level 4 and Weak
Level 5 and Strong
Level 5 and Weak
Level 6 and Strong
Level 6 and Weak
Custom semantics
By default, the semantic heading level matches the visual heading level, e.g.
<Heading level="2"> will render an h2 element. If you need the semantics
to be different from the visuals, you can provide the desired HTML tag via the
as property.
This looks like an H3, but it's actually an H4.
Alignment
Use the align property to align the heading horizontally.
Align start
Align center
Align end
Truncation
Use the truncate property to truncate the heading text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus magna at velit dapibus, id dapibus enim pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text transformation
Use the transform property to transform the casing of the heading text.
This is uppercase
This is lowercase
This is capitalized
Examples
Service description
A typical use of Heading is to show the service description.
Our dentists Services
Dental check-up
Dental checkups are essential for a healthy smile.Dental care
The latest techniques can treat missing or damaged teeth, gum disease and all the problems that cause you discomfort or anxiety.Aesthetic dentistry
A smile is worth a thousand words.API
level
Required
1
2
3
4
5
6
children
Required
ReactNode
weight
strong
weak
as
span
h1
h2
h3
h4
h5
h6
p
align
truncate
true
false
color
inherit
white
dark
subdued
transform
none
capitalize
lowercase
uppercase
data
DataAttributeMap
itemID
string
itemProp
string
itemRef
string
itemScope
true
false
itemType
string