Theme
← Blocks
Marketing Block family Homepages, pricing pages, and proof sections

Logo Clouds

Show trusted brands and proof rows with more than a flat strip of logos.

Preview

Open in new tab
Trust logos

Give the logo cloud enough structure to matter.

Logo cloud variants include headlines, segmentation, and compact brand groupings.

Trust strip

Works directly below hero copy.

Statement cloud

Adds a sharper narrative line over the logos.

Segmented cloud

Separate buyers, partners, and regions.

Variants

Trust strip

Simple brand row for hero adjacency.

Statement cloud

Logos paired with supporting message.

Segmented cloud

Split by customer type or region.

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}>Give the logo cloud enough structure to matter.</Heading>
    <Text as="p">Logo cloud variants include headlines, segmentation, and compact brand groupings.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open logo clouds</Button>
        <Button variant="outline">Use with testimonials</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Trust strip</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Works directly below hero copy.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Statement cloud</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Adds a sharper narrative line over the logos.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Segmented cloud</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Separate buyers, partners, and regions.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>