Theme
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