Hero Section Widget

Configurable hero sections for landing pages. Supports badges, titles, subtitles, multiple buttons, background images/colors, full-height sections, and various style variants.

Basic Hero

Simple hero with title, subtitle, and call-to-action button.

Code

<?php echo HeroSectionWidget::widget([
    'title' => 'Welcome to Our Platform',
    'subtitle' => 'Build amazing applications with our powerful template.',
    'primaryButton' => ['label' => 'Get Started', 'url' => ['#']],
]); ?>

Live Demo

Welcome to Our Platform

Build amazing applications with our powerful template.

Get Started

Hero with Badge & Two Buttons

Hero with badge, primary, and secondary buttons.

Code

<?php echo HeroSectionWidget::widget([
    'badge' => 'New Release',
    'title' => 'Production-Ready Yii2 Template',
    'subtitle' => 'Everything you need to build professional web applications.',
    'primaryButton' => ['label' => 'Explore Features', 'url' => ['#']],
    'secondaryButton' => ['label' => 'View Docs', 'url' => ['#']],
]); ?>

Live Demo

New Release

Production-Ready Yii2 Template

Everything you need to build professional web applications.

Explore Features View Docs

Dark Variant

Hero with dark background variant.

Code

<?php echo HeroSectionWidget::widget([
    'title' => 'Dark Mode Hero',
    'variant' => 'dark',
    'primaryButton' => ['label' => 'Learn More', 'url' => ['#']],
]); ?>

Live Demo

Dark Mode Hero

Beautiful dark theme styling.

Learn More

Full Height with Background Image

Full viewport height hero with background image and overlay.

Code

<?php echo HeroSectionWidget::widget([
    'title' => 'Amazing Product',
    'fullHeight' => true,
    'backgroundImage' => '@web/images/hero-bg.jpg',
    'overlay' => true,
    'overlayOpacity' => 0.6,
    'primaryButton' => ['label' => 'Get Started', 'url' => ['#']],
]); ?>

Live Demo

Amazing Product

Transform your workflow today.

Get Started

Configuration Options

Option	Type	Default	Description
`badge`	string	`null`	Badge text above title
`title`	string	`''`	Main title text
`subtitle`	string	`null`	Subtitle/description text
`primaryButton`	array	`null`	Primary button config
`secondaryButton`	array	`null`	Secondary button config
`variant`	string	`light`	Variant: light, dark, primary, gradient
`fullHeight`	bool	`false`	Make hero full viewport height
`backgroundImage`	string	`null`	Background image URL
`overlay`	bool	`false`	Add dark overlay on background
`centered`	bool	`true`	Center content horizontally

Marketing Pixels Widget Accordion Widget