PhiaUi.Components.Marketing.HeroSection (phia_ui v0.1.17)

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>

Summary

Functions

hero_section(assigns)

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

Functions

hero_section(assigns)

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.