Theme
← Blocks
Marketing Block family Homepage middle sections and feature overviews

Bento Grids

Use asymmetrical grids for storytelling, differentiators, and product proof clusters.

Preview

Open in new tab
Bento system

Break out of the same three-card row.

Bento grids turn repeated cards into a more editorial layout without leaving the component system.

Popular

Narrative mosaic

Mixed card spans for product story sequencing.

Metric matrix

Turns KPIs into a stronger visual rhythm.

Media mosaic

Leaves room for illustration, screenshots, or animation.

Included patterns

• Large + small card rhythm

• Stat-ready card shells

• Editorial copy defaults

Variants

Narrative mosaic

Mixed-size cards balancing narrative and proof.

Metric matrix

Stats-heavy bento layout for launch or growth claims.

Media mosaic

Grid that leaves space for illustration or product art.

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}>Break out of the same three-card row.</Heading>
    <Text as="p">Bento grids turn repeated cards into a more editorial layout without leaving the component system.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>See bento layouts</Button>
        <Button variant="outline">Use on landing page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Popular</Badge>
            <Heading level={3}>Narrative mosaic</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Mixed card spans for product story sequencing.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Metric matrix</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Turns KPIs into a stronger visual rhythm.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Media mosaic</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Leaves room for illustration, screenshots, or animation.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Large + small card rhythm</Text>
        <Text as="p">• Stat-ready card shells</Text>
        <Text as="p">• Editorial copy defaults</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>