Theme
← Blocks
Marketing Block family Content programs, changelogs, and community pages

Newsletter Sections

Ship sign-up bands and editorial opt-in sections without rebuilding forms.

Preview

Open in new tab
Opt-in blocks

Add a subscription surface without inventing the layout.

Newsletter sections include copy, opt-in framing, and the privacy or cadence note beneath the form.

Inline subscribe

Fast signup module for campaign and docs pages.

Editorial signup

More room for a publication-style pitch.

Sidebar opt-in

Tighter layout for article pages and docs rails.

Variants

Inline subscribe

Compact band with one input and single button.

Editorial signup

Copy-forward module with detail list and trust note.

Sidebar opt-in

Smaller treatment for blogs and docs.

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}>Add a subscription surface without inventing the layout.</Heading>
    <Text as="p">Newsletter sections include copy, opt-in framing, and the privacy or cadence note beneath the form.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open signup blocks</Button>
        <Button variant="outline">Pair with changelog starter</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Inline subscribe</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Fast signup module for campaign and docs pages.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial signup</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">More room for a publication-style pitch.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Sidebar opt-in</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Tighter layout for article pages and docs rails.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>