Hero

Sections hero

Headline, subheadline and a primary call-to-action.

Markup

Drops in as data-pb-block="hero".

html

<section data-pb-block="hero" class="pb-hero" style="padding:5rem 1.5rem;text-align:center;">
  <h1 class="pb-hero__title" style="font-size:2.75rem;margin:0 0 1rem;">Your headline here</h1>
  <p class="pb-hero__subtitle" style="font-size:1.25rem;color:#475569;max-width:40rem;margin:0 auto 2rem;">A short, punchy subheadline that explains the value.</p>
  <a class="pb-hero__cta" href="#" style="display:inline-block;padding:0.85rem 1.75rem;border-radius:0.5rem;background:#4f46e5;color:#fff;text-decoration:none;font-weight:600;">Get started</a>
</section>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="hero" so it imports as a labelled, editable component.