Preview

Open in new tab

Product listing

Give merchandisers a better default than an empty grid.

Product list blocks package card hierarchy, pricing, and campaign badges for collection pages.

$249

Travel shell

Carry-on ready hard-shell with modular interior.

$189

Weekender

Soft case with structured pockets and quick-access zip.

$129

Transit tote

Daily carry with laptop sleeve and bottle pocket.

Included patterns

• Campaign and inventory badges

• Price rows

• Grid variants by density

Variants

Editorial grid

Visual product cards for premium collections.

Dense catalog

Higher-density card list for larger assortments.

Featured row

Highlight-first row for homepage or campaign use.

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">Product listing</Badge>
    <Heading level={1}>Give merchandisers a better default than an empty grid.</Heading>
    <Text as="p">Product list blocks package card hierarchy, pricing, and campaign badges for collection pages.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open product lists</Button>
        <Button variant="outline">See category page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$249</Badge>
            <Heading level={3}>Travel shell</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Carry-on ready hard-shell with modular interior.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$189</Badge>
            <Heading level={3}>Weekender</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Soft case with structured pockets and quick-access zip.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$129</Badge>
            <Heading level={3}>Transit tote</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Daily carry with laptop sleeve and bottle pocket.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Campaign and inventory badges</Text>
        <Text as="p">• Price rows</Text>
        <Text as="p">• Grid variants by density</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Product Lists