Flip Cards

Interactive 3D flip cards with configurable front and back faces, icon, title, subtitle, rich-text content, CTA button, and per-face background image or color. It is shown in the block inserter as Canvas Flip Cards and registered as canvas-core/flip-cards.

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:

Cards

• CardsDefaultEmpty

  The cards, in the order they appear. Each row is one card, with a front a visitor sees first and a back it turns to reveal.

  Each row of Cards takes:

  • Front IconDefaultEmpty

    An icon above the title on the front of this card.

  • Front TitleDefaultEmpty

    The heading on the front of this card.

  • Front SubtitleDefaultEmpty

    A second line under the title on the front of this card.

  • Front Background TypeDefaultColor

    Whether the front of this card is backed by a picture or by a flat colour. Only the matching setting below is read.

    ChoicesImageColor

  • Front Background ImageDefault0

    The picture behind the front of this card.

  • Front Background ColorDefaultEmpty

    The colour behind the front of this card, written as a colour value.

  • Back ContentDefaultEmpty

    What the back of this card says once it has turned. This is where the detail the front only hints at belongs.

  • Back Button TextDefaultEmpty

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

  • Back Button URLDefaultEmpty

    Where that button takes the visitor.

  • Back Background TypeDefaultColor

    Whether the back of this card is backed by a picture or by a flat colour. Only the matching setting below is read.

    ChoicesImageColor

  • Back Background ImageDefault0

    The picture behind the back of this card.

  • Back Background ColorDefaultEmpty

    The colour behind the back of this card, written as a colour value.

  • Subtitle StyleDefaultParagraph

    How the second line on the front is set: as ordinary body copy, or as a lighter italic caption.

    ChoicesParagraphItalic caption

  • Flip Top to BottomDefaultOff

    Turns this one card end over end instead of sideways, whatever the direction set for the rest.

  • Centre This CardDefaultOn

    Centres the wording on this one card, whatever is set for the rest.

  • Card Height (px)Default0

    Overrides the block height for this card. 0 takes the height from the row.

  • Column ClassDefaultEmpty

    Style classes on the column this one card sits in, for a card that takes a different share of the row from the rest.

  • Card CSS ClassesDefaultEmpty

    Style classes on this card as a whole, covering both faces.

  • Front Face CSS ClassesDefaultEmpty

    Style classes on the front face of this card.

  • Back Face CSS ClassesDefaultEmpty

    Style classes on the back face of this card.

  • Front Content CSS ClassesDefaultEmpty

    Style classes on the block of wording inside the front face.

  • Title CSS ClassesDefaultcard-title

    Style classes on the heading on the front face.

Carousel

• Items (XS)Default1

  Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

  Shown when Layout is "Carousel"

• Items (SM)Default2

  Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Items (MD)Default3

  Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Items (LG)Default4

  Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Items (XL)Default4

  Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Item Gap (px)Default20

  Space between one slide and the next, in pixels.

  Shown when Layout is "Carousel"

• Show ArrowsDefaultOn

  Show the previous and next arrows beside the slides.

  Shown when Layout is "Carousel"

• Arrows Always VisibleDefaultOff

  Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

  Shown when Layout is "Carousel"

• Show DotsDefaultOn

  Show the row of dots below the slides, one per page.

  Shown when Layout is "Carousel"

• Autoplay (ms)Default0

  Milliseconds between slides. 0 disables autoplay.

  Shown when Layout is "Carousel"

• LoopDefaultOff

  Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

  Shown when Layout is "Carousel"

• Transition SpeedDefault250

  Milliseconds per slide transition.

  Shown when Layout is "Carousel"

• Centre Active SlideDefaultOff

  Keeps the active slide in the middle of the stage.

  Shown when Layout is "Carousel"

• Stage PaddingDefault0

  Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

  Shown when Layout is "Carousel"

• Animate InDefaultEmpty

  Animation class applied to the incoming slide. Empty uses a plain slide.

  Shown when Layout is "Carousel"

• Animate OutDefaultEmpty

  Animation class applied to the outgoing slide. Empty uses a plain slide.

  Shown when Layout is "Carousel"

Layout

• LayoutDefaultGrid

  How the cards are arranged: a fixed grid, or a carousel a visitor moves through.

  ChoicesGridCarousel

• ColumnsDefault3

  How many cards sit across a row in the grid on a wide screen. Narrower screens step down on their own.

• Flip DirectionDefaultHorizontal

  Which way the cards turn: sideways, or end over end. A single card can override this on its own row.

  ChoicesHorizontalVertical

• Card Height (px)Default0

  Fixed height for every card. 0 lets the cards take their height from the row, which is what a masonry grid needs.

• Centre Card TextDefaultOn

  Centres the wording on every card. A single card can override this on its own row.

• Masonry GridDefaultOff

  Let cards of different heights stack without gaps.

  Shown when Layout is "Grid"

• Container CSS ClassesDefaultEmpty

  Style classes on the block that holds all the cards, usually to set the space around the set.

• Column Class OverrideDefaultEmpty

  Style classes on the column every card sits in, in place of the ones Columns would work out. Use it when the grid has to break at widths the Columns setting does not cover.

  Shown when Layout is "Grid"

Display

• Show Front OverlayDefaultOn

  Lays a dark wash over the front background, so wording stays readable over a busy picture. Turn it off where the background is already plain.

• Show Back OverlayDefaultOn

  The same wash over the back background.

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.