Theme
← Blocks
Marketing Block family Product marketing pages and roadmap explainers

Feature Sections

Explain product capabilities with feature grids, media pairings, and narrative stacks.

Preview

Open in new tab
Feature system

Turn component primitives into product stories.

Feature sections package proof, comparison points, and supporting metadata without making teams design the section from scratch.

Capability Grid

Short proof-driven cards for homepage and pricing-adjacent sections.

Narrative Pairing

Alternating text and details for more editorial product stories.

Checklist Stack

Dense value framing for buyers who compare feature depth.

Supports
Badge rows, stat callouts, and detail lists for product specs.
Use when
A hero needs a follow-up section that makes the offer concrete.
Included patterns

• Grid and narrative variants

• Supporting metadata rows

• Reusable section headings

Variants

Capability Grid

Three-up feature grid with short copy and stat badges.

Narrative Pairing

Alternating copy-and-proof layout for deeper stories.

Checklist Stack

Tighter list treatment for dense product value props.

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, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Marketing</Badge>
    <Heading level={1}>Turn component primitives into product stories.</Heading>
    <Text as="p">Feature sections package proof, comparison points, and supporting metadata without making teams design the section from scratch.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open feature blocks</Button>
        <Button variant="outline">Pair with landing page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Capability Grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Short proof-driven cards for homepage and pricing-adjacent sections.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Narrative Pairing</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Alternating text and details for more editorial product stories.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Checklist Stack</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Dense value framing for buyers who compare feature depth.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Supports</DescriptionList.Term>
        <DescriptionList.Description>Badge rows, stat callouts, and detail lists for product specs.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Use when</DescriptionList.Term>
        <DescriptionList.Description>A hero needs a follow-up section that makes the offer concrete.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Grid and narrative variants</Text>
        <Text as="p">• Supporting metadata rows</Text>
        <Text as="p">• Reusable section headings</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>