Theme
← Blocks
Marketing Block family Launch pages, campaign landers, and homepage refreshes

Hero Sections

Lead with high-signal headlines, proof points, and focused call-to-action stacks.

Preview

Open in new tab
Marketing hero

Launch pages that explain the offer before the scroll gets cold.

Ship ready-made hero variants with clear hierarchy, social proof, and conversion-focused actions.

3

headline styles

4

cta patterns

6

proof modules

Default

Signal Split

Narrative headline with KPI rail and supporting launch notes.

Launch Banner

Campaign-first hero with feature bullets and deadline language.

Editorial Hero

Quiet, text-led hero for product stories and founder letters.

Optimized for
Above-the-fold clarity, campaign pivots, and new product announcements.
Best paired with
Feature sections, logo clouds, pricing sections, and CTA bands.
Included patterns

• High-contrast headline rhythm

• Proof strip below primary copy

• Two-button CTA stack

Variants

Signal Split

Two-column hero with stats and a supporting card rail.

Launch Banner

Announcement-led hero with proof chips and a primary CTA.

Editorial Hero

Content-first intro with lighter action density.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Marketing</Badge>
    <Heading level={1}>Launch pages that explain the offer before the scroll gets cold.</Heading>
    <Text as="p">Ship ready-made hero variants with clear hierarchy, social proof, and conversion-focused actions.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Use hero starter</Button>
        <Button variant="outline">See page pack</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">headline styles</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">cta patterns</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">proof modules</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Default</Badge>
            <Heading level={3}>Signal Split</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Narrative headline with KPI rail and supporting launch notes.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Launch Banner</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Campaign-first hero with feature bullets and deadline language.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial Hero</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Quiet, text-led hero for product stories and founder letters.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Optimized for</DescriptionList.Term>
        <DescriptionList.Description>Above-the-fold clarity, campaign pivots, and new product announcements.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Best paired with</DescriptionList.Term>
        <DescriptionList.Description>Feature sections, logo clouds, pricing sections, and CTA bands.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• High-contrast headline rhythm</Text>
        <Text as="p">• Proof strip below primary copy</Text>
        <Text as="p">• Two-button CTA stack</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>