Preview

Open in new tab

Cart page

Use a page-level cart composition with totals, incentives, and next steps.

The cart page example combines editable line items, incentive sections, and summary rails.

Line item list

Editable items and variant summaries.

Summary rail

Sticky totals and shipping note.

Trust strip

Shipping and return incentives before checkout.

Built from: Shopping carts, order summaries, and incentive modules.

Use this cart page example as the bridge between merchandising and checkout.

Variants

Standard cart

Full-page cart with sticky summary.

Upsell cart

Cart page with incentive and cross-sell lane.

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">Cart page</Badge>
    <Heading level={1}>Use a page-level cart composition with totals, incentives, and next steps.</Heading>
    <Text as="p">The cart page example combines editable line items, incentive sections, and summary rails.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open cart page</Button>
        <Button variant="outline">Use cart blocks</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Line item list</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Editable items and variant summaries.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Summary rail</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Sticky totals and shipping note.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Trust strip</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Shipping and return incentives before checkout.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Shopping carts, order summaries, and incentive modules.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Text as="p">Use this cart page example as the bridge between merchandising and checkout.</Text>
  </Stack>
</Container>

DRYui

Cart Page Example