Preview

Open in new tab

Product page

A reusable product page instead of one-off merch page design.

The product page example packages hero, spec detail list, feature story, reviews, and incentive modules.

Overview module

Headline, price, and purchase CTA.

Feature section

Materials, use case, and proof.

Review + incentive stack

Trust, reviews, and service proof.

Built from: Product overviews, features, reviews, and incentive sections.

Use this product page example as the core PDP starter.

Variants

Flagship PDP

Product page with premium storytelling and review stack.

Spec-led PDP

Product page with stronger specification hierarchy.

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 page</Badge>
    <Heading level={1}>A reusable product page instead of one-off merch page design.</Heading>
    <Text as="p">The product page example packages hero, spec detail list, feature story, reviews, and incentive modules.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open product page</Button>
        <Button variant="outline">Use product overviews</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Overview module</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Headline, price, and purchase CTA.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Feature section</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Materials, use case, and proof.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Review + incentive stack</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Trust, reviews, and service proof.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Product overviews, features, reviews, and incentive sections.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Text as="p">Use this product page example as the core PDP starter.</Text>
  </Stack>
</Container>

DRYui

Product Page Example