page BlocksIndex {
 layout = "gallery"
 seo { title = "UI blocks" }
 view { <div class="example-catalog"><a class="example-card" href="/blocks/announcement-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/ctasection"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-icon-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/footer"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero-actions"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/marketing-section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/metric-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/page-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/split-hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/stats-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p><strong>Open example →</strong></div></a></div> }
}