Theme
← Blocks
Ecommerce Block family Storefront homepages and seasonal campaigns

Promo Sections

Campaign and merchandising callout blocks for sales, bundles, and new arrivals.

Preview

Open in new tab
Promo surfaces

Add campaign urgency and merchandising structure in one block.

Promo sections package sales language, product grouping, and a clear commerce CTA.

Sale spotlight

Seasonal or campaign discount block.

Bundle promo

Pair products into a higher-order offer.

New arrival promo

Frame a launch or collection drop.

Variants

Sale spotlight

Campaign-first merchandising block.

Bundle promo

Shows paired products or kits.

New arrival promo

Highlights a new collection or drop.

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, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Promo surfaces</Badge>
    <Heading level={1}>Add campaign urgency and merchandising structure in one block.</Heading>
    <Text as="p">Promo sections package sales language, product grouping, and a clear commerce CTA.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open promos</Button>
        <Button variant="outline">Use on storefront page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Sale spotlight</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Seasonal or campaign discount block.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Bundle promo</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Pair products into a higher-order offer.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>New arrival promo</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Frame a launch or collection drop.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>