Function TitledSection

Automatically manages the level of html headings such as h1 and h2.

Use this component's title property or <SectionHeading /> components in the children of this component instead of manual heading tags. Nested sections will automatically use the correct level for their current location.

Titles are rendered as Chakra Headings by default.

Example: Simple string headings (1, 2 and 3 will be rendered as h1, h2 and h3):

<TitledSection title="1">
    Top level content

    <TitledSection title="2" sectionHeadingProps={...}>
        Nested content

        <TitledSection title="3">
            Deeply nested content
        </TitledSection>
    </TitledSection>
</TitledSection>
Copy

When using using a string for the title prop, you can specify the sectionHeadingProps to customize the properties of the automatically generated heading component.

Example: custom section headings as children

<TitledSection>
   <SectionHeading>Top level heading (H1)</SectionHeading>

   .. Some Content ..

   <TitledSection>
       <SectionHeading>Other Heading (H2)</SectionHeading>

       .. More Content ..
   </TitledSection>

</TitledSection>
Copy

NOTE: You should use exactly one <SectionHeading /> for each <TitledSection />. The SectionHeading can appear anywhere, for example wrapped in other layout components.

Example: custom title rendering

You can also use completely custom components for the title. In this case, you should ensure that you use the SectionHeading component within the title in some place. The section heading does not need to be the immediate child, you can wrap it any way you want.

<TitledSection
    title={
        <SectionHeading size="4xl">Heading</SectionHeading>
    }
>
    Content
</TitledSection>
Copy