Preview

Open in new tab

Collection blocks

Promote categories as designed entry points, not just navigation links.

Category preview blocks help a storefront steer users toward the right collection with context.

Carry-ons

Compact travel systems for daily and weekly trips.

Checked luggage

Long-haul travel cases with higher capacity.

Accessories

Packing cubes, organizers, and travel add-ons.

Included patterns

• Campaign-ready category cards

• Supporting copy

• Cross-links to featured collections

Variants

Collection trio

Three category cards with support copy.

Seasonal spotlight

Featured category plus supporting links.

Editorial collection

More narrative category framing.

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, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Collection blocks</Badge>
    <Heading level={1}>Promote categories as designed entry points, not just navigation links.</Heading>
    <Text as="p">Category preview blocks help a storefront steer users toward the right collection with context.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open category previews</Button>
        <Button variant="outline">See storefront page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Carry-ons</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Compact travel systems for daily and weekly trips.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Checked luggage</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Long-haul travel cases with higher capacity.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Accessories</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Packing cubes, organizers, and travel add-ons.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Campaign-ready category cards</Text>
        <Text as="p">• Supporting copy</Text>
        <Text as="p">• Cross-links to featured collections</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Category Previews