Theme
← Blocks
Marketing Block family Campaign launches, product updates, and docs announcements

Banners

Top-of-page announcement and campaign banners with CTA and dismissal framing.

Preview

Open in new tab
Banner system

Promote what matters without derailing the page.

Banner variants give teams consistent hierarchy and motion-free urgency for announcements.

Announcement bar

Minimal banner for campaigns and releases.

Upgrade banner

Product-led upgrade framing with status badge.

Launch countdown

Time-sensitive release or event banner.

Variants

Announcement bar

Single-line campaign callout.

Upgrade banner

More product- or feature-upgrade specific framing.

Launch countdown

Time-sensitive banner with secondary CTA.

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}>Promote what matters without derailing the page.</Heading>
    <Text as="p">Banner variants give teams consistent hierarchy and motion-free urgency for announcements.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open banners</Button>
        <Button variant="outline">See launch page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Announcement bar</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Minimal banner for campaigns and releases.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Upgrade banner</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Product-led upgrade framing with status badge.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Launch countdown</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Time-sensitive release or event banner.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>