Rotating Cards

Rotating card is a marketing-focused, interactive UI component consisting of a front and back side. On page load, the front side displays an image background with a title. On hover (desktop) or tap (mobile), the card smoothly rotates to reveal the back side, which features a background color, title, description, and an optional call-to-action link.

Use Cases for Flip Card Component

  • City Program Highlights
  • Discover Calgary Neighbourhoods
  • Event Spotlights (Campaign Landing Pages)
  • Service Improvements or Pilot Projects
  • Recognition and Community Spotlights
  • Quiz or Trivia Engagement

 

Accessibility Considerations

  • Use role="button" or role="group" for each card if interactive.
  • Ensure keyboard navigability:
  • Card must be focusable (use tabindex="0").
  • Flip action must work on Enter or Space key.
  • Provide semantic HTML structure (e.g., <h3>, <p>, <a>).
  • Maintain a minimum 4.5:1 contrast ratio for text and background on both sides.
  • Avoid flipping animations that are too fast or disorienting; consider respecting prefers-reduced-motion.
  • Use aria-label or aria-describedby for cards with limited text.
  • Ensure the flipped side is still logically navigable by screen readers.
  • Don’t put critical info on the back unless it’s accessible by keyboard and screen readers.

 

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Marketing and storytelling

Demo

Black SVG

Context Title

Card title

Lorem Ipsum is simply dummy text of the print.

Card title

Lorem Ipsum is simply dummy text of the print

Do

  • Use for campaign or marketing-style content only.: Example: landing pages, program promotions, events, seasonal alerts.
  • Keep content concise and scannable on both sides. : Use plain language and limit text to a headline, 1–2 short sentences, and a clear call to action.
  • Ensure flipping is accessible by both mouse and keyboard : Allow users to flip the card using Enter or Space, and visually indicate focus states.
  • Maintain strong visual contrast:  Ensure text on both sides meets WCAG AA contrast standards (4.5:1 or better).
  • Design for responsive behavior : Cards should stack or adjust appropriately on smaller screens (e.g., 1–2 per row on mobile).
  • Use flipping animation mindfully: Keep it smooth, subtle, and respect prefers-reduced-motion for users with motion sensitivity.
  • Include meaningful alt text or labels if needed: Especially if the card’s front is purely visual or image-based

Don't

  • Don’t use for critical content or mandatory city services: Example: transit alerts, emergency notifications, legal content — these should remain static and clearly visible
  • Don’t overload with too much text or nested links: Long paragraphs or multiple links confuse users and disrupt scanability
  • Don’t rely solely on hover for functionality: Mobile and keyboard users must be able to trigger the flip without a mouse.
  • Don’t use low-contrast images or text overlays without sufficient readability:  Avoid backgrounds that interfere with text clarity.
  • Don’t auto-flip or animate without user interaction: Unpredictable motion can be disorienting and distract from the message.
  • Don’t use more than 4 cards per row: Crowded layouts reduce focus and degrade mobile usability.
  • Don’t reuse this pattern for all content blocks: Overuse diminishes its value. It’s meant to be engaging, not repetitive