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

Context Title

Title

Lorem Ipsum is simply dummy text.

Title

Description

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