Variable ConfigureTitledSectionConst

Overrides the heading level for all children.

TitledSection components nested in children will start with the configured level. Nested TitledSections will continue to use the next appropriate heading level.

Example: Changing the global heading level for your application

If your application is embedded into another site, it should often not use the h1 tag but start with a higher heading level instead. To achieve that, simply wrap your application with <ConfigureTitledSectionProps>. No other code changes are necessary:

<ConfigureTitledSection level={2}>
    <TheRestOfYourApplication />
</ConfigureTitledSection>
Copy

Example: Embedding a widget

Given a <Widget /> (that we cannot easily change) that internally uses TitledSection, this is how we can embed it with a custom heading level. This can be appropriate in some circumstances, for example when the react component tree does not match the DOM tree (portals etc.).

<ConfigureTitledSection level={5}>
    <Widget />
</ConfigureTitledSection>
Copy

The headings used by Widget will start with h5.