Theme
← Blocks
Marketing Block family Public marketing surfaces and docs

404 Pages

Package fallback pages with routing, helpful actions, and brand-safe empty states.

Preview

Open in new tab
404 surface

Even the not-found page should feel like part of the system.

404 page examples include recovery links, navigation back-stops, and a calmer empty-state tone.

Search fallback

Encourages users back into docs or product areas.

Editorial fallback

Keeps the voice consistent with the rest of the site.

Support fallback

Routes to help center or human support.

Variants

Search fallback

404 page with links back to docs or product.

Editorial fallback

Brand-forward narrative 404 layout.

Support fallback

Routes users to help or contact options.

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}>Even the not-found page should feel like part of the system.</Heading>
    <Text as="p">404 page examples include recovery links, navigation back-stops, and a calmer empty-state tone.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open 404 pages</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}>Search fallback</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Encourages users back into docs or product areas.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial fallback</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Keeps the voice consistent with the rest of the site.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Support fallback</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Routes to help center or human support.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>