Theme
Preview
Open in new tabTrust 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>