headline with a pulsing status pill above it.

Live preview

Available for new projects

Hi, I'm Sam.

Designer & developer crafting calm interfaces.

See the work

Install

From your site folder, run:

Copyjprot add BadgeHero

That downloads the self-contained component into theme/components/BadgeHero.js,

where it is picked up automatically — the same way as any built-in component.

To remove it later, just delete that file.

Use it as a homepage section

Add an entry to the sections: list in jprot.config.js:

Copysections: [
  { component: 'BadgeHero', title: 'BadgeHero' },
]

Use it inside a page

On its own line in any Markdown file, passing the props:

Copy:::BadgeHero badge="Available for new projects" title="Hi, I'm Sam." subtitle="Designer & developer crafting calm interfaces." ctaUrl="/work" ctaLabel="See the work"

Props

Prop	Type	Note
badge	string	pill text above the title
title	string	headline
subtitle	string	supporting line
ctaLabel	string	button text ('' hides it)
ctaUrl	string	button target

↩ Back to all elements