Preview

Open in new tab

Role marketing

Show each audience what matters to them with interactive flip cards.

Role-Based Flip Cards use FlipCard, List, and Button for engaging persona-targeted marketing sections.

4

role cards

2

flip modes

4

benefits per role

Default

Hover flip

Front: role title and icon. Back: benefit list with CTA button.

Click flip

Tap-to-flip for touch devices with accessible aria-live announcement.

Grid layout

Responsive 4-column grid that stacks to 2 on tablet and 1 on mobile.

Optimized for: Multi-persona marketing, role-based feature pages, and team landing pages.
Accessibility: aria-live announces back content, keyboard Enter/Space toggles flip.

Included patterns

• CSS 3D transforms

• Hover and click trigger modes

• Accessible flip announcement

• Responsive grid layout

Variants

Role card grid

Four flip cards representing different user roles.

Hover flip

Cards flip on mouse hover to reveal benefits list.

Click flip

Cards flip on click for mobile-friendly interaction.

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}>Show each audience what matters to them with interactive flip cards.</Heading>
    <Text as="p">Role-Based Flip Cards use FlipCard, List, and Button for engaging persona-targeted marketing sections.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Use flip cards</Button>
        <Button variant="outline">See persona patterns</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">role cards</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">flip modes</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">benefits per role</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Default</Badge>
            <Heading level={3}>Hover flip</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Front: role title and icon. Back: benefit list with CTA button.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Click flip</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Tap-to-flip for touch devices with accessible aria-live announcement.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Grid layout</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Responsive 4-column grid that stacks to 2 on tablet and 1 on mobile.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Optimized for</DescriptionList.Term>
        <DescriptionList.Description>Multi-persona marketing, role-based feature pages, and team landing pages.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Accessibility</DescriptionList.Term>
        <DescriptionList.Description>aria-live announces back content, keyboard Enter/Space toggles flip.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• CSS 3D transforms</Text>
        <Text as="p">• Hover and click trigger modes</Text>
        <Text as="p">• Accessible flip announcement</Text>
        <Text as="p">• Responsive grid layout</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>