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.

Props	Type	Description	Default
as	TitleTags		"h2"
fontWeight	TitleWeights	Set font weight	"bold"
className	string	Add custom classes for extra style	__

Title Tags

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

Title Weights

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