Flip

The Flip Community Component — a two-faced card that flips between a front and a back face on click. Usage, options, and live examples.

flip is a two-faced surface that rotates between a front and a back face. The block body is the front face; set back for the back face. By default it flips on click; turn on swipeable for touch flips, and use direction, duration, easing, and perspective to shape the animation.

A Community Component — wraps Flip by gfazioli, MIT licensed, npm @gfazioli/mantine-flip.

Use it as {% flip %}…{% endFlip %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'flip', …).

Demonstrations

The block body is the front face. Set back for the back face, then click the card to flip it. Give it a width and height (w / h) so both faces share a box.

{% flip w=320 h=160 back='And this is the back. Click again to flip back.' %}
This is the front face. Click to flip.
{% endFlip %}

Flip direction

Set direction to vertical to flip top-over-bottom instead of the default horizontal.

{% flip w=320 h=160 direction='vertical' back='Flipped vertically.' %}
Vertical flip — click me.
{% endFlip %}

Easing and duration

easing accepts ease, ease-in, ease-out, ease-in-out (the default), linear, or spring; duration is the flip time in seconds (default 0.8), and perspective is a CSS length (e.g. 1200px, default 1000px) that sets the 3D depth.

{% flip w=320 h=160 easing='spring' duration=0.9 perspective='1200px' back='Sproing!' %}
A bouncy spring flip — click me.
{% endFlip %}

Starting flipped

Set defaultFlipped=true to show the back face first.

{% flip w=320 h=160 defaultFlipped=true back='You are looking at the back face first.' %}
The hidden front face.
{% endFlip %}

With other components

The front face is the block body, so it can hold any other component. Here a Card is the front face and a short message is the back.

{% flip w=340 h=200 back='Thanks for flipping! The back face is plain text.' %}
{% card title='Flip me' withBorder=true %}This whole card is the front face of a flip — click anywhere on it.{% endCard %}
{% endFlip %}

Attributes

Omit any attribute to take its default. Bare flags (e.g. swipeable) become =True.

CSS Selector

The package exposes these hooks you can target from your site CSS (e.g. a project stylesheet):

Injecting Attributes

Pass attr={…} to forward raw HTML attributes (id, class, data-*, ARIA, inline style) onto the rendered element — an escape hatch for anything not covered by a named attribute above.