Hero

A Hero component.

Props

announcement

type: object

An announcement banner.

Properties:

• title (string, required): The announcement text
• ctaTitle (string, required): The call-to-action button text
• href (string, required): The URL the announcement links to

title (required)

type: object

The main hero title.

Properties:

• firstPart (string, required): The first part of the title
• highlightedPart (string): The middle part that will be visually highlighted
• secondPart (string): An optional final part of the title

description (required)

type: string

The hero description or subtitle text.

primaryCta (required)

type: object

The primary call-to-action button.

Properties:

• title (string): The button text
• href (string): The URL the button links to

secondaryCta (required)

type: object

The secondary call-to-action button.

Properties:

• title (string): The button text
• href (string): The URL the button links to

Example

import { Hero } from "@dlcastillop/starlight-marketing-components";

<Hero
  announcement={{
    title: "New tool!",
    ctaTitle: "Starlight Page Actions",
    href: "https://starlight-page-actions.dlcastillop.com",
  }}
  title={{
    fistPart: "Components that make",
    highlightedPart: "your docs shine",
  }}
  description="A collection of marketing components designed specifically for Starlight."
  primaryCta={{
    title: "Get Started",
    href: "docs/getting-started",
  }}
  secondaryCta={{
    title: "More developer tools",
    href: "https://dlcastillop.lemonsqueezy.com",
  }}
/>