Preview

Open in new tab

Interactive hero

Let visitors self-select their journey from the first scroll.

Hero Card Selector compositions use Card (with selected state), Grid, and Button for intent-driven landing page heroes.

5

intent cards

3

interaction states

5

content swaps

Default

Intent grid

Five cards: Travel Manager, Finance Lead, Executive, Road Warrior, Admin.

Selection states

Hover lift, selected ring, and content panel swap on selection.

Optimized for: Multi-persona products, B2B landing pages, and solution-based marketing.
Requires: Card component with selected state enhancement.

Included patterns

• Selectable card grid

• Visual selection ring

• Dynamic content area

• Role-based messaging

Variants

Intent cards grid

Five selectable cards representing different user intents.

Hover/selected states

Visual feedback with ring selection and content update.

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}>Let visitors self-select their journey from the first scroll.</Heading>
    <Text as="p">Hero Card Selector compositions use Card (with selected state), Grid, and Button for intent-driven landing page heroes.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Use hero selector</Button>
        <Button variant="outline">See card patterns</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">intent cards</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">interaction states</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">content swaps</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={2} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Default</Badge>
            <Heading level={3}>Intent grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Five cards: Travel Manager, Finance Lead, Executive, Road Warrior, Admin.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Selection states</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Hover lift, selected ring, and content panel swap on selection.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Optimized for</DescriptionList.Term>
        <DescriptionList.Description>Multi-persona products, B2B landing pages, and solution-based marketing.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Requires</DescriptionList.Term>
        <DescriptionList.Description>Card component with selected state enhancement.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Selectable card grid</Text>
        <Text as="p">• Visual selection ring</Text>
        <Text as="p">• Dynamic content area</Text>
        <Text as="p">• Role-based messaging</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Interactive Hero Card Selector