Flip Card

One 3D flip card with a front and a back face, each with its own background, that turns over on hover. It is shown in the block inserter as Flip Card and registered as canvas-core/flip-card.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Front

• IconDefaultbi-check-circle

  An icon above the title on the front.

• TitleDefaultSpecial title treatment

  The heading on the front.

• SubtitleDefaultWith supporting text below as a natural lead-in to additional content.

  A second line under the title on the front.

• Subtitle StyleDefaultParagraph

  How the subtitle is set: as ordinary body copy, or as a lighter italic caption.

  ChoicesParagraphItalic caption

• Background TypeDefaultColor

  Whether the front is backed by a picture or by a colour class.

  ChoicesImageColor

• Background ImageDefault0

  The picture behind the front.

  Shown when Background Type is "Image"

• Background Color ClassDefaultbg-info

  A colour class for the front, such as bg-info or bg-dark.

  Shown when Background Type is "Color"

• Darken the BackgroundDefaultOn

  Lays a dark wash over the front background, so the wording stays readable over a busy picture.

Back

• TextDefaultCapture every detail with a clean, modern layout built for showcasing your visual work.

  What the back says once the card has turned.

• Button TextDefaultView Details

  Wording on the button at the foot of the back. Leave it empty for a back with no button.

• Button URLDefaultEmpty

  Where the button takes the visitor. With no URL the button is a plain button that goes nowhere.

• Open in New TabDefaultOff

  Open the button link in a new tab.

  Shown when Button URL is set

• NofollowDefaultOff

  Ask search engines not to follow the button link.

  Shown when Button URL is set

• Background TypeDefaultColor

  Whether the back is backed by a picture or by a colour class.

  ChoicesImageColor

• Background ImageDefault0

  The picture behind the back.

  Shown when Background Type is "Image"

• Background Color ClassDefaultbg-danger

  A colour class for the back, such as bg-danger. A colour back needs no darkening, so the wash is left off.

  Shown when Background Type is "Color"

• Darken the BackgroundDefaultOn

  Lays a dark wash over the back background picture.

Layout

• Flip Top to BottomDefaultOff

  Turn the card end over end instead of sideways.

• Centre the TextDefaultOn

  Centre the wording on both faces.

• Height (px)Default0

  A fixed height for the card. 0 lets it take its height from its content and the row.

Classes

• Title ClassesDefaultcard-title

  Style classes on the title.

• Front Content ClassesDefaultEmpty

  Style classes on the block of wording inside the front.

• Front ClassesDefaultEmpty

  Style classes on the front face.

• Back ClassesDefaultEmpty

  Style classes on the back face.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Galleries.