Interactive Cards – EMCP Widget Demos

← All widgetsWidget 100 · emcp_custom_100

Interactive Cards

Elementor widget8 layouts7 content options29 style options4 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: card, flip, hover, reveal, interactive, grid, 3d.

Setup guide

Open a page in Elementor, search the panel for Interactive Cards and drag it into a container.
Content › Cards: Interaction, Trigger, Columns, Card Height, Cards, Title Tag, Text Align.
Pick a Interaction: Flip horizontal, Flip vertical, Slide up reveal, Cross fade, Push (3D tilt), Zoom back face in. Each one is shown below.
Style tab sections: Grid & Card, Front Face, Back Face. Colours, typography and spacing set here are scoped to this widget instance.
Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.

Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.

Layout

Flip horizontal

Interaction = flip-x

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Layout

Flip vertical

Interaction = flip-y

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Layout

Slide up reveal

Interaction = slide-up

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Layout

Cross fade

Interaction = fade

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Layout

Push (3D tilt)

Interaction = push

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Layout

Zoom back face in

Interaction = zoom

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Trigger

Hover

Trigger = hover

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Trigger

Click / tap

Trigger = click

Web Design

Hover to learn more

Beautiful, fast websites

We design responsive sites that convert visitors into customers.

Branding

Hover to learn more

Identity that sticks

Logos, color systems and voice built to last.

Marketing

Hover to learn more

Growth on autopilot

SEO, paid media and email that compound over time.

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Cards

Option	Type	Choices / range	Default	Notes
Interaction `effect`	Dropdown	Flip horizontal, Flip vertical, Slide up reveal, Cross fade, Push (3D tilt), Zoom back face in	flip-x
Trigger `trigger`	Dropdown	Hover, Click / tap	hover
Columns `columns`	Dropdown	1, 2, 3, 4	3	Responsive
Card Height `height`	Slider	min 150, max 800, px	320	Responsive
Cards `cards`	Repeater		3 items
↳ Front Image `front_image`	Image
↳ Front Icon `front_icon`	Icon
↳ Front Title `front_title`	Text		Web Design
↳ Front Subtitle `front_text`	Text
↳ Back Title `back_title`	Text		Beautiful, fast websites
↳ Back Text `back_text`	Textarea		We design responsive sites that conve...
↳ Button Text `cta_text`	Text		Learn more
↳ Button Link `link`	Link
Title Tag `title_tag`	Dropdown	H2, H3, H4, div	h3
Text Align `align`	Button group	Left, Center, Right	center

Style tab

Grid & Card

Option	Type	Choices / range	Default	Notes
Gap `gap`	Slider	min 0, max 80, px	24	Responsive
Card Radius `radius`	Slider	min 0, max 60, px	16
Card Shadow `shadow`	Box shadow
Hover Shadow `shadow_h`	Box shadow
Face Padding `pad`	Dimensions			Responsive
Transition Duration `duration`	Slider	min 0.1, max 3, s	0.7

Front Face

Option	Type	Choices / range	Default	Notes
Background `f_bg`	Background
Image Overlay `f_overlay`	Color		rgba(16,24,40,.45)
Border `f_border`	Border
Icon Color `f_icon_color`	Color		#ffffff
Icon Size `f_icon_size`	Slider	min 12, max 150, px	44
Title Typography `f_title_typo`	Typography
Title Color `f_title_color`	Color		#ffffff
Subtitle Typography `f_text_typo`	Typography
Subtitle Color `f_text_color`	Color		rgba(255,255,255,.8)

Back Face

Option	Type	Choices / range	Default	Notes
Background `b_bg`	Background
Border `b_border`	Border
Title Typography `b_title_typo`	Typography
Title Color `b_title_color`	Color		#ffffff
Text Typography `b_text_typo`	Typography
Text Color `b_text_color`	Color		rgba(255,255,255,.9)
Button Typography `btn_typo`	Typography
Button Text `btn_color`	Color		#101828
Button Background `btn_bg`	Color		#ffffff
Button Hover Text `btn_color_h`	Color
Button Hover Background `btn_bg_h`	Color
Button Padding `btn_pad`	Dimensions
Button Radius `btn_radius`	Slider	min 0, max 60, px	8
Button Border `btn_border`	Border

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_100" and a settings object using the keys above. Run get-custom-widget with id 100 for the full JSON spec.