Skip to main content

Marketing & Content

Hero

Opening section of a marketing page: badge, heading, lead, actions, social proof and an optional visual; the page variant renders the compact heading-and-lead hero for interior pages.

Element
<section>
Module
@basenative/components
Function
renderHero

Quick start

Import the render function and call it from your server template.

import { renderHero } from '@basenative/components';

renderHero({ badge: 'Now in beta', headingText: 'Run the whole shop from one place', leadText: 'Leads, scheduling and payments in a single dashboard.' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Full hero with actions and proof

Badge, heading, lead, actions and the social-proof line; the visual slot sits beside the copy on wide viewports.

Live render

Now in beta

The operating system
for trade contractors

Manage leads, schedule jobs and get paid — from one dashboard.

Built with working contractors.

1,248 Jobs booked +12%
Source
renderHero({
  badge: 'Now in beta',
  heading: 'The operating system<br />for trade contractors',
  leadText: 'Manage leads, schedule jobs and get paid — from one dashboard.',
  actions: '<a href="#start" data-bn="button" data-variant="primary" data-size="lg">Get Started</a>',
  proof: 'Built with working contractors.',
})

Page hero

The compact variant that opens interior pages: heading and lead only.

Live render

Features

Everything you need to run the business.
Source
renderHero({ variant: 'page', headingText: 'Features', leadText: 'Everything you need to run the business.' })

Options

Arguments accepted by renderHero().

renderHero option reference
Option Type Default Description
badge string '' Pill text above the heading (escaped).
heading string '' Heading HTML slot; headingText is the escaped alternative.
lead string '' Lead paragraph HTML slot; leadText is the escaped alternative.
actions string '' Call-to-action HTML (button-styled anchors).
visual string '' Visual HTML beside the copy.
variant 'default' | 'page' 'default' The page variant renders the compact page-hero shape.