Title
The title component is used to display a heading.
Exploring the Mysteries of the Night Sky.
Usage
import { Title } from "@newfold/ui-component-library";
<Title>Exploring the Mysteries of the Night Sky.</Title>
Title As
The as prop allows you to change the element type of the title component.
h1 (default): Exploring the Mysteries of the Night Sky.
h2: Exploring the Mysteries of the Night Sky.
h3: Exploring the Mysteries of the Night Sky.
h4: Exploring the Mysteries of the Night Sky.
h5: Exploring the Mysteries of the Night Sky.
h6: Exploring the Mysteries of the Night Sky.
span: Exploring the Mysteries of the Night Sky.div: Exploring the Mysteries of the Night Sky.
<Title>h1 (default): Exploring the Mysteries of the Night Sky.</Title>
<Title as="h2">h2: Exploring the Mysteries of the Night Sky.</Title>
<Title as="h3">h3: Exploring the Mysteries of the Night Sky.</Title>
<Title as="h4">h4: Exploring the Mysteries of the Night Sky.</Title>
<Title as="h5">h5: Exploring the Mysteries of the Night Sky.</Title>
<Title as="h6">h6: Exploring the Mysteries of the Night Sky.</Title>
<Title as="span">span: Exploring the Mysteries of the Night Sky.</Title>
<Title as="div">div: Exploring the Mysteries of the Night Sky.</Title>
Title Sizes
The size prop allows you to change the size of the title component.
There are 5 sizes available: 1, 2, 3, 4 and 5.
Size 1: Exploring the Mysteries of the Night Sky.
Size 2: Exploring the Mysteries of the Night Sky.
Size 3: Exploring the Mysteries of the Night Sky.
Size 4: Exploring the Mysteries of the Night Sky.
Size 5: Exploring the Mysteries of the Night Sky.
<Title size="1">Size 1: Exploring the Mysteries of the Night Sky.</Title>
<Title size="2">Size 2: Exploring the Mysteries of the Night Sky.</Title>
<Title size="3">Size 3: Exploring the Mysteries of the Night Sky.</Title>
<Title size="4">Size 4: Exploring the Mysteries of the Night Sky.</Title>
<Title size="5">Size 5: Exploring the Mysteries of the Night Sky.</Title>
info
If you choose to not pass a size prop, the heading size
will be inherted from the title element or the as prop.
Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| children* | node | | The content of the title. | - |
| as | h1 | h2 | h3 | h4 | h5 | h6 | span | | The HTML element to render. | h1 |
| size | 1 | 2 | 3 | 4 | 5 | | The size of the title. | - |
| className | string | | - | - |