Section Intro

Basic

Heading Only

Center Alignment

Eyebrow Color Binding

The eyebrow reads its color from --section-intro-eyebrow-color, which falls back to --accent-default. Override this property at any ancestor element to bind the eyebrow to a live-rewritten brand accent (e.g. a keyed --color-acid that changes at runtime):

.network-section {
  --section-intro-eyebrow-color: var(--color-acid);
}

<section className="network-section">
  <SectionIntro
    eyebrow="Network"
    heading="Everywhere your crowd goes"
  />
</section>

The eyebrow color will track --color-acid live — no prop drilling, no re-render.

Installation

npx visor add section-intro

This copies two files into your project:

• components/ui/section-intro/section-intro.tsx — the component
• components/ui/section-intro/section-intro.module.css — the styles

Usage

import { SectionIntro } from '@/components/ui/section-intro/section-intro';

export default function HomePage() {
  return (
    <>
      <section>
        <SectionIntro
          eyebrow="On the map"
          heading="Built for the world's best venues"
          lede="One platform. Every door."
        />
        {/* ...section content... */}
      </section>
      <section style={{ '--section-intro-eyebrow-color': 'var(--color-acid)' } as React.CSSProperties}>
        <SectionIntro
          eyebrow="Pricing"
          heading="Simple, honest pricing"
          align="center"
        />
        {/* ...section content... */}
      </section>
    </>
  );
}

API Reference

SectionIntroProps

No props data available for “section-intro”.

The component also accepts all standard HTML attributes for the root element (defaults to <header>).

Accessibility

SectionIntro renders the heading slot as an <h2> by default. Adjust the heading level via headingAs to match your page's document outline:

{/* First section on a page — use h1 */}
<SectionIntro headingAs="h1" heading="Welcome to Visor" />

{/* Sub-sections — keep at h2 (default) or h3 */}
<SectionIntro heading="Our approach" />

When to Use

• Opening a marketing section with an eyebrow + display heading pattern
• Replacing hand-rolled eyebrow/heading combos that repeat across homepage sections
• Binding the eyebrow color to a keyed brand accent that changes at runtime
• Center-aligned section intros on pricing, features, and CTA blocks

When Not to Use

• Admin page headers with actions and breadcrumbs — use PageHeader
• In-page content section dividers with meta labels — use SectionHeader
• Plain typographic headings inside body copy — use Heading