Preview

Open in new tab

Order page

Give the post-purchase flow the same design quality as the storefront.

The order page example packages receipt detail, status, reorder action, and support routing.

Receipt summary

Compact order and payment detail.

Fulfillment status

Delivery, tracking, and support updates.

Reorder lane

Quick path back to the same basket or related items.

Built from: Order summaries, order history, incentives, and support routing.

Use this order page example for account order detail and post-purchase confirmation.

Variants

Receipt-first

Order page centered on receipt and delivery detail.

Account-first

Order page aligned to the wider customer account area.

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">Order page</Badge>
    <Heading level={1}>Give the post-purchase flow the same design quality as the storefront.</Heading>
    <Text as="p">The order page example packages receipt detail, status, reorder action, and support routing.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open order page</Button>
        <Button variant="outline">Use order history</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Receipt summary</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Compact order and payment detail.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Fulfillment status</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Delivery, tracking, and support updates.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Reorder lane</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Quick path back to the same basket or related items.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Order summaries, order history, incentives, and support routing.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Text as="p">Use this order page example for account order detail and post-purchase confirmation.</Text>
  </Stack>
</Container>

DRYui

Order Page Example