Skip to main content

Title

Title component is the used to render headings from h1 to h6. It renders as h2 by default.

import { Title } from "rizzui";

Default

The default style of the Title.

The brown fox jumps over the lazy dog

import { Title } from "rizzui";

export default function App() {
return <Title>The brown fox jumps over the lazy dog</Title>;
}

Typography

You can change style by just changing tag property in Text component.

h1

The brown fox jumps over the lazy dog

h2

The brown fox jumps over the lazy dog

h3

The brown fox jumps over the lazy dog

h4

The brown fox jumps over the lazy dog

h5

The brown fox jumps over the lazy dog

h6

The brown fox jumps over the lazy dog
import { Title } from "rizzui";

export default function App() {
return (
<>
<Title as="h1">The brown fox jumps over the lazy dog</Title>

<Title as="h2">The brown fox jumps over the lazy dog</Title>

<Title as="h3">The brown fox jumps over the lazy dog</Title>

<Title as="h4">The brown fox jumps over the lazy dog</Title>

<Title as="h5">The brown fox jumps over the lazy dog</Title>

<Title as="h6">The brown fox jumps over the lazy dog</Title>
</>
);
}

API Reference


Title Props

Here is the API documentation of the Title component.

PropsTypeDescriptionDefault
asTitleTags"h2"
fontWeightTitleWeightsSet font weight"bold"
classNamestringAdd custom classes for extra style__

Title Tags

type TitleTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

Title Weights

type TitleWeights = "bold" | "normal" | "medium" | "semibold" | "extraBold";