Theme
← Blocks
Marketing Block family Documentation fronts, product essays, and company narratives

Content Sections

Package editorial layouts, long-form summaries, and product storytelling sections.

Preview

Open in new tab
Content layouts

Give longer-form copy a system, not just a blank column.

Content sections balance reading rhythm with supporting proof, media, and metadata.

Two-column story

Editorial copy supported by a concise fact rail.

Editorial stack

Paced sections for longer homepage or company narratives.

Proof + narrative

Blends story copy and launch metrics.

Variants

Two-column story

Narrative copy plus supporting facts.

Editorial stack

Long-form content grouped into paced sections.

Proof + narrative

Content section with stats or detail list built in.

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}>Give longer-form copy a system, not just a blank column.</Heading>
    <Text as="p">Content sections balance reading rhythm with supporting proof, media, and metadata.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open content sections</Button>
        <Button variant="outline">Add to docs starter</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Two-column story</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Editorial copy supported by a concise fact rail.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial stack</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Paced sections for longer homepage or company narratives.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Proof + narrative</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Blends story copy and launch metrics.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>