LogoSuchi
Anatomy

Section Header

Header for each Section.

The SectionHeader component serves as a <h2/> element. The text within the SectionHeader is used to generate the corresponding Index Items.

If the header text is lengthy and a shorter title is desired for the Index Item, you can provide an alternative using the title prop.

Example

Using a shorter title to create Index Items

<Suchi.SectionHeader title="Shorter Title">
  A very lengthy title: Maybe a subtitle
</Suchi.SectionHeader>
 
// In this case,
// Suchi recognizes the title as "Shorter Title"
// and uses it to create the Index Item for this Section

Props

PropTypeDefault
children
string
-
title
string
-
className
string
""
style
CSSProperties
{}

Sample Usage

page.tsx
<Suchi.Root accentColor="orangered" className="article_wrapper my-8" style={{ padding: "16px"}}>
  <Suchi.Index />
  <Suchi.Header className="my-4 text-3xl font-bold">Building a NPM Libray</Suchi.Header>
 
  <Suchi.Section className="my-4">

    <Suchi.SectionHeader className="text-2xl">Project Setup</SectionHeader>
    <Suchi.Content>
      <Suchi.Reference/>
    </Suchi.Content>
  <Suchi.Section>
</Suchi.Root>

Previous

Section

Next

Section Content

On this page