jsp-dsv0.1

Section headerjsp

Eyebrow, heading, lead and actions.

Layout and type
Install
npx shadcn add @jsp/section-header
Import from
@/components/section-header
Guidance
draft · v0.1.0

Examples

Written in jsp-ds token utilities.

Services

Design that ships

Fixed-price engagements, from a two-week audit to a full design system.

Eyebrow, heading, lead and actions, spaced by component tokens.

Questions?

Everything you need to know before we start.

Centred, for a hero or a closing call to action.

Guidance

When to use

  • At the top of a Section: eyebrow, heading, lead and actions, spaced for you.

Rules

  • headingLevel sets the element, headingStyle the look – keep the page's heading order right first.
  • The lead is one or two sentences in body.lead, capped at the prose width.
  • Actions: a primary and at most one secondary.
  • align="center" for heroes and closing calls to action only.

Install

Terminal
npx shadcn add @jsp/section-header
Import
import { SectionHeader } from "@/components/section-header"