Heading

<H1>Main Title</H1>
<H2>Section</H2>
<H3>Subsection</H3>

<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>

<H1 className="text-blue-700">Blue heading</H1>
<H2 className="text-center">Centered</H2>
<H3 className="italic">Italic heading</H3>

<Document
  styles={{
    heading1: {
      font: "Georgia",
      size: 28,
      color: "1F4E78",
      bold: true,
    },
    heading2: {
      font: "Georgia",
      size: 22,
      color: "2E75B5",
      bold: true,
    },
  }}
>
  <Section>
    <H1>Uses custom heading1 style</H1>
    <H2>Uses custom heading2 style</H2>
  </Section>
</Document>

<Section>
  <TableOfContents title="Contents" maxLevel={3} />
</Section>

<Section>
  <H1>Introduction</H1>
  <Paragraph>...</Paragraph>

  <H2>Background</H2>
  <Paragraph>...</Paragraph>

  <H3>Details</H3>
  <Paragraph>...</Paragraph>
</Section>

<H1 id="intro">Introduction</H1>

{/* Later in document */}
<Paragraph>
  See <Link href="#intro">Introduction</Link>.
</Paragraph>

<H1>
  Report for <Text className="text-blue-600">Q4 2024</Text>
</H1>