SplitHero

two-column hero: headline on the left, image on the right.

Live preview

Ship faster

A reusable block for every campaign.

Install

From your site folder, run:

jprot add SplitHero

That downloads the self-contained component into theme/components/SplitHero.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:

sections: [
  { component: 'SplitHero', title: 'SplitHero' },
]

Use it inside a page

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

:::SplitHero title="Ship faster" subtitle="A reusable block for every campaign." image="https://picsum.photos/seed/a/520/380" linkLabel="Get started" linkUrl="/about"

Props

Prop	Type	Note
`title`	string	the headline
`subtitle`	string	one supporting line
`image`	string	optional right-side photo URL
`kicker`	string	small uppercase line above the title
`linkLabel`	string	primary button text ('' hides it)
`linkUrl`	string	primary button target

↩ Back to all elements