# Hero Centered

> Render a centered hero section for direct landing pages.

Canonical HTML: https://press.varavel.com/docs/shortcodes/hero-centered/
Markdown: https://press.varavel.com/docs/shortcodes/hero-centered/index.md

`hero_centered` renders a focused hero with announcement, heading, description, actions, and caption.

## When to Use

Use it when the page needs a clean, direct opening without a visual panel. It is best for simple product pages, docs home pages, and compact launch pages.

## Usage

```markdown
{{/* hero_centered(
title="Build faster with VaraPress",
description="Compose landing pages directly in Markdown.",
action_1_text="Get started",
action_1_url="/docs"
) */}}
```

## Live Example

{{ hero_centered(
container="md",
announcement="Shortcodes included",
announcement_url="/docs/shortcodes/",
title="Build faster with VaraPress",
description="Compose landing pages directly in Markdown.",
action_1_text="Get started",
action_1_url="/docs",
action_2_text="View reference",
action_2_url="/docs/shortcodes/"
) }}

## Parameters

| Parameter          | Description                                  |
| ------------------ | -------------------------------------------- |
| `container`        | Inner content width for the hero.            |
| `title`            | Main hero heading. Supports HTML.            |
| `description`      | Supporting hero copy. Supports HTML.         |
| `announcement`     | Optional pill link text above the heading.   |
| `announcement_url` | URL for the announcement link.               |
| `action_1_text`    | Primary action label.                        |
| `action_1_url`     | Primary action URL.                          |
| `action_1_variant` | Primary action style.                        |
| `action_1_color`   | Primary action color token.                  |
| `action_2_text`    | Optional secondary action label.             |
| `action_2_url`     | Optional secondary action URL.               |
| `action_2_variant` | Secondary action style.                      |
| `action_2_color`   | Secondary action color token.                |
| `caption`          | Small note below the actions.                |
| `bg`               | Full-width section background token.         |
| `class`            | Additional CSS classes on the outer section. |