Flame
Version 4.0 is here!

Versatile web components made for WordPress.

Kickstart your site building process with fully functional, ready-made elements. Available as native web components, shortcodes and page builder wrappers.

Usage

Your flexible companion.

Spx is deeply integrated with WordPress and built on the web component standard, opening up a whole world of exciting possibilities for developers and WP users alike.

<spx-image-comparison lazy src-before="https://source.unsplash.com/random/1200x300" src-after="https://source.unsplash.com/random/1201x300" height="300px"> </spx-image-comparison>
<spx-navigation menu="<?php echo spxGetNavigation( 'header' ); ?>"> </spx-masonry>
[spx-typewriter auto-start loop text="Hello, this is some text"]
Components

A workable toolbox
for every occasion.

New element features are being added regularly while current functionality is constantly reviewed and enhanced.

Add

Accordion

Content toggle to show and hide text or images on click.

Heart Half

Animate

Animate all inner elements using controls like x, y and opacity.

Toggle

Class Toggle

Triggers one or multiple classes on the inner element.

Code Slash

Code

Highlights a given piece of text like in a code editor.

Create

Edit Button

Allows you to edit custom fields and options from the frontend.

Layers

Group

A utility component to apply the same settings to multiple elements.

Thumbs Up

Icon

Renders an icon from the Ionicon library. Font Awesome support coming soon.

Terminal

Iframe

An enhanced Iframe element with enhanced capabilities.

Contrast

Image Comparison

Compare two images using a slider. (before/after)

Camera

Lightbox

Opens a group of images in an overlay above the page.

Image

Masonry

Lay out images or elements in masonry style (Pinterest-like) grid.

Tablet Portrait

Mockup

Display a device mockup (iPhone, MacBook etc.) around an image.

Reorder Three

Navigation

Render an accessible navigation from a WordPress menu.

Color Wand

Notation

Notate parts of a text, similar to making scribbes in a notebook.

Move

Offset

Responsively offsets itself to the height of another element in the document.

Bug

Scrollspy

Add CSS classes to navigation items depending on scroll position.

Share Social

Share

Sharing buttons for the most popular social media networks.

Images

Slider

Image slider to navigate through a gallery of images.

Shapes

Slideshow

An infinite slideshow of images thats animated from right to left.

Information Circle

Text-Path

Wrap text around a circle-shaped image.

Text

Typewriter

Animates text like it is being written on a typewriter.

Components

Easily understood.

A straightforward syntax makes composing elements with spx a breeze for simple and advanced use cases.

<spx-accordion header-text="Click to show more" content-text="I am hidden text"> </spx-accordion>
<spx-accordion> <h1 slot="header">Header slot ✌️</h1> <img slot="content" src="https://source.unsplash.com/random/800x300" alt="image" /> </spx-accordion>

Header slot ✌️

image
<spx-accordion link-type="close" link="acc" header-text="Accordion 1" content-text="I am hidden text"> </spx-accordion> <spx-accordion link-type="close" link="acc" header-text="Accordion 2" content-text="I am hidden text"> </spx-accordion> <spx-accordion link-type="close" link="acc" header-text="Accordion 3" content-text="I am hidden text"> </spx-accordion>
Flexibility

Truly future-proof.

By adopting an open web standard, spx is able to adjust its elements to the previous, current and future tools available in the WordPress world.

logo Web Components
logo Shortcodes
logo Oxygen Wrapper
soon
logo Gutenberg blocks
soon
logo Elementor wrapper
soon
logo Brizy wrapper
Flexibility

Extendable if needed.

Need to build your own customised solution? All component data is available as JSON files inside the plugin folder.

// spx-masonry.json { "name": "spx-masonry", "description": "Arrange images in a masonry layout.", "properties": [ { "attribute": "columns", "default": "4", "description": "Number of columns.", "id": "spx-masonry-0", "index": 0, "name": "columns", "tags": [], "type": "number" }, { "attribute": "gap", "default": "10px", "description": "Gap between images.", "id": "spx-masonry-1", "index": 1, "name": "gap", "tags": [ { "name": "css" } ], "type": "string", "variable": "--spx-masonry-gap" } } ... }

Pagebuilder modules

Use it as a base to automatically generate native elements for your favourite page builder. The same approach is used internally to create all component shortcodes.

Custom field solutions

Systematically map spx component settings to custom fields using the JSON data.

Performance

Goodbye large bundles.

Instead of serving a single file, spx is dynamically loading the components which are currently active on the page.

performance

Not convinced?

Give the component library a testdrive in the newly designed and improved element editor.