# `PhiaUi.Components.Marketing.HeroSection`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/marketing/hero_section.ex#L1)

Structured hero section with heading, subheading, CTA buttons, and optional media.

Distinct from `cover` (which is a background media wrapper). HeroSection
is a structured content section with explicit heading/description/actions layout.

## Layouts

| Layout     | Description                                    |
|------------|------------------------------------------------|
| `:stacked` | Content centered/stacked vertically (default)  |
| `:split`   | Content left, media right (two columns)        |

## Examples

    <.hero_section title="Build faster with PhiaUI" description="829 components ready to use.">
      <:actions>
        <.button size={:lg}>Get Started</.button>
        <.button variant={:outline} size={:lg}>Learn More</.button>
      </:actions>
    </.hero_section>

    <.hero_section title="Ship products faster" layout={:split}>
      <:media>
        <img src="/images/hero.png" alt="Product screenshot" />
      </:media>
      <:actions>
        <.button>Try Free</.button>
      </:actions>
    </.hero_section>

# `hero_section`

Renders a structured hero section with heading, description, actions, and optional media.
## Attributes

* `title` (`:string`) (required)
* `description` (`:string`) - Defaults to `nil`.
* `align` (`:atom`) - Defaults to `:center`. Must be one of `:center`, or `:start`.
* `layout` (`:atom`) - Defaults to `:stacked`. Must be one of `:stacked`, or `:split`.
* `size` (`:atom`) - Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `actions` - CTA buttons.
* `media` - Optional image/video/illustration.
* `badge` - Optional top badge.
* `inner_block` - Additional content.

---

*Consult [api-reference.md](api-reference.md) for complete listing*