Hero Component

A prominent landing section with title, tagline, and call-to-action buttons.

Primary Action Secondary Action Minimal Link

---
hero:
  title: Hero Component
  tagline: A prominent landing section with title, tagline, and call-to-action buttons.
  actions:
    - text: Primary Action
      link: /docs/reference/kitchen-sink/getting-started/
      variant: primary
    - text: Secondary Action
      link: /docs/reference/
      variant: secondary
    - text: Minimal Link
      link: https://example.com
      variant: minimal
---

View Code

Overview

The Hero component creates a landing page section at the top of any documentation page. It is controlled entirely through frontmatter in your MDX files.

DownloadHero

The DownloadHero component renders a set of download buttons with automatic platform detection. It detects the user's OS and highlights the matching download as a primary button.

My Cross-Platform App

Available on every platform. Download now or try the web version.

Download for Mac Download for Windows Download for Linux Web App

All download options

import { Hero } from '@qwik-docs/components/qwik/Hero'

<Hero
  title="My Desktop App"
  tagline="Available on every platform."
  downloads={[
    { href: '/download/mac', label: 'Download for Mac', platform: 'mac', icon: 'apple' },
    { href: '/download/win', label: 'Download for Windows', platform: 'windows', icon: 'windows' },
    { href: '/download/linux', label: 'Download for Linux', platform: 'linux', icon: 'linux' },
    { href: '/app', label: 'Web App', icon: 'globe' },
    { href: '/appstore', label: 'App Store', platform: 'ios', icon: 'apple', iconOnly: true },
    { href: '/play', label: 'Google Play', platform: 'android', icon: 'googlePlayColor', iconOnly: true },
    { href: '/cli', label: 'Terminal', icon: 'terminal', iconOnly: true },
  ]}
  allDownloadsLink="/downloads"
/>

View Code

Download Option Fields

Field	Type	Description
`href`	`string`	Download URL
`label`	`string`	Button text
`platform`	`string`	Platform identifier: `mac`, `windows`, `linux`, `ios`, `android`
`icon`	`string`	Icon name from the icon set
`iconOnly`	`boolean`	Show only the icon, no text label

Platform Detection

The component automatically detects the user's platform from their browser and highlights the matching download as a primary button. Downloads without a matching platform or without a platform prop render as secondary buttons. Icon-only buttons always render as secondary.

Frontmatter Configuration

---
hero:
  title: My Page Title
  tagline: A short description of this page
  actions:
    - text: Get Started
      link: /docs/reference/kitchen-sink/getting-started/
      variant: primary
    - text: Learn More
      link: /docs/reference/
      variant: secondary
    - text: GitHub
      link: https://github.com/example
      variant: minimal
---

Hero Props

Prop	Type	Description
`title`	`string`	Large heading text
`tagline`	`string`	Subtitle text below the title
`actions`	`HeroAction[]`	Array of call-to-action buttons
`downloads`	`DownloadOption[]`	Array of download links with platform auto-detection
`allDownloadsLink`	`string`	URL for "All download options" link
`allDownloadsText`	`string`	Custom text for the all-downloads link
`imageSrc`	`string`	URL of a hero image
`imageAlt`	`string`	Alt text for the hero image
`rawHtml`	`string`	Raw HTML to inject into the hero

Action Variants

Each action button supports three variants:

primary — Filled button with accent color
secondary — Outlined button
minimal — Text-only link with arrow

Usage Notes

The hero replaces the normal page title when present
Actions render as links styled as buttons
The hero section is excluded from the table of contents
Heroes are rendered by the Page component automatically when hero frontmatter is detected