Theme
← Blocks
Marketing Block family All public marketing and docs surfaces

Footers

Package multi-column and compact footer systems with brand, nav, and legal framing.

Preview

Open in new tab
Footer system

Close the page with structure, not an afterthought.

Footer variants keep the last screen aligned with the rest of the site system.

Compact footer

Great for minimal marketing sites.

Multi-column footer

Ideal for docs-heavy or multi-product surfaces.

CTA footer

Adds one final action before the footer links.

Variants

Compact footer

Brand, nav, and social links in one row.

Multi-column footer

Docs and marketing-friendly long footer.

CTA footer

Footer with a final conversion row above navigation.

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}>Close the page with structure, not an afterthought.</Heading>
    <Text as="p">Footer variants keep the last screen aligned with the rest of the site system.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open footers</Button>
        <Button variant="outline">Attach CTA footer</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Compact footer</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Great for minimal marketing sites.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Multi-column footer</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Ideal for docs-heavy or multi-product surfaces.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>CTA footer</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Adds one final action before the footer links.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>