Spotlight

Section wrapper with a heading and freeform children content.

Use it to spotlight a key feature, code sample, or visual on a landing page.

Summary

The Spotlight component renders a <section> with a heading and any children you pass. Unlike Features or Stats, it does not impose a grid — you control the inner layout entirely.

Why Use This Component?

• Freeform content — pass any JSX as children (code blocks, images, custom layouts).
• Consistent section wrapper — heading style and spacing match other preset components.
• Preset-aware — typography and surface styling adapt to the active preset.

Usage

import { Spotlight } from '@cbnventures/docusaurus-preset-nova/components';
import CodeBlock from '@theme/CodeBlock';

<Spotlight heading="Quick Setup" surface="alt">
  <CodeBlock language="bash">
    npx --yes @cbnventures/nova@latest scaffold docs docusaurus
  </CodeBlock>
</Spotlight>

Options