Skip to main content
Hero blocks render the top-of-page section of a landing page. All 14 variants share the same _type naming convention and are auto-discovered by block-registry.ts.

​
Variants

hero-1

Centered layout: badge link + headline prose + two CTA buttons + full-width image below.

hero-2

Split layout: headline and actions on the left, media on the right.

hero-3

Minimal centered layout with headline and actions, no image.

hero-4

Centered layout with background image fill and overlaid text.

hero-5

Split layout with stacked stat items alongside the headline.

hero-6

Centered layout with logo cloud row beneath the CTA buttons.

hero-7

Split layout with a ratings/social proof item embedded in the content area.

hero-8

Full-bleed video background with centered headline overlay.

hero-9

Centered layout with feature icon tiles below the CTA.

hero-10

Split layout with a feature checklist alongside the prose.

hero-11

Centered layout with a floating card testimonial element.

hero-12

Split layout with avatar group and rating social proof.

hero-13

Minimal split layout with a single prominent CTA button.

hero-14

Centered layout with a marquee/scrolling image strip below.

​
Sanity _type names

Each variant’s Sanity block type matches the filename exactly: 
hero-1.astro  →  _type: "hero-1"
hero-2.astro  →  _type: "hero-2"
...and so on through hero-14

​
Props interface

All hero variants derive from the same base pattern. hero-1.astro is the canonical reference: 
// astro-app/src/components/blocks/hero-1.astro
interface Props {
  class?: string
  id?: string
  link?: {
    text?: string
    href?: string
    icon?: string
    target?: string
  }
  links?: {
    text?: string
    href?: string
    icon?: string
    target?: string
  }[]
  image?: {
    src: string
    alt: string
  }
}
​
class
string
Additional CSS classes forwarded to the root <Section> element.
​
id
string
HTML id attribute on the root element, used for anchor links.
​
link
object
Badge/pill link rendered above the headline. Accepts text, href, icon (Lucide/Iconify name), and target.
​
links
object[]
Array of CTA buttons rendered in the section actions row. The first item uses the default button variant; subsequent items use secondary. Each object accepts text, href, icon, and target.
​
image
object
Hero image rendered in SectionMedia. Requires src (URL or path) and alt (descriptive text). Served with responsive sizes via the fulldev/ui <Image> primitive.
Headline copy and subheading are passed through the default <slot /> as rich text, not as props.

​
Storybook story

The hero-1 story exports demo args that match the Props interface above: 
// astro-app/src/components/blocks/hero-1.stories.ts
export const Default = {
  args: {
    link: {
      text: "New Feature",
      href: "#"
    },
    links: [
      { text: "Get Started", href: "#" },
      { text: "Learn More", href: "#" }
    ],
    image: {
      src: "https://placehold.co/800x400",
      alt: "Placeholder image"
    }
  }
}
Each hero variant (hero-2 through hero-14) has its own story in the same directory under the Blocks/Hero/ Storybook group.

​
Installation

Install variants individually: 
npx shadcn@latest add @fulldev/hero-1
npx shadcn@latest add @fulldev/hero-2
# ...repeat for each variant needed
Or install all 14 at once: 
for i in $(seq 1 14); do npx shadcn@latest add @fulldev/hero-$i; done
All hero blocks are already installed in this repo. Run npm run storybook and open the Blocks → Hero group to compare layouts before choosing a variant for a page.

Build docs developers (and LLMs) love

Get started for freeTalk to us