Theme
← Blocks
Marketing Block family Content hubs, homepages, and changelog surfaces

Blog Sections

Promote articles, case studies, and updates with ready-made editorial cards.

Preview

Open in new tab
Editorial blocks

Turn content links into a designed editorial surface.

Blog sections ship metadata, summary styles, and image-free or image-ready layouts.

Feature story row

Lead with one major narrative and two supporting links.

Article grid

Balanced layout for blogs, docs, and customer stories.

Update rail

Tighter list for recent notes or launch updates.

Variants

Feature story row

Large primary story plus supporting cards.

Article grid

Three-up editorial card system.

Update rail

Compact feed for product and release notes.

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 content links into a designed editorial surface.</Heading>
    <Text as="p">Blog sections ship metadata, summary styles, and image-free or image-ready layouts.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open blog blocks</Button>
        <Button variant="outline">See changelog starter</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Feature story row</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Lead with one major narrative and two supporting links.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Article grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Balanced layout for blogs, docs, and customer stories.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Update rail</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Tighter list for recent notes or launch updates.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>