Theme
← Blocks
Marketing Block family Landing pages, docs fronts, and marketing pages

Header Sections and Headers

Provide reusable top-of-page framing for campaigns, docs, and product overviews.

Preview

Open in new tab
Header system

Keep page framing consistent across every top-level surface.

Header sections bridge the gap between small UI headings and fully built hero sections.

Section header

Eyebrow, title, copy, optional meta row.

Editorial header

Richer copy length and looser spacing.

Launch header

Badge-forward framing for campaigns.

Variants

Section header

Compact section lead-in with eyebrow and copy.

Editorial header

More narrative framing for stories and essays.

Launch header

Tighter badge-heavy header for campaign surfaces.

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}>Keep page framing consistent across every top-level surface.</Heading>
    <Text as="p">Header sections bridge the gap between small UI headings and fully built hero sections.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open headers</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}>Section header</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Eyebrow, title, copy, optional meta row.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial header</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Richer copy length and looser spacing.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Launch header</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Badge-forward framing for campaigns.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>