Theme
← Blocks
Ecommerce Block family Product pages and launch pages

Product Features

Use structured sections to explain materials, construction, and differentiators.

Preview

Open in new tab
Product features

Turn bullet lists into product storytelling sections.

Product feature sections carry the product page after the hero and before the review stack.

Material story

Show what the product is made from and why it matters.

Travel proof

Frame durability, performance, or use-case proof.

Spec pairing

Mix narrative with dimensions and supporting detail.

Variants

Material story

Feature section focused on materials and finish.

Travel proof

Feature section with use-case or durability proof.

Spec pairing

Feature narrative plus dimensions and fit.

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 features</Badge>
    <Heading level={1}>Turn bullet lists into product storytelling sections.</Heading>
    <Text as="p">Product feature sections carry the product page after the hero and before the review stack.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open product features</Button>
        <Button variant="outline">See product page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Material story</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Show what the product is made from and why it matters.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Travel proof</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Frame durability, performance, or use-case proof.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Spec pairing</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Mix narrative with dimensions and supporting detail.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>