Preview

Content starter

A media-ready starter with editorial hierarchy and subscription blocks.

This starter combines hero, blog sections, team or guest proof, and newsletter blocks into a content-first site.

Featured story

Lead episode or article framing.

Episode / article grid

Structured content cards for recent work.

Subscribe lane

Newsletter or podcast subscription CTA.

Included patterns

• Editorial hero

• Content grid

• Newsletter section

Variants

Show-led

Podcast-first homepage with episodes and guest proof.

Editorial media

Broader content starter for newsletters and essays.

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">Content starter</Badge>
    <Heading level={1}>A media-ready starter with editorial hierarchy and subscription blocks.</Heading>
    <Text as="p">This starter combines hero, blog sections, team or guest proof, and newsletter blocks into a content-first site.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Featured story</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Lead episode or article framing.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Episode / article grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Structured content cards for recent work.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Subscribe lane</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Newsletter or podcast subscription CTA.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Editorial hero</Text>
        <Text as="p">• Content grid</Text>
        <Text as="p">• Newsletter section</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">Use blog sections</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Podcast / Content Starter