Default Light
MgLibrary
Overview
Installation
Buttons
Cards
Charts
Codes
Data Grids
Dropdowns
Editors
Headers & Animations
Icons
Indicators
Inputs
Lists
Modals
Menus
Panels
Pills & Chips
Scheduling
Tabs
Time Line
Trees
Customization

Flip Card

Flip cards provide interactive two-sided content that can flip or fade to reveal additional information.

Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.

Flip Card

MgFlipcard

An interactive card that flips or fades to reveal content on its back. Perfect for flashcards, details reveals, or interactive UI elements.

API Reference: MgFlipcard

Property Type Default Description
FrontText string "" Text to display on the front side.
BackText string "" Text to display on the back side.
CardHeightCss string "h-60" Height class (Tailwind).
CardWidthCss string "w-40" Width class (Tailwind).
AnimationType MgEnums.MgAnimationType MgEnums.MgAnimationType.FlipDown The flip/fade animation type.
Clicked EventCallback<string> - Triggered when the card is clicked. Passes the ID.
An unhandled error has occurred. Reload 🗙