Domain

HeroSection

Landing-page hero scaffold with eyebrow, heading, supporting copy, CTA row, and optional media panel.

import { HeroSection } from '@lostgradient/cinder/hero-section';
marketingherolayout
01

Overview

Renders a landing-page hero with headline, supporting copy, actions, and optional media.

Usage

svelte 
<script lang="ts">
  import HeroSection from '@lostgradient/cinder/hero-section';
</script>

<HeroSection
  title="Build better products with Cinder"
  description="Composable sections for modern marketing pages."
/>
Live preview
02

When to use

Use when
  • Building the first section of a marketing page where a primary message and call-to-action must stand out.
  • Pairing conversion copy with a visual demo, screenshot, or illustration in a split layout.
Avoid when
03

Examples

HeroSection

HeroSection with eyebrow copy, dual actions, trust note, and a media panel.

04

Props

Props for hero-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
eyebrow text Small uppercase intro label rendered above the title.
title text req Main marketing headline.
description text Supporting copy shown below the title.
align 'start' | 'center' 'start' Text alignment for heading and body copy.
mediaPosition 'start' | 'end' 'end' Position of the optional media panel on wide layouts.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.
actions snippet Optional CTA row, usually one or two Button components.
media snippet Optional visual/media block (image, demo, illustration).
children snippet Optional extra content rendered below description/actions.