Theme
Trust incentives

Package the trust signals that reduce purchase friction.

Incentive sections add operational proof and merchandising nudges to key commerce surfaces.

Free shipping

All orders over $150 ship free in 2-4 days.

Easy returns

30-day returns with prepaid labels.

Repair support

Lifetime repair support for flagship products.

Variants

Shipping incentives

Free-shipping and delivery proof stack.

Service incentives

Returns, warranty, and support framing.

Bundle incentives

Merchandising incentive modules.

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">Trust incentives</Badge>
    <Heading level={1}>Package the trust signals that reduce purchase friction.</Heading>
    <Text as="p">Incentive sections add operational proof and merchandising nudges to key commerce surfaces.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open incentives</Button>
        <Button variant="outline">Use on cart page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Free shipping</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">All orders over $150 ship free in 2-4 days.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Easy returns</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">30-day returns with prepaid labels.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Repair support</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Lifetime repair support for flagship products.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>