Marketing module

Flip Box block

A card that flips on hover, keyboard focus or tap to reveal a message and a button.

Overview

The Flip Box has two faces. The front shows an icon, a title and a teaser; when visitors point at it, tab to it or tap it, it turns (or fades, or slides) to the back, which shows more detail and an optional button.

At a glance

Block name: wpbb/flip-box
Module: Marketing
Find it by searching: Flip Box
Loads JavaScript on the site: No

When and why to use it

Services or team members with a surprise reveal.
Playful feature grids.

Example scenarios

Services: three flip boxes with an icon and service name on the front, a description and “Learn more” button on the back.

See it in action

These are live examples: real Flip Box blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Flip effects — Point at (or tab to) the cards.

Open in a new tab

How to add the Flip Box block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Flip Box in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Flip Box in the results. The block appears with empty front and back text fields and a lightning icon.
Configure the content. Type the front title and teaser. Then click Back in the block toolbar to edit the back title and text. Open the Settings tab for the effect, colours and link.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Front title

What it does: The title on the front (an H3).
What to enter or choose: A few words (plain text).
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always.
Example: “Branding”.
Result: Shown on the front.

Front text

What it does: A short teaser.
What to enter or choose: One sentence.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Optional.
Example: “Identities people remember.”
Result: Below the front title.

Back title

What it does: The title on the back.
What to enter or choose: A few words.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Usually.
Example: “What you get”.
Result: Shown on the back.

Back text

What it does: The detail revealed on flip.
What to enter or choose: One to three sentences.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always.
Example: “Logo, palette, type and a brand book.”
Result: Shown on the back.
Good to know: If all four texts are empty, nothing is shown on the site.

Settings panel: Flip

Effect

What it does: How the card changes from front to back.
What to enter or choose: One of: Flip horizontally, Flip vertically, Fade, Slide up.
Default: Flip horizontally
How to use it: Open the dropdown and pick an option.
When to use it: Pick one effect per page.
Example: Fade for a calm effect.
Result: For visitors who prefer reduced motion, the effect is replaced by a simple fade.

Height (px)

What it does: The minimum height of the card (both faces share it).
What to enter or choose: A number from 200 to 640 (px).
Default: 320 px
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Use the same value for flip boxes in a row so they line up.
Example: 360 for a taller tile.
Result: The card gets taller. If the text on either face needs more room, the card grows to fit it — nothing is cut off.

Text alignment

What it does: Aligns the text on both faces.
What to enter or choose: One of: Left, Center.
Default: Center
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Center.
Result: Text moves.

Settings panel: Front

Background

What it does: The front face background.
What to enter or choose: One of: White card, Tint, Dark, Image.
Default: White card
How to use it: Open the dropdown and pick an option.
When to use it: Always optional.
Example: Image for a photo tile.
Result: The front changes.

Front imageShown when Background is Image

What it does: The front photo.
What to enter or choose: Choose, replace or remove an image.
Default: 0
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: With the Image background.
Example: A project photo.
Result: The photo fills the front (Large size).

Icon

What it does: An icon badge on the front.
What to enter or choose: An icon, or None.
Default: zap
How to use it: Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
When to use it: Optional.
Example: “zap”.
Result: A 64px warm badge.

Settings panel: Back

Background

What it does: The back face background.
What to enter or choose: One of: Brand, Dark, Tint.
Default: Brand
How to use it: Open the dropdown and pick an option.
When to use it: Always optional.
Example: Brand.
Result: The back changes.

Link

What it does: The page the button on the back goes to when clicked.
What to enter or choose: A web address (https://…) or a page, post or file on your site. Start typing a page title to search your site.
Default: Empty
How to use it: Click the link button, then paste an address or search for a page on your site and press Enter.
When to use it: Almost always — a call to action should lead somewhere.
Example: Type “Contact” and pick your Contact page, or paste https://example.com/pricing.
Result: The button on the back becomes a real link.
Good to know: Two extra switches appear once a link is set.

Open in new tabShown when a link is set

What it does: Opens the link in a new browser tab.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For links to other websites or documents (PDFs) you do not want visitors to lose your page for.
Example: A link to your booking platform.
Result: The link gets target="_blank" and rel="noopener" for security, and screen readers hear “(opens in a new tab)”.
Good to know: Avoid it for normal links inside your own site — visitors can choose to open a new tab themselves.

Add rel="nofollow"Shown when a link is set

What it does: Tells search engines not to pass ranking credit to the linked page.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For paid, sponsored or untrusted links.
Example: An affiliate link to a product.
Result: The link gets rel="nofollow". Visitors see no difference.

Button textShown when a link is set

What it does: The label of the back button.
What to enter or choose: Short action text.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: With a link.
Example: “See pricing”.
Result: The button shows this text; empty shows “Learn more”.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Flip Box offers.

Element: Front selected first

The front face.

Styles-tab controls for “Front”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal

States: Normal only.

Element: Block

The outer wrapper.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Back

The back face.

Styles-tab controls for “Back”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal

States: Normal only.

Element: Titles

Both titles.

Styles-tab controls for “Titles”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Button

The back button. Hover, Focus and Active states.

Styles-tab controls for “Button”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus, Active
Colors	Text	—	Normal, Hover, Focus, Active
Background	Type	—	Normal, Hover, Focus, Active
	Color / Gradient	—	Normal, Hover, Focus, Active
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus, Active
	Border	—	Normal, Hover, Focus, Active
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus, Active
Box Shadow	Shadow layers	—	Normal, Hover, Focus, Active
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus, Active

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Active — While it is being clicked or pressed.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

Pure CSS: the card flips on hover and when it (or its button) has keyboard focus. On touch screens, tapping the card flips it (the card takes focus when tapped); tapping elsewhere flips it back. No JavaScript.

Accessibility

Both faces are in the page, so screen readers read the front and back text.
Keyboard users flip the card by tabbing to it.
Reduced-motion preference: flips become fades.

Tips and best practices

Keep the back text short: the card grows to fit longer text, which can make cards in a row uneven.
Use the same height for flip boxes in a row.

Limitations and notes

Touch devices have no hover: visitors tap to flip.

Overview

At a glance

When and why to use it

Example scenarios

See it in action

How to add the Flip Box block

Content settings

On the block (in the editor canvas)

Front title

Front text

Back title

Back text

Block toolbar

Front / Back

Settings panel: Flip

Effect

Height (px)

Text alignment

Settings panel: Front

Background

Front imageShown when Background is Image

Icon

Settings panel: Back

Background

Link

Open in new tabShown when a link is set

Add rel="nofollow"Shown when a link is set

Button textShown when a link is set

Design & styling

Element: Front selected first

Element: Block

Element: Back

Element: Titles

Element: Button

Responsive settings

Advanced options

How it works on your site

Accessibility

Tips and best practices

Limitations and notes