title

Text

Typography primitives for headings and text.

Text Examples

Copy-ready examples for Title and Paragraph typography components.

Title

Heading-like typography helper (visual styles only).

Live preview

Title H1

Title H2

Title H3

Title H4

Title H5

Title H6

import { Title } from "@/_components/text/title/Title";

export default function Example() {
  return (
    <>
      <Title size="h1">Title H1</Title>
      <Title size="h2">Title H2</Title>
      <Title size="h3">Title H3</Title>
      <Title size="h4">Title H4</Title>
      <Title size="h5">Title H5</Title>
      <Title size="h6">Title H6</Title>
    </>
  );
}

Live preview

Bold

Italic

Underline

Bold + italic

All styles combined

import { Title } from "@/_components/text/title/Title";

export default function Example() {
  return (
    <>
      <Title size="h3" bold>Bold</Title>
      <Title size="h4" italic>Italic</Title>
      <Title size="h5" underline>Underline</Title>

      <Title size="h2" bold italic>Bold + italic</Title>
      <Title size="h3" underline italic bold>All styles combined</Title>
    </>
  );
}

Live preview

This is a very long title that should truncate with ellipsis when the container is narrow.

Strong tag inside the title

Fragment with inline elements inside

import { Title } from "@/_components/text/title/Title";

export default function Example() {
  return (
    <>
      <div style={{ width: 320 }}>
        <Title size="h4" truncate>
          This is a very long title that should truncate with ellipsis when the container is narrow.
        </Title>
      </div>

      <Title size="h3"><strong>Strong tag</strong> inside the title</Title>

      <Title size="h4">
        <>
          Fragment with <em>inline elements</em> inside
        </>
      </Title>
    </>
  );
}

Live preview

Title with custom styles

White title on a dark surface

import { Title } from "@/_components/text/title/Title";

export default function Example() {
  return (
    <>
      <Title size="h3" bold customStyles={{ color: "red", marginBottom: 16 }}>
        Title with custom styles
      </Title>

      <Title size="h4" color="white" customStyles={{ background: "#111", padding: 12, borderRadius: 12 }}>
        White title on a dark surface
      </Title>
    </>
  );
}

Paragraph

Body text component (single <p>) with size and emphasis flags.

Live preview

Base / sizes

Default paragraph (md). Sample text to validate color, line-height, and readability.

Large paragraph (body-large). Great for primary blocks inside cards or sections.

Small paragraph (body-small). Useful for notes, metadata, and supporting text.

import Card from "@/_components/card/Card";
import { Title } from "@/_components/text/title/Title";
import { Paragraph } from "@/_components/text/paragraph/Paragraph";

export default function Example() {
  return (
    <Card>
      <Title size="h5">Base / sizes</Title>

      <Paragraph>Default paragraph (md).</Paragraph>
      <Paragraph size="large">Large paragraph (body-large).</Paragraph>
      <Paragraph size="small">Small paragraph (body-small).</Paragraph>
    </Card>
  );
}

Live preview

Decorations

Bold: emphasized text to validate weight and contrast without breaking rhythm.

Italic: good for short quotes or secondary emphasis.

Underline: link-like emphasis and visual checks.

Combined: bold + italic + underline (edge case).

import Card from "@/_components/card/Card";
import { Title } from "@/_components/text/title/Title";
import { Paragraph } from "@/_components/text/paragraph/Paragraph";

export default function Example() {
  return (
    <Card elevated>
      <Title size="h5">Decorations</Title>

      <Paragraph bold>Bold paragraph</Paragraph>
      <Paragraph italic>Italic paragraph</Paragraph>
      <Paragraph underline>Underline paragraph</Paragraph>
      <Paragraph bold italic underline>All decorations combined</Paragraph>
    </Card>
  );
}

Live preview

Truncate

This is an extremely long paragraph designed to force single-line truncation and validate the ellipsis behavior without weird overflow or line breaks.

Same truncate inside a narrow container to validate real layout behavior.

import Card from "@/packages/ui/src/_components/card/Card";
import { Title } from "@/packages/ui/src/_components/text/title/Title";
import { Paragraph } from "@/packages/ui/src/_components/text/paragraph/Paragraph";

export default function Example() {
  return (
    <Card outlined>
      <Title size="h5">Truncate</Title>

      <Paragraph truncate>
        This is an extremely long paragraph designed to force single-line truncation and validate the ellipsis behavior.
      </Paragraph>

      <div style={{ width: 260 }}>
        <Paragraph truncate>Same truncate inside a narrow container.</Paragraph>
      </div>
    </Card>
  );
}

Live preview

Tonal card

Body-md text to validate contrast on tonal surfaces. It should feel comfortable and consistent with titles.

Note (sm): secondary description to check typographic hierarchy.

Elevated + outlined

Testing body-lg inside elevated + outlined to see shadow + border + typography together.

Body-md: border should not muddy the contrast of the content.

Elevated + tonal

Body-md on tonal with elevation. Color/weight issues show up quickly here.

A short bold line to check if it “shouts” too much on tonal backgrounds.

Outlined + tonal

Body-sm: a good case to validate that text doesn’t look washed out on soft backgrounds.

Underline check: make sure underline doesn’t touch glyphs too closely.

Elevated + outlined + tonal (edge)

Edge case: lg + bold to verify it doesn’t look too heavy with many styles at once.

Italic to validate rendering and antialiasing on toned surfaces.

Real content

The goal is to simulate a real reading block and validate vertical rhythm, spacing, and consistency with headings.

Second paragraph to check visual separation between blocks. Control spacing from the container (grid/gap) or external styles.

Footer (sm): “Updated 2 days ago · 3 min read”.

import Card from "@/packages/ui/src/_components/card/Card";
import { Title } from "@/packages/ui/src/_components/text/title/Title";
import { Paragraph } from "@/packages/ui/src/_components/text/paragraph/Paragraph";

export default function Example() {
  return (
    <section style={{ display: "grid", gap: 24, maxWidth: 900 }}>
      <Card tonal>
        <Title size="h4">Tonal card</Title>
        <Paragraph>Body-md text to validate contrast on tonal surfaces.</Paragraph>
        <Paragraph size="small">Note (sm): secondary description.</Paragraph>
      </Card>

      <Card elevated>
        <Title size="h4">Real content</Title>
        <Paragraph>First paragraph…</Paragraph>
        <Paragraph>Second paragraph…</Paragraph>
        <Paragraph size="small">Footer (sm): “Updated 2 days ago · 3 min read”.</Paragraph>
      </Card>
    </section>
  );
}

On this page

Title Props

Title — Props
Prop	Type	Required	Default	Description
children	string \| number \| React.ReactNode	No	—	Content to render inside the title.
size	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	No	undefined	Visual size class (does not change the underlying HTML element).
color	"black" \| "white"	No	"black"	Text color tone mapped to classes.
bold	boolean	No	false	Applies bold styling.
italic	boolean	No	false	Applies italic styling.
underline	boolean	No	false	Applies underline styling.
truncate	boolean	No	false	Enables single-line truncation via CSS (ellipsis).
customStyles	React.CSSProperties	No	{}	Inline styles applied to the root `<p>` element.
className	string	No	—	Appended to the root class list.

Paragraph Props

Paragraph — Props
Prop	Type	Required	Default	Description
children	string \| number \| React.ReactNode	No	—	Paragraph content.
size	"small" \| "medium" \| "large"	No	undefined	Adds the paragraph size class (sm/md/lg).
color	"black" \| "white"	No	"black"	Text color tone mapped to classes.
bold	boolean	No	false	Applies bold styling (shared title emphasis class).
italic	boolean	No	false	Applies italic styling (shared title emphasis class).
underline	boolean	No	false	Applies underline styling (shared title emphasis class).
truncate	boolean	No	false	Enables single-line truncation via CSS (ellipsis).
customStyles	React.CSSProperties	No	{}	Inline styles applied to the `<p>`.
className	string	No	—	Appended to the root class list.