Theme
← Blocks
Ecommerce Block family Storefront product pages and seasonal campaigns

Product Overviews

Top-of-page product storytelling blocks for ecommerce launches and catalog pages.

Preview

Open in new tab
Product overview

Start the product page with story, proof, and a clear buy path.

Product overviews combine hero copy, highlights, and the first conversion prompt into one reusable block.

Launch overview

Hero-forward product intro with add-to-cart framing.

Spec overview

Puts key details and materials close to the top.

Editorial overview

Longer-form product story with softer CTA pacing.

Use when
Product pages need a stronger headline and proof framework.
Included patterns

• Headline + proof strip

• Spec detail list

• Primary commerce CTA

Variants

Launch overview

Hero-heavy product overview with proof and CTA.

Spec overview

Balances hero copy with technical details.

Editorial overview

Content-led product storytelling module.

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">Product overview</Badge>
    <Heading level={1}>Start the product page with story, proof, and a clear buy path.</Heading>
    <Text as="p">Product overviews combine hero copy, highlights, and the first conversion prompt into one reusable block.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open product overviews</Button>
        <Button variant="outline">See product page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Launch overview</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Hero-forward product intro with add-to-cart framing.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Spec overview</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Puts key details and materials close to the top.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial overview</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Longer-form product story with softer CTA pacing.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Use when</DescriptionList.Term>
        <DescriptionList.Description>Product pages need a stronger headline and proof framework.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Headline + proof strip</Text>
        <Text as="p">• Spec detail list</Text>
        <Text as="p">• Primary commerce CTA</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>