Theme
← Blocks
Marketing Block family Pricing, comparison, and campaign landing pages

CTA Sections

Ship end-cap conversion bands, split CTAs, and proof-backed final asks.

Preview

Open in new tab
Conversion block

End with a clear ask instead of a dead-end footer.

CTA sections package urgency, proof, and a focused next step for high-intent readers.

End-cap band

Fast closing CTA for most marketing pages.

Split CTA

Route buyers and implementers to different next steps.

Proof CTA

Back the ask with one metric or a customer voice.

Ships with
Primary/secondary action rows, supporting copy, and compact proof treatments.

Variants

End-cap band

Tight CTA band with one primary action and short proof copy.

Split CTA

Primary and secondary audience pathways in one module.

Proof CTA

CTA framed by a short metric or customer quote.

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}>End with a clear ask instead of a dead-end footer.</Heading>
    <Text as="p">CTA sections package urgency, proof, and a focused next step for high-intent readers.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Adopt CTA sections</Button>
        <Button variant="outline">View footer system</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>End-cap band</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Fast closing CTA for most marketing pages.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Split CTA</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Route buyers and implementers to different next steps.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Proof CTA</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Back the ask with one metric or a customer voice.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Ships with</DescriptionList.Term>
        <DescriptionList.Description>Primary/secondary action rows, supporting copy, and compact proof treatments.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
  </Stack>
</Container>