Purchase

Web Components

Introduced by Alex Rusell at the Fronteers Conference in 2011, Web Components have since gained traction among web developers to create encapsulated and reusable elements for the web.

They look like that:

<my-component name="Dennis"/>

As you can see, it's not much different than your standard HTML elements like a div or li. Since web components are built with Javascript, they are executed on the client-side, so when visited in a browser. A custom component could be programmed in any way, depending on its purpose.

For example, the goal could be to create a card component that displays the 'name' attribute in an H1 tag wrapped in a div once executed:

<my-card name="Dennis"> <div class="card-wrap"> <h1 class="card-title">Dennis</h1> </div> </my-card>

Components behave like standard HTML elements, so you can target them by using CSS:

my-card { background: white; padding: 1em; border-radius: 0.125em; }

That's it, for the most part. Let's dive deeper into how spx is utilizing the power of web components.

Attributes

All settings for spx components are applied using attributes. These are no different to attributes for standard HTML elements.

<spx-masonry columns="4" bp-columns="1000:2,600:1" gap="2%"> <img src="img.jpg"/> <img src="img2.jpg"/> <img src="img3.jpg"/> ... </spx-masonry>

The above code would output a masonry layout of images that spans four columns, with a gap of 2% between images. The number of columns will reduce to 2 when the screen size is under 1000px and to 1 when under 600px.

Every component has different possible attributes that can be applied. Please head to the individual components to find out more.

CSS variables

Components which are not purely functional can also be styled using CSS variables. The variable names correlate with their attribute counterpart like this:

:root { --spx-masonry-gap: 10px; }

That would create a gap of 10px between all images of all existing masonry components on the site. If you want to target a specific instance, you could give an ID or class to the component:

<spx-masonry id="my-masonry"> <img src="img.jpg"/> <img src="img2.jpg"/> <img src="img3.jpg"/> ... </spx-masonry> #my-masonry { --spx-masonry-gap: 1em; }

While it is technically possible to style the components directly and without CSS variables, it is not recommended. Since all CSS is generated dynamically, random classes are being applied by the CSS-in-JS engine (spx is using Emotion). These classes change depending on the applied attributes. CSS variables are also future-proof in case components will be switched over to use the new Shadow DOM API.

On top of that, some component attributes apply the same value to many different properties for the element to function correctly, making styling without CSS variables not a viable option.

Tokens

Besides variables for all individual components, some general design tokens that affect all components.

body { --spx-font-family: var(--spx-token-font-family,helvetica,segoe,arial,sans-serif); --spx-font-size: var(--spx-token-font-size,16px); --spx-border-radius: var(--spx-token-border-radius,0.5em); --spx-transition-duration: var(--spx-token-transition-duration,150ms); --spx-transition-duration-2: var(--spx-token-transition-duration-2,500ms); --spx-transition-timing-function: var(--spx-token-transition-timing-function,cubic-bezier(0.4,0,0.2,1)); }

Please note that all builder elements use a different system for the font-family and font-size and are thus not altered by the above values.

Responsive design

Creating responsive designs using spx components is straight forward and possible in two different ways. Let's change the font-size of our navigation element for desktop screen sizes.

@media (min-width: 1280px) { body { --spx-navigation-font-size: 24px; } }

Using CSS variables is preferred, however, it is also possible to style elements responsively using attributes.

<spx-navigation bp-1280="font-size: 24px"> </spx-navigation>

This will have the same result as styling the component with the CSS code from above but instead relies on the ResizeObserver interface to apply the appropriate values. Of course, it is possible to create various breakpoints and add multiple attributes.

<spx-navigation bp-1280="font-size: 24px; parent-item-padding: 18px;" bp-1920="font-size: 30px"> </spx-navigation> @media (min-width: 1280px) { body { --spx-navigation-font-size: 18px; --spx-navigation-parent-item-padding: 24px; } } @media (min-width: 1920px) { body { --spx-navigation-font-size: 30px; } }

Helpers

While many of the components will work without WordPress, the true, time-saving power of spx comes from using it in conjunction with the provided PHP helper functions. At the moment, helper functions exist for the masonry and navigation component. The navigation component only works using the helper function.

<?php $images = spx\Get::gallery("myGallery", "acf") ?> <spx-masonry images="<?php echo $images ?>"/>

This will automatically create a masonry layout from the ACF gallery!

Available helpers:

<?php // gets images for masonry, slider, slideshow spx\Get::gallery($fieldName, $fieldType) // gets a menu for navigation spx\Get::navigation($name) // gets a single post for page-single spx\Get::post($id, $dateFormat, $imageSize)

Helpers are also available as non class-based functions:

<?php // gets images for masonry, slider, slideshow spxGetGallery($fieldName, $fieldType) // gets a menu for navigation spxGetNavigation($name) // gets a single post for page-single spxGetPost($id, $dateFormat, $imageSize)

Slots

Some components have certain slots that can be filled with custom markup. For example, the accordion can be filled with custom slots for the header and content.

<spx-accordion> <div slot="header">Click me to unveil the content</div> <img slot="content" src="image.jpg"/> </spx-accordion>

Events

Javascript events are being emitted by a couple of components. You can attach an event listener to those just like you normally would.

document.addEventListener('spxEditButtonSave', function() { // your functions });

Methods

Components might expose public methods in Javascript:

(async () => { await customElements.whenDefined('spx-typewriter'); const sT = document.querySelector('spx-typewriter'); await sT.play(); })();

The above code would start the animation of the typewriter component. Methods come in handy when trying to interact with other libraries and functions.

API

spx contains a set of .json files that includes all of the component information. It is located in the plugin folder and named data.

Inside each file, you'll find information about the component, attribute names, default values, data types and more. The data can be used to integrate the components into page builders or other systems with ease.

We are using the same set internally to automatically generate a good portion of this documentation and all of the available shortcodes.

Since the data is recreated with every update, all information found inside the files is always current and up to date.

Oxygen

Before version 2.0, components were integrated inside of Oxygen as separate elements.

2.0 is changing that behaviour. Instead of individual elements, there now is a master element, which can become any of the core components. This has various advantages for the development team behind spx, since it isn't necessary to implement every component and property again.

Instead, the wrapper now correlates with the core JavaScript components, meaning that every new element and property is immediately available to be used inside Oxygen. Settings can be applied using the "Attributes" text box just like outside of Oxygen. The single components are still available in 2.0, but will be removed with version 3.0. It is advised to use the wrapper element from now on.

oxygen wrapper

Of course, it is still possible to use spx elements inside code blocks.

Shortcodes

Components as shortcodes are available starting from version 3.0. This means that spx can be now used in even more places. Using shortcodes is not much different than using web components themselves.

[spx-accordion header-text="I was made with a shortcode"] <spx-accordion header-text="I was made with a shortcode"/>

The code above would render the same accordion component. It is also possible to use enclosing shortcodes where applicable:

[spx-accordion] <div slot="header">My custom header</div> [/spx-accordion] <spx-accordion> <div slot="header">My custom header</div> </spx-accordion>

Since helper functions are not yet supported and functionality restrictions, the following components are not available as :

  • Navigation
  • Group
  • Scrollspy
  • Snackbar

Accordion

Available as: Web ComponentShortcodeOxygen Element

The classic method to show and hide elements on your website. Can be used with custom markup for the header and/or content section.

<spx-accordion indicator-icon="happy" header-text="Click me to show some more text"> <h1 slot="content"> Hello! </h1> </spx-accordion>
<style> spx-accordion + spx-accordion { margin-top: 12px; } </style> <spx-accordion indicator-icon="cube" header-text="Clicking one accordion will close the other ones" link="my-link-id" link-type="close"> </spx-accordion> <spx-accordion indicator-icon="aperture" header-text="Clicking one accordion will close the other ones" link="my-link-id" link-type="close"> </spx-accordion> <spx-accordion indicator-icon="apps" header-text="Clicking one accordion will close the other ones" link="my-link-id" link-type="close"> </spx-accordion>
<style> spx-accordion + spx-accordion { margin-top: 12px; } </style> <spx-accordion indicator-icon="cube" header-text="Clicking one accordion will toggle the other ones" link="my-link-id" link-type="toggle"> </spx-accordion> <spx-accordion indicator-icon="aperture" header-text="Clicking one accordion will toggle the other ones" link="my-link-id" link-type="toggle"> </spx-accordion> <spx-accordion indicator-icon="apps" header-text="Clicking one accordion will toggle the other ones" link="my-link-id" link-type="toggle"> </spx-accordion>
<spx-accordion indicator-icon="happy" header-text="Click me to show some more text" reverse> <h1 slot="content"> Hello! </h1> </spx-accordion>

Properties

content-color

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-accordion-content-color

Content color.

content-text

Type: stringDefault: 'Default Content Text'

Content text.

content-text-tag

Type: stringDefault: 'span'

Content text tag.

content-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-accordion-content-transition-duration

Content transition-duration.

content-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-accordion-content-transition-timing-function

Content transition-timing-function.

disable-animation

Type: boolean

Disables the animation. Set this attribute if the accordion is starting hidden in the DOM.

font-size

Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-accordion-font-size

Component font-size property.

gap

Type: stringDefault: '0.4em'CSS variable: --spx-accordion-gap

Space between header and content.

header-color

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-accordion-header-color

Header color.

header-gap

Type: stringDefault: '0.4em'CSS variable: --spx-accordion-header-gap

Gap between header text and icon.

header-text

Type: stringDefault: 'Default Header Text'

Header text.

header-text-open

Type: string

Header text when component is closed.

header-text-tag

Type: stringDefault: 'span'

Header text tag.

indicator-icon

Type: stringDefault: 'arrow-down'

Indicator icon.

indicator-icon-transform

Type: stringDefault: 'rotate(180deg)'

Indicator icon transform.

indicator-icon-type

Type: stringDefault: 'ionicons'

Indicator icon type.

link

Type: string

Sets the ID to link different accordions together.

link-type

Type: stringChoices: 'open', 'close', 'toggle'

Sets the type of link.

open-state

Type: booleanDefault: false

State of accordion.

reverse

Type: boolean

Reverse icon positioning.

Slots

content

Slot for the content.

header

Slot for the header.

Events

spxAccordionDidLoad

Fires after component has loaded.

Methods

close

Closes the accordion.

open

Opens the accordion.

reload

Reload component.

toggle

Toggles the accordion.

Animate

Available as: Web ComponentShortcodeOxygen Element

Wrapper around GSAP that allows for staggered and scroll-based animation.

<spx-animate duration="1" opacity="0" viewport stagger="0.05"> <h1>Hi!</h1> <h1>Hi!</h1> <h1>Hi!</h1> <h1>Hi!</h1> <h1>Hi!</h1> </spx-animate>

Properties

delay

Type: number

Delay before animation starts.

display

Type: stringDefault: 'block'CSS variable: --spx-animate-display

Component display property.

duration

Type: numberDefault: 1

Animation duration.

ease

Type: stringDefault: 'power1.out'

Ease being used. Accepts all common GSAP options.

once

Type: boolean

Determines if animation should only play once. (if viewport is true)

opacity

Type: number

Opacity level the animation starts from.

repeat

Type: number

Repeats the animation. -1 to repeat indefinitely.

repeat-delay

Type: number

Time to wait between repetitions.

reverse

Type: boolean

Reverses the animation.

stagger

Type: numberDefault: 0.15

Amount of time elements should be staggered by.

target

Type: stringDefault: '*'

The target element that should be animated inside the component.

viewport

Type: boolean

Starts animation when target is in the viewport.

viewport-margin-bottom

Type: stringCSS variable: --spx-animate-viewport-margin-bottom

Adjust the root margin of the animation start.

viewport-margin-left

Type: stringCSS variable: --spx-animate-viewport-margin-left

Adjust the root margin of the animation start.

viewport-margin-right

Type: stringCSS variable: --spx-animate-viewport-margin-right

Adjust the root margin of the animation start.

viewport-margin-top

Type: stringCSS variable: --spx-animate-viewport-margin-top

Adjust the root margin of the animation start.

x

Type: number

X position the animation starts from.

y

Type: number

Y position the animation starts from.

yoyo

Type: boolean

Causes the animation to go back and forth, alternating backward and forward on each repeat.

Events

spxAnimateDidLoad

Fires after component has loaded.

Methods

play

Plays animation.

reload

Reload component.

restart

Restarts animation.

Class Toggle

Available as: Web ComponentShortcodeOxygen Element

Toggle CSS classes on any element in the document.

<style> .color-red { color: red; } .bg-yellow { background-color: yellow; border-color: yellow; } </style> <spx-class-toggle toggle="color-red bg-yellow" local="spxClassToggleDocumentationMultiple"> <button> Click me! </button> </spx-class-toggle>
<style> .red { color: red; } </style> <spx-class-toggle toggle="red" local="spxClassToggleDocumentationSingle"> <button> Click me! </button> </spx-class-toggle>

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-class-toggle-display

Component display property.

local

Type: string

Specify a local storage item, so the toggle state will be remembered when the user visits the site again.

target

Type: string

Target element. Can take any querySelector value. (id, class, tag etc.) If none is set it will default to the first element inside.

toggle

Type: stringDefault: 'spx-class-toggle--active'

List of classes that should be toggled.

Events

spxClassToggleDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Code

Available as: Web ComponentShortcodeOxygen Element

Highlight a block of code similar to a code editor.

<spx-code type="css"> @media (min-width: 1280px) { body { margin: 18px; padding: 24px; } } </spx-code>

Properties

background

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-code-background

Component background property.

border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-code-border-radius

Component border-radius property.

clipboard

Type: booleanDefault: true

Enable clipboard button.

clipboard-button-background

Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-code-clipboard-button-background

Clipboard button background.

clipboard-button-color

Type: stringDefault: 'var(--spx-color-gray-400)'CSS variable: --spx-code-clipboard-button-color

Clipboard button color.

clipboard-button-font-size

Type: stringDefault: '12px'CSS variable: --spx-code-clipboard-button-font-size

Clipboard button font-size.

clipboard-button-font-weight

Type: anyDefault: 600CSS variable: --spx-code-clipboard-button-font-weight

Clipboard button font-weight.

clipboard-button-padding

Type: stringDefault: '6px 12px'CSS variable: --spx-code-clipboard-button-padding

Clipboard button padding.

clipboard-button-text

Type: stringDefault: 'Copy'

clipboard-button-text-copied

Type: stringDefault: 'Copied!'

clipboard-button-text-transform

Type: stringDefault: 'uppercase'CSS variable: --spx-code-clipboard-button-text-transform

Clipboard button text-transform.

display

Type: stringDefault: 'block'CSS variable: --spx-code-display

Component display property.

font-size

Type: stringDefault: 'clamp(12px, 1.6vw, 16px)'CSS variable: --spx-code-font-size

Component font-size property.

height

Type: stringDefault: 'auto'

hide-scrollbar

Type: boolean

Hide scrollbar.

line-numbers

Type: booleanDefault: true

Enable line numbers.

line-numbers-background

Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-code-line-numbers-background

Line numbers background.

line-numbers-color

Type: stringDefault: 'var(--spx-color-gray-400)'CSS variable: --spx-code-line-numbers-color

Line numbers color.

max-width

Type: stringDefault: '100%'CSS variable: --spx-code-max-width

Component max-width property.

overflow

Type: stringDefault: 'auto'

padding

Type: stringDefault: 'clamp(20px, 2.4vw, 40px)'CSS variable: --spx-code-padding

Component padding property.

theme

Type: stringDefault: 'default'Choices: 'default', 'dracula'

Colour theme.

type

Type: stringDefault: 'markup'Choices: 'markup', 'css', 'php'

Determines the programming language.

Events

spxCodeDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Edit Button

Available as: Web ComponentShortcodeOxygen Element

Let your clients edit text on their site using this handy component.

<h1 data-spx-edit="test">Hello, I am test content.</h1> <spx-edit-button test position="bottom-right"></spx-edit-button>

There is a guide available for this component.

Properties

background

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-edit-button-background

Component background property.

background-discard

Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-edit-button-background-discard

Discard button background.

border

Type: stringDefault: 'none'CSS variable: --spx-edit-button-border

Component border property.

border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-edit-button-border-radius

Component border-radius property.

color

Type: stringDefault: '#ffffff'CSS variable: --spx-edit-button-color

Component color property.

color-discard

Type: stringDefault: '#ffffff'CSS variable: --spx-edit-button-color-discard

Discard button color.

distance-x

Type: stringDefault: '1em'CSS variable: --spx-edit-button-distance-x

Distance to the edge of the viewport on the x-axis.

distance-y

Type: stringDefault: '1em'CSS variable: --spx-edit-button-distance-y

Distance to the edge of the viewport on the y-axis.

edit-id

Type: string

Corresponding ID for editable fields. This property is needed when multiple edit-button components are used on the page. Simply apply a "data-spx-edit-id" attribute with the same value to editable elements.

font-family

Type: stringDefault: 'var(--spx-font-family)'CSS variable: --spx-edit-button-font-family

Component font-family property.

font-size

Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-edit-button-font-size

Component font-size property.

gap

Type: stringDefault: '0.4em'CSS variable: --spx-edit-button-gap

Gap between the buttons.

padding

Type: stringDefault: '0.8em 1.2em'CSS variable: --spx-edit-button-padding

Component padding property.

position

Type: stringDefault: 'bottom-right'Choices: 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'

Component position in page.

position-css

Type: "absolute" | "fixed" | "relative" | "static"Default: 'fixed'

CSS property position of button.

test

Type: booleanDefault: false

text-discard

Type: stringDefault: 'Discard'

Discard button text.

text-edit

Type: stringDefault: 'Edit site'

Edit button text.

text-save

Type: stringDefault: 'Save'

Save button text.

text-success

Type: stringDefault: 'Save was successful'

Success message.

z-index

Type: numberDefault: 99CSS variable: --spx-edit-button-z-index

Component z-index property.

Events

spxEditButtonDidLoad

Fires after component has loaded.

spxEditButtonDiscard

Fires after pressing the discard button.

spxEditButtonSave

Fires after pressing the save button.

Methods

reload

Reload component.

Group

Available as: Web ComponentOxygen Element

Pass attributes to all inner (spx) child elements. All attributes that start with g-* will be passed on to child elements.

<spx-group g-indicator-icon="color-wand" g-header-gap="8px"> <spx-accordion> </spx-accordion> <spx-accordion> </spx-accordion> <spx-accordion> </spx-accordion> </spx-group>

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-group-display

Component display property.

target

Type: string

Specifies a target element.

Events

spxGroupDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Icon

Available as: Web ComponentShortcodeOxygen Element

Wrapper component for different kinds of icon sets. Currently comes included with Ionicons.

<spx-icon icon="cube"></spx-icon> <spx-icon icon="cube-outline"></spx-icon> <spx-icon icon="extension-puzzle"></spx-icon> <spx-icon icon="extension-puzzle-outline"></spx-icon>

Properties

color

Type: stringDefault: 'inherit'CSS variable: --spx-icon-color

Component color property.

icon

Type: string

Icon code.

size

Type: stringDefault: '1em'

Icon size.

type

Type: stringDefault: 'ionicons'Choices: 'ionicons', 'caret'

Icon type.

Events

spxIconDidLoad

Fires after component has loaded.

Iframe

Available as: Web ComponentShortcode

A wrapper around a standard iframe element, which scales proportionally to its parent. Great for showing desktop versions of a website on smaller screens or viewports.

<spx-iframe src="<?php echo site_url(); ?>" size="1920px"> </spx-iframe>

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-iframe-display

Component display property.

document-border

Type: stringDefault: 'none'CSS variable: --spx-iframe-document-border

Document border.

document-border-radius

Type: stringDefault: 'none'CSS variable: --spx-iframe-document-border-radius

Document radius border.

document-height

Type: stringDefault: 'auto'

document-width

Type: stringDefault: '100%'

fit

Type: boolean

Automatically resize iframe to fit content.

lazy

Type: boolean

Lazy load content.

size

Type: stringDefault: '1440px'

Screen size of the site shown inside the iframe.

src

Type: stringDefault: 'https://spx.dev'

Source for the iframe.

type

Type: stringDefault: 'resize'Choices: 'resize', 'document', 'type'

Screen size of the site shown inside the iframe.

Events

spxIFrameDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Image Comparison

Available as: Web ComponentShortcodeOxygen Element

Compare two images visually using a slider. Handy for showing subtle (or not so subtle) before/after differences.

<spx-image-comparison src-before="https://source.unsplash.com/random/1201x300" src-after="https://source.unsplash.com/random/1300x300" height="300px"> </spx-image-comparison>

Properties

color

Type: stringDefault: '#ffffff'CSS variable: --spx-image-comparison-color

Component color property.

height

Type: stringDefault: '100%'

icon-color

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-image-comparison-icon-color

Icon color.

loading

Type: "auto" | "eager" | "lazy"

Lazy load attribute.

src-after

Type: stringDefault: 'https://source.unsplash.com/random/1200x300'

Image URL of the before image.

src-before

Type: stringDefault: 'https://source.unsplash.com/random/1201x300'

Image URL of the after image.

start

Type: numberDefault: 150

Opening state in pixels.

Events

spxImageComparisonDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Lightbox

Available as: Web ComponentShortcodeOxygen Element

Overlay a gallery of images on top of the current page.

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-lightbox-display

Component display property.

height

Type: stringDefault: 'auto'

overlay-color

Type: stringDefault: 'rgba(0, 0, 0, 0.92)'CSS variable: --spx-lightbox-overlay-color

Overlay color.

width

Type: stringDefault: '100%'

Events

spxLightboxDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Masonry

Available as: Web ComponentShortcodeOxygen Element

Arrange images in a masonry layout.

<spx-masonry columns="5" gap="12px"> <img src="/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg"/> </spx-masonry>

Properties

bp-columns

Type: string

Columns for different screen sizes. Example value: 1000:3;600:2 - this will switch to a three column layout when the screen size is under 1000px and to a two column layout under 600px.

columns

Type: numberDefault: 4

Number of columns.

gap

Type: stringDefault: '10px'CSS variable: --spx-masonry-gap

Gap between images.

image-size

Type: string

WordPress media size when using the helper function..

images

Type: string<?php spx\Get::gallery($fieldName, $type) ?>

Gets images from an ACF or Metabox field.

images-src

Type: stringChoices: 'acf', 'mb'

Gets images from an ACF or Metabox field.

Events

spxMasonryDidLoad

Fires after component has loaded.

Methods

recalc

Recalculate grid.

reload

Reload component.

Mockup

Available as: Web ComponentShortcodeOxygen Element

Display device mockups around your content.

<spx-mockup type="iphone-x" src="https://picsum.photos/1000/1000"> </spx-mockup>

Properties

color-galaxy-s8

Type: stringDefault: 'black'CSS variable: --spx-mockup-color-galaxy-s8Choices: 'black', 'blue'

Samsung S8 color.

color-google-pixel

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-google-pixelChoices: 'silver', 'black', 'blue'

Google Pixel color.

color-ipad-pro

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-ipad-proChoices: 'silver', 'gold', 'rosegold', 'spacegray'

iPad Pro color.

color-iphone8

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-iphone8Choices: 'silver', 'gold', 'spacegray'

iPhone 8 color.

color-macbook

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-macbookChoices: 'silver', 'gold', 'rosegold', 'spacegray'

MacBook color.

color-macbook-pro

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-macbook-proChoices: 'silver', 'spacegray'

MacBook Pro color.

display

Type: stringDefault: 'inline-block'CSS variable: --spx-mockup-display

Component display property.

image-position

Type: stringDefault: '50% 50%'CSS variable: --spx-mockup-image-position

Component image-position property.

src

Type: stringDefault: 'https://picsum.photos/400/1200'

Image src if no inner slot is used.

type

Type: stringDefault: 'iphone-8'Choices: 'iphone-8', 'iphone-x', 'google-pixel-2-xl', 'google-pixel', 'galaxy-s8', 'ipad-pro', 'surface-pro', 'surface-book', 'macbook', 'macbook-pro', 'surface-studio', 'imac-pro', 'apple-watch'

Device type.

Events

spxMockupDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Navigation

Available as: Web Component

Render a complete WordPress menu with nested submenus and automatic positioning.

<spx-navigation menu="<?php echo spx\Get::navigation( 'documentation' ); ?>" mobile="1"> </spx-navigation>

Properties

child-border

Type: stringDefault: '1px solid var(--spx-color-gray-200)'CSS variable: --spx-navigation-child-border

Child border.

child-border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-navigation-child-border-radius

Child menu border-radius.

child-box-shadow

Type: stringDefault: '0 3px 10px 0 rgba(0,0,0,0.05)'CSS variable: --spx-navigation-child-box-shadow

Child menu box-shadow.

child-child-gap

Type: stringDefault: '0.8em'CSS variable: --spx-navigation-child-child-gap

Gap between nested child menus.

child-gap

Type: stringDefault: '0.5em'CSS variable: --spx-navigation-child-gap

Gap between top level menu items and child menus.

child-icon

Type: stringDefault: 'arrow-down'

Indicator icon..

child-icon-type

Type: stringDefault: 'ionicons'

Indicator icon type.

child-indicator-gap

Type: stringDefault: '0.2em'CSS variable: --spx-navigation-child-indicator-gap

Gap between child menu indicator and text.

child-item-background

Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-child-item-background

Child item background.

child-item-background-hover

Type: stringDefault: 'var(--spx-color-gray-100)'CSS variable: --spx-navigation-child-item-background-hover

Child item hover background.

child-item-color

Type: stringDefault: 'var(--spx-color-gray-700)'CSS variable: --spx-navigation-child-item-color

Child item color.

child-item-color-hover

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-navigation-child-item-color-hover

Child item hover color.

child-item-padding

Type: stringDefault: '0.6em 0.8em'CSS variable: --spx-navigation-child-item-padding

Child item padding.

child-placement

Type: stringDefault: 'start'CSS variable: --spx-navigation-child-placementChoices: 'start', 'end'

Child menu placement.

font-size

Type: stringDefault: 'clamp(18px, 1.6vw, 20px)'CSS variable: --spx-navigation-font-size

Component font-size property.

item-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-navigation-item-transition-duration

Item transition-duration.

item-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-navigation-item-transition-timing-function

Item transition-timing-function.

item-underline

Type: boolean

Underlines all links.

item-underline-hover

Type: boolean

Underlines all links on hover.

menu

Type: string<?php spx\Get::navigation("myMenu") ?>

Renders a WordPress menu.

mobile

Type: numberDefault: 768

Mobile breakpoint.

mobile-icon

Type: string

Mobile button icon.

mobile-icon-type

Type: stringDefault: 'ionicons'

Mobile button icon type.

mobile-item-background

Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-mobile-item-background

Mobile item background.

mobile-item-background-hover

Type: stringDefault: 'var(--spx-color-gray-100)'CSS variable: --spx-navigation-mobile-item-background-hover

Mobile item hover background.

mobile-item-color

Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-navigation-mobile-item-color

Mobile item color.

mobile-item-color-hover

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-navigation-mobile-item-color-hover

Mobile item hover color.

mobile-item-nested-margin-left

Type: stringDefault: '0.8em'CSS variable: --spx-navigation-mobile-item-nested-margin-left

Mobile item nested margin-left.

mobile-item-padding

Type: stringDefault: '0.6em'CSS variable: --spx-navigation-mobile-item-padding

Mobile item padding.

mobile-placement

Type: stringDefault: 'start'CSS variable: --spx-navigation-mobile-placementChoices: 'start', 'end'

Mobile placement.

parent-item-background

Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-parent-item-background

Parent item background.

parent-item-background-hover

Type: stringDefault: 'var(--spx-color-gray-100)'CSS variable: --spx-navigation-parent-item-background-hover

Parent item hover background.

parent-item-color

Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-navigation-parent-item-color

Parent item color.

parent-item-color-hover

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-navigation-parent-item-color-hover

Parent item hover color.

parent-item-gap

Type: stringDefault: '0.4em'CSS variable: --spx-navigation-parent-item-gap

Gap between parent menu items.

parent-item-padding

Type: stringDefault: '0.6em'CSS variable: --spx-navigation-parent-item-padding

Parent item padding.

vertical

Type: boolean

Renders menu vertically.

Events

spxNavigationDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Notation

Available as: Web ComponentShortcode

Annotate letters, words or whole sentences.

<p> I'm baby vice keytar beard godard pitchfork stumptown ugh meditation aesthetic shabby chic listicle meh. Leggings austin fanny pack readymade. Intelligentsia literally green juice pop-up glossier keffiyeh, actually portland enamel pin. </p> <spx-notation color="blue" type="box"> <p> Twee fam kogi swag banh mi before they sold out chillwave. 8-bit sustainable stumptown austin freegan, lyft godard vexillologist skateboard franzen shoreditch. Lo-fi cronut brooklyn put a bird on it gluten-free. </p> </spx-notation> <p> Typewriter helvetica kombucha succulents. Brunch copper mug tote bag literally pok pok succulents woke shaman wayfarers humblebrag pop-up. Mustache DIY health goth echo park lyft YOLO lomo. </p>

Properties

animation

Type: booleanDefault: true

Turn animation on or off when animation.

animation-duration

Type: numberDefault: 800CSS variable: --spx-notation-animation-duration

Animation duration.

color

Type: stringDefault: 'var(--spx-color-secondary-100)'CSS variable: --spx-notation-color

Component color property.

display

Type: stringDefault: 'inline-block'CSS variable: --spx-notation-display

Component display property.

iterations

Type: numberDefault: 1

Number of iterations.

multiline

Type: booleanDefault: true

Annotate multiline text.

stroke-width

Type: numberDefault: 1

Stroke width.

type

Type: stringDefault: 'underline'Choices: 'underline', 'box', 'circle', 'highlight', 'strike-through', 'crossed-off', 'bracket'

Type of notation.

Events

spxNotationDidLoad

Fires after component has loaded.

Methods

clear

Remove the annotation.

hide

Hides the annotation. (non animated)

reload

Reload component.

show

Draws the annotation.

Offset

Available as: Web ComponentShortcodeOxygen Element

The component offsets itself to the height of a specified element. It comes in handy when dealing with a fixed header and is used on this site. Simply wrap your main content container with it and select a target element. The distance will adjust on screen resize.

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-offset-display

Component display property.

target

Type: stringDefault: 'header'

Target element.

Events

spxOffsetDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Scrollspy

Available as: Web ComponentOxygen Element

Automatically add CSS classes to navigation items and content elements depending on the scroll position.

Properties

content-class

Type: stringDefault: 'spx-scrollspy__content--active'

Applied class to active content element.

display

Type: stringDefault: 'block'CSS variable: --spx-scrollspy-display

Component display property.

nav-class

Type: stringDefault: 'spx-scrollspy__nav--active'

Applied class to active navigation element.

offset

Type: any

Selects the height of an element (any querySelector value) or number that is used for offsetting how far from the top the next section is activated.

scrolling

Type: boolean

Automatically scroll to the active element

scrolling-offset

Type: numberDefault: 50

Scrolling offset from the top.

target

Type: stringDefault: 'a'

Target element. Can take any querySelector value. (id, class, tag etc.)

url-change

Type: booleanDefault: false

Appends the currently active link to the end of the URL.

Events

spxScrollspyDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Share

Available as: Web ComponentShortcodeOxygen Element

Social share buttons. Currently includes Facebook, Twitter, Whatsapp and E-Mail.

<spx-share item-background="black"> </spx-share>
<spx-share> </spx-share>

Properties

font-size

Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-share-font-size

Component font-size property.

item-background

Type: stringCSS variable: --spx-share-item-background

Item background.

item-border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-share-item-border-radius

Item radius border.

item-color

Type: stringCSS variable: --spx-share-item-color

Gap between buttons.

item-filter-hover

Type: stringDefault: 'brightness(110%) saturate(120%)'CSS variable: --spx-share-item-filter-hover

Filter hover.

item-gap

Type: stringDefault: '0.5em'CSS variable: --spx-share-item-gap

Gap between buttons.

item-padding

Type: stringDefault: '0.5em'CSS variable: --spx-share-item-padding

Item padding.

item-size

Type: stringDefault: '1em'

item-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-share-item-transition-duration

Item transition-duration.

item-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-share-item-transition-timing-function

Item transition-timing-function.

target

Type: stringDefault: '_blank'

Button href target.

theme

Type: stringDefault: 'default'Choices: 'default', 'outline', 'minimal'

Button theme.

vertical

Type: boolean

Render buttons vertically.

Events

spxShareDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Slider

Available as: Web ComponentShortcodeOxygen Element

A slider is a revolving carousel that displays photos or other types of content.

<style> spx-slider { height: 350px; } </style> <spx-slider max-height="350px" max-width="350px" navigation> <img src="/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg"/> </spx-slider>

Properties

autoheight

Type: booleanDefault: false

Automatically adjusts height of slider.

autoplay

Type: booleanDefault: false

Starts navigating to the next slide when page is loaded.

autoplay-delay

Type: numberDefault: 6000

Autoplay delay.

autoplay-disable-on-interaction

Type: booleanDefault: false

Disable autoplay after interaction with slides.

bp-tabs

Type: string

Starts navigating to the next slide when page is loaded.

centered-slides

Type: booleanDefault: false

Centers slides in viewport.

direction

Type: stringDefault: 'horizontal'Choices: 'horizontal', 'vertical'

Slider direction.

effect

Type: stringDefault: 'slide'Choices: 'slide', 'effect'

Slider effect.

image-object-fit

Type: stringDefault: 'cover'Choices: 'fill', 'contain', 'cover', 'scale-down', 'none'

Image object-fit.

image-size

Type: string

WordPress media size when using the helper function..

images

Type: string<?php spx\Get::gallery($fieldName, $type) ?>

Gets images from an ACF or Metabox field.

images-src

Type: stringChoices: 'acf', 'mb'

Gets images from an ACF or Metabox field.

loop

Type: booleanDefault: false

Loops all slides infinitely.

max-height

Type: stringDefault: '100%'

Max height.

max-width

Type: stringDefault: '100%'CSS variable: --spx-slider-max-width

Max width.

navigation

Type: boolean

navigation-background

Type: stringDefault: 'rgba(0,0,0,0.7)'CSS variable: --spx-slider-navigation-background

Navigation background.

navigation-border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-slider-navigation-border-radius

Navigation radius border.

navigation-color

Type: stringDefault: '#ffffff'CSS variable: --spx-slider-navigation-color

Navigation color.

navigation-distance-x

Type: stringDefault: '12px'CSS variable: --spx-slider-navigation-distance-x

Navigation distance.

navigation-icon-next

Type: stringDefault: 'arrow-forward'

Navigation icon type.

navigation-icon-prev

Type: stringDefault: 'arrow-back'

Navigation icon type.

navigation-icon-type

Type: stringDefault: 'ionicons'

Navigation icon type.

navigation-padding

Type: stringDefault: '12px'CSS variable: --spx-slider-navigation-padding

Navigation padding.

navigation-size

Type: stringDefault: '20px'CSS variable: --spx-slider-navigation-size

Navigation size.

pagination

Type: stringDefault: 'bullets'Choices: 'bullets', 'tabs', 'none'

Pagination type.

pagination-bullets-background

Type: stringDefault: 'var(--spx-color-gray-300)'CSS variable: --spx-slider-pagination-bullets-background

Pagination bullets background.

pagination-bullets-background-active

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-slider-pagination-bullets-background-active

Pagination bullets active background.

pagination-bullets-clickable

Type: boolean

Make bullets clickable.

pagination-bullets-dynamic

Type: boolean

Will only keep a selected amount of bullets visible.

pagination-bullets-dynamic-amount

Type: numberDefault: 5

Amount of dynamic bullets.

pagination-bullets-size

Type: stringDefault: '8px'CSS variable: --spx-slider-pagination-bullets-size

Size of the bullets.

pagination-bullets-space-between

Type: stringDefault: '4px'CSS variable: --spx-slider-pagination-bullets-space-between

Space between the bullets.

pagination-tabs-gap-max

Type: numberDefault: 1.8

pagination-tabs-gap-min

Type: numberDefault: 1

pagination-tabs-inner-gap-max

Type: numberDefault: 1

pagination-tabs-inner-gap-min

Type: numberDefault: 0.8

pagination-tabs-margin-bottom-max

Type: numberDefault: 2.6CSS variable: --spx-slider-pagination-tabs-margin-bottom-max

Pagination tabs max margin-bottom.

pagination-tabs-margin-bottom-min

Type: numberDefault: 1.4CSS variable: --spx-slider-pagination-tabs-margin-bottom-min

Pagination tabs min margin-bottom.

pagination-tabs-max-width

Type: stringDefault: '320px'CSS variable: --spx-slider-pagination-tabs-max-width

Pagination tabs max-width.

pagination-tabs-padding-max

Type: numberDefault: 1.4CSS variable: --spx-slider-pagination-tabs-padding-max

Pagination tabs max padding.

pagination-tabs-padding-min

Type: numberDefault: 1CSS variable: --spx-slider-pagination-tabs-padding-min

Pagination tabs min padding.

pagination-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-slider-pagination-transition-duration

Pagination transition-duration.

pagination-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-slider-pagination-transition-timing-function

Pagination transition-timing-function.

prev-next-filter

Type: string

Filter property for the previous and next elements.

slide-message-first

Type: stringDefault: 'This is the first slide'

Screen reader message for first slide.

slide-message-last

Type: stringDefault: 'This is the last slide'

Screen reader message for last slide.

slide-message-next

Type: stringDefault: 'Next slide'

Screen reader message for next slide.

slide-message-previous

Type: stringDefault: 'Previous slide'

Screen reader message for previous slide.

slides-per-view

Type: numberDefault: 1

Amount of slides shown at once.

space-between

Type: number

Space between slides.

speed

Type: numberDefault: 1000

Sliding speed.

Events

spxSliderDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Slideshow

Available as: Web ComponentShortcodeOxygen Element

Continuously playing slideshow.

<style> img { height: 150px; object-fit: cover; width: 100%; } </style> <spx-slideshow gap="12px"> <img src="/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg"/> <img src="/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg"/> </spx-slideshow>

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-slideshow-display

Component display property.

duration

Type: stringDefault: '60s'CSS variable: --spx-slideshow-duration

Duration of slideshow to complete one cycle.

gap

Type: stringDefault: '1em'CSS variable: --spx-slideshow-gap

Gap between inner elements.

image-size

Type: string

WordPress media size when using the helper function..

images

Type: string<?php spx\get::gallery($fieldName, $type) ?>

Gets images from an ACF or Metabox field.

images-src

Type: stringChoices: 'acf', 'mb'

Gets images from an ACF or Metabox field.

max-width

Type: stringDefault: '350px'CSS variable: --spx-slideshow-max-width

Max width of inner elements.

overflow

Type: stringCSS variable: --spx-slideshow-overflow

If not set with this attribute, overflow should be set on the parent element.

Events

spxSlideshowDidLoad

Fires after component has loaded.

Snackbar

Available as: Web Component

Notification bars with a variety of options. Great for success or failure messages. In default mode, the snackbar will fade out and remove itself from the DOM.

<spx-snackbar text="Hello, I'm a snackbar."> </spx-snackbar>
<style> body { min-height: 200px; } </style> <spx-snackbar text="Hello, I'm a snackbar." fixed closeable reverse> </spx-snackbar>
<style> body { min-height: 100px; } </style> <spx-snackbar text="Hello, I'm a snackbar." fixed closeable> </spx-snackbar>

Properties

animation-delay

Type: stringDefault: '200ms'CSS variable: --spx-snackbar-animation-delay

Component animation-delay property.

animation-duration

Type: stringDefault: '2000ms'CSS variable: --spx-snackbar-animation-duration

Component animation-duration property.

background

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-snackbar-background

Component background property.

border

Type: stringCSS variable: --spx-snackbar-border

Component border property.

border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-snackbar-border-radius

Component border-radius property.

closeable

Type: boolean

Adds option to close snackbar after its creation.

color

Type: stringDefault: '#ffffff'CSS variable: --spx-snackbar-color

Component color property.

distance-x

Type: stringDefault: '1em'CSS variable: --spx-snackbar-distance-x

Distance to the edge of the viewport on the x-axis.

distance-y

Type: stringDefault: '1em'CSS variable: --spx-snackbar-distance-y

Distance to the edge of the viewport on the y-axis.

fixed

Type: boolean

Makes snackbar not removable.

font-size

Type: stringDefault: '18px'CSS variable: --spx-snackbar-font-size

Component font-size property.

identifier

Type: stringDefault: 'primary'

Unique identifier for snackbar instance.

padding

Type: stringDefault: '1em'CSS variable: --spx-snackbar-padding

Component padding property.

position

Type: stringDefault: 'bottom-right'Choices: 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'

Component position in page.

position-css

Type: "absolute" | "fixed" | "relative" | "static"Default: 'fixed'

CSS property position of button.

reverse

Type: boolean

Reverses the close button if "closable" prop is true.

space-between

Type: stringDefault: '12px'

Space between snackbars.

target

Type: stringDefault: 'body'

Element where snackbars should be created in.

text

Type: stringDefault: "Hello, I'm a snackbar."

Text inside snackbar.

z-index

Type: numberDefault: 103CSS variable: --spx-snackbar-z-index

Component z-index property.

Events

spxSnackbarDidLoad

Fires after component has loaded.

Methods

reload

Reload component.

Text

Available as: Web ComponentShortcodeOxygen Element

This component styles text coming from a markdown file or a rich-text editor appropriately. It will eventually be 100% compatible with the Gutenberg editor as well.

Properties

h1-font-size-max

Type: numberDefault: 3.2CSS variable: --spx-text-h1-font-size-max

H1 max font-size.

h1-font-size-min

Type: numberDefault: 1.6CSS variable: --spx-text-h1-font-size-min

H1 min font-size.

h2-font-size-max

Type: numberDefault: 2.2CSS variable: --spx-text-h2-font-size-max

H2 max font-size.

h2-font-size-min

Type: numberDefault: 1.4CSS variable: --spx-text-h2-font-size-min

H2 min font-size.

h3-font-size-max

Type: numberDefault: 1.8CSS variable: --spx-text-h3-font-size-max

H3 max font-size.

h3-font-size-min

Type: numberDefault: 1.2CSS variable: --spx-text-h3-font-size-min

H3 min font-size.

h4-font-size-max

Type: numberDefault: 1.6CSS variable: --spx-text-h4-font-size-max

H4 max font-size.

h4-font-size-min

Type: numberDefault: 1CSS variable: --spx-text-h4-font-size-min

H4 min font-size.

heading-color

Type: stringDefault: 'var(--spx-color-black)'CSS variable: --spx-text-heading-color

Heading color.

heading-font-family

Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-text-heading-font-family

Heading font-family.

heading-font-weight

Type: stringDefault: '500'CSS variable: --spx-text-heading-font-weight

Heading font-weight.

heading-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-text-heading-letter-spacing

Heading letter-spacing.

heading-line-height

Type: stringDefault: '1.5'CSS variable: --spx-text-heading-line-height

Heading line-height.

heading-text-transform

Type: stringDefault: 'default'CSS variable: --spx-text-heading-text-transform

Heading text-transform.

link-decoration-color

Type: stringDefault: 'var(--spx-color-primary-600)'CSS variable: --spx-text-link-decoration-color

Link decoration color.

markdown

Type: booleanDefault: false

Parse markdown.

max-width

Type: stringDefault: '768px'CSS variable: --spx-text-max-width

Component max-width property.

padding-figure-max

Type: numberDefault: 3CSS variable: --spx-text-padding-figure-max

figure max padding.

padding-figure-min

Type: numberDefault: 0.9CSS variable: --spx-text-padding-figure-min

figure min padding.

space-before-h1-max

Type: numberDefault: 8

space-before-h1-min

Type: numberDefault: 4

space-between-max

Type: numberDefault: 2

space-between-min

Type: numberDefault: 0.9

space-between-pmax

Type: numberDefault: 1.5

space-between-pmin

Type: numberDefault: 0.9

text-color

Type: stringDefault: 'var(--spx-color-gray-700)'CSS variable: --spx-text-text-color

Text color.

text-font-family

Type: stringDefault: state.fontFamilySecondaryCSS variable: --spx-text-text-font-family

Text font-family.

text-font-size-max

Type: numberDefault: 1.4CSS variable: --spx-text-text-font-size-max

Text max font-size.

text-font-size-min

Type: numberDefault: 1CSS variable: --spx-text-text-font-size-min

Text min font-size.

text-font-weight

Type: stringDefault: '400'CSS variable: --spx-text-text-font-weight

Text font-weight.

text-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-text-text-letter-spacing

Text letter-spacing.

text-line-height

Type: stringDefault: '1.5'CSS variable: --spx-text-text-line-height

Text line-height.

text-text-transform

Type: stringDefault: 'default'CSS variable: --spx-text-text-text-transform

Text text-transform.

Events

spxTextDidLoad

Fires after component has loaded.

Typewriter

Available as: Web ComponentShortcodeOxygen Element

Animates text like it is being written on a typewriter.

<style> * { font-family: helvetica, sans-serif; } </style> <spx-typewriter text="['First Message', 'Second Message']" auto-start loop> </spx-typewriter>
<style> * { font-family: helvetica, sans-serif; } </style> <spx-typewriter text="This text is being typed like on a typewriter :-)" auto-start> </spx-typewriter>

Properties

auto-start

Type: booleanDefault: true

Automatically starts writing.

delay

Type: anyDefault: 'natural'

Writing delay in ms. Also accepts 'natural' value.

delete-speed

Type: anyDefault: 'natural'

Delete delay in ms. Also accepts 'natural' value.

display

Type: stringDefault: 'block'CSS variable: --spx-typewriter-display

Component display property.

loop

Type: boolean

Loops the animation.

text

Type: stringDefault: "I'm a typewriter"

Text that should be written.

Events

spxTypewriterDidLoad

Fires after component has loaded.

Methods

play

Start animation.

stop

Stop animation.

Introduction

A new feature of version 2.0 is the page builder. It is a collection of components to create responsive, full-page layouts. All of the following elements are part of an evolving system that is supposed to ease the way modern sites are being built.

They are meant to be used together and in many cases are dependant on each other. This is not the case with the core component suite, as they are built (and will continue to be built) as standalone, boxed-off elements. However, this doesn't mean that the core components can't be used with the new building system.

Keep in mind that sections, pages, and the container component and related documentation are in beta, so changes to properties and elements will happen without warning. If you want to see how they work under the hood, check out the source code of the homepage.

Container

Available as: Web ComponentShortcodeOxygen Element

The container element is a special component, as it isn't outputting any visible markup. Rather, it's purpose is to provide global styles for section and page components. It does not affect single components and won't ever will.

Properties

bp-mobile

Type: numberDefault: 1024

Mobile breakpoint width.

button-background-primary

Type: numberDefault: 500CSS variable: --spx-container-button-background-primary

Button primary background.

button-background-secondary

Type: numberDefault: 100CSS variable: --spx-container-button-background-secondary

Button secondary background.

button-border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-container-button-border-radius

Button radius border.

button-color-primary

Type: numberDefault: 50CSS variable: --spx-container-button-color-primary

Button primary color.

button-color-secondary

Type: numberDefault: 600CSS variable: --spx-container-button-color-secondary

Button secondary color.

button-font-size-max

Type: numberDefault: 1.3CSS variable: --spx-container-button-font-size-max

Button max font-size.

button-font-size-min

Type: numberDefault: 1CSS variable: --spx-container-button-font-size-min

Button min font-size.

button-font-weight

Type: stringDefault: 'bold'CSS variable: --spx-container-button-font-weight

Button font-weight.

button-margin-top-max

Type: numberDefault: 2CSS variable: --spx-container-button-margin-top-max

Button max margin-top.

button-margin-top-min

Type: numberDefault: 1CSS variable: --spx-container-button-margin-top-min

Button min margin-top.

button-margin-x-max

Type: numberDefault: 1

button-margin-x-min

Type: numberDefault: 0.5

button-padding-x-max

Type: numberDefault: 2CSS variable: --spx-container-button-padding-x-max

Button x max padding.

button-padding-x-min

Type: numberDefault: 1CSS variable: --spx-container-button-padding-x-min

Button x min padding.

button-padding-y-max

Type: numberDefault: 1.5CSS variable: --spx-container-button-padding-y-max

Button y max padding.

button-padding-y-min

Type: numberDefault: 1CSS variable: --spx-container-button-padding-y-min

Button y min padding.

button-text-transform

Type: stringDefault: 'uppercase'CSS variable: --spx-container-button-text-transform

Button text-transform.

color-gray

Type: stringDefault: 'blue-gray'CSS variable: --spx-container-color-grayChoices: 'blue-gray', 'cool-gray', 'gray', 'true-gray', 'warm-gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'light-blue', 'blue', 'indigo', 'violet', 'purple'; 'fuchsia', 'pink', 'rose'

Gray color which will be used for sections and pages.

color-primary

Type: stringDefault: 'teal'CSS variable: --spx-container-color-primaryChoices: 'blue-gray', 'cool-gray', 'gray', 'true-gray', 'warm-gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'light-blue', 'blue', 'indigo', 'violet', 'purple'; 'fuchsia', 'pink', 'rose'

Primary color which will be used for sections and pages.

color-secondary

Type: stringDefault: 'pink'CSS variable: --spx-container-color-secondaryChoices: 'blue-gray', 'cool-gray', 'gray', 'true-gray', 'warm-gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'light-blue', 'blue', 'indigo', 'violet', 'purple'; 'fuchsia', 'pink', 'rose'

Secondary color which will be used for sections and pages.

disable-colors

Type: booleanCSS variable: --spx-container-disable-colors

Disable color generation.

focus-color

Type: stringDefault: 'var(--spx-color-secondary-600)'CSS variable: --spx-container-focus-color

Focus color.

font-family-primary

Type: stringDefault: 'var(--spx-font-family-primary)'CSS variable: --spx-container-font-family-primary

Primary font-family.

font-family-secondary

Type: stringDefault: 'var(--spx-font-family-secondary)'CSS variable: --spx-container-font-family-secondary

Secondary font-family.

image-max-width

Type: stringDefault: 'none'CSS variable: --spx-container-image-max-width

Image max-width.

linear-base

Type: numberDefault: 16

Linear scaling root number.

linear-max-w

Type: numberDefault: 1440

Linear scaling maximum width.

linear-min-w

Type: numberDefault: 320

Linear scaling minimum width.

max-width

Type: stringDefault: '1440px'CSS variable: --spx-container-max-width

Section max-width.

max-width-mobile

Type: stringDefault: '500px'CSS variable: --spx-container-max-width-mobile

Section max-width on mobile.

offset-header

Type: boolean

Offsets first section to the height of the header.

padding-x

Type: stringDefault: 'var(--spx-container-padding-x)'CSS variable: --spx-container-padding-x

Space between content and outer edge of the viewport.

padding-x-sm

Type: stringDefault: 'var(--spx-container-padding-x-sm)'CSS variable: --spx-container-padding-x-sm

Space between content and outer edge of the viewport.

padding-yfirst-max

Type: numberDefault: 8CSS variable: --spx-container-padding-yfirst-max

yfirst max padding.

padding-yfirst-min

Type: numberDefault: 2CSS variable: --spx-container-padding-yfirst-min

yfirst min padding.

padding-y-max

Type: numberDefault: 10CSS variable: --spx-container-padding-y-max

y max padding.

padding-y-max-width

Type: numberDefault: 2560CSS variable: --spx-container-padding-y-max-width

y max width padding.

padding-y-min

Type: numberDefault: 3CSS variable: --spx-container-padding-y-min

y min padding.

padding-ymultiplier

Type: numberDefault: 1.5CSS variable: --spx-container-padding-ymultiplier

ymultiplier padding.

pre-title-background

Type: stringDefault: 'var(--spx-color-secondary-50)'CSS variable: --spx-container-pre-title-background

Pre title background.

pre-title-border-radius

Type: stringDefault: '9999px'CSS variable: --spx-container-pre-title-border-radius

Pre title radius border.

pre-title-color

Type: stringDefault: 'var(--spx-color-secondary-900)'CSS variable: --spx-container-pre-title-color

Pre title color.

pre-title-font-size-max

Type: numberDefault: 0.7CSS variable: --spx-container-pre-title-font-size-max

Pre title max font-size.

pre-title-font-size-min

Type: numberDefault: 0.6CSS variable: --spx-container-pre-title-font-size-min

Pre title min font-size.

pre-title-font-weight

Type: stringDefault: '400'CSS variable: --spx-container-pre-title-font-weight

Pre title font-weight.

pre-title-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-container-pre-title-letter-spacing

Pre title letter-spacing.

pre-title-line-height

Type: stringDefault: '1.6'CSS variable: --spx-container-pre-title-line-height

Pre title line-height.

pre-title-margin-bottom-max

Type: numberDefault: 2.5CSS variable: --spx-container-pre-title-margin-bottom-max

Pre title max margin-bottom.

pre-title-margin-bottom-min

Type: numberDefault: 1CSS variable: --spx-container-pre-title-margin-bottom-min

Pre title min margin-bottom.

pre-title-padding-x-max

Type: numberDefault: 1.2CSS variable: --spx-container-pre-title-padding-x-max

Pre title x max padding.

pre-title-padding-x-min

Type: numberDefault: 0.8CSS variable: --spx-container-pre-title-padding-x-min

Pre title x min padding.

pre-title-padding-y-max

Type: numberDefault: 0.4CSS variable: --spx-container-pre-title-padding-y-max

Pre title y max padding.

pre-title-padding-y-min

Type: numberDefault: 0.3CSS variable: --spx-container-pre-title-padding-y-min

Pre title y min padding.

pre-title-text-transform

Type: stringDefault: 'uppercase'CSS variable: --spx-container-pre-title-text-transform

Pre title text-transform.

tabs-first-margin-top-max

Type: numberDefault: 2CSS variable: --spx-container-tabs-first-margin-top-max

Tabs first max margin-top.

tabs-first-margin-top-min

Type: numberDefault: 1CSS variable: --spx-container-tabs-first-margin-top-min

Tabs first min margin-top.

tabs-margin-top-max

Type: numberDefault: 1CSS variable: --spx-container-tabs-margin-top-max

Tabs max margin-top.

tabs-margin-top-min

Type: numberDefault: 0.5CSS variable: --spx-container-tabs-margin-top-min

Tabs min margin-top.

tabs-opacity

Type: numberDefault: 0.5CSS variable: --spx-container-tabs-opacity

Tabs opacity.

text-color

Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-container-text-color

Text color.

text-font-size-max

Type: numberDefault: 1.8CSS variable: --spx-container-text-font-size-max

Text max font-size.

text-font-size-min

Type: numberDefault: 1CSS variable: --spx-container-text-font-size-min

Text min font-size.

text-font-weight

Type: stringDefault: '400'CSS variable: --spx-container-text-font-weight

Text font-weight.

text-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-container-text-letter-spacing

Text letter-spacing.

text-line-height

Type: stringDefault: '1.6'CSS variable: --spx-container-text-line-height

Text line-height.

text-link-decoration-color

Type: stringDefault: 'var(--spx-color-primary-400)'CSS variable: --spx-container-text-link-decoration-color

Text link decoration color.

text-link-decoration-color-hover

Type: stringDefault: 'var(--spx-color-primary-500)'CSS variable: --spx-container-text-link-decoration-color-hover

Text link decoration hover color.

text-margin-top-max

Type: numberDefault: 1.8CSS variable: --spx-container-text-margin-top-max

Text max margin-top.

text-margin-top-min

Type: numberDefault: 1CSS variable: --spx-container-text-margin-top-min

Text min margin-top.

text-max-width

Type: stringDefault: '800px'CSS variable: --spx-container-text-max-width

Text max-width.

text-transform

Type: stringDefault: 'default'CSS variable: --spx-container-text-transform

Component text-transform property.

title-color

Type: stringDefault: 'var(--spx-color-black)'CSS variable: --spx-container-title-color

Title color.

title-font-size-max

Type: numberDefault: 3CSS variable: --spx-container-title-font-size-max

Title max font-size.

title-font-size-min

Type: numberDefault: 1.7CSS variable: --spx-container-title-font-size-min

Title min font-size.

title-font-weight

Type: numberDefault: 500CSS variable: --spx-container-title-font-weight

Title font-weight.

title-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-container-title-letter-spacing

Title letter-spacing.

title-line-height

Type: stringDefault: '1.25'CSS variable: --spx-container-title-line-height

Title line-height.

title-max-width

Type: stringDefault: 'max-content'CSS variable: --spx-container-title-max-width

Title max-width.

title-text-transform

Type: stringDefault: 'default'CSS variable: --spx-container-title-text-transform

Title text-transform.

Events

spxContainerDidLoad

Fires after component has loaded.

Button

Available as: Web ComponentShortcodeOxygen Element

Properties

href

Type: string

Link href.

icon

Type: string

Icon.

icon-gap-max

Type: numberDefault: 1

icon-gap-min

Type: numberDefault: 0.4

reverse

Type: boolean

Link href.

target

Type: string

Target.

transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-section-button-transition-duration

Component transition-duration property.

transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-section-button-transition-timing-function

Component transition-timing-function property.

type

Type: stringDefault: 'primary'Choices: 'primary', 'secondary'

Button type.

Events

spxSectionButtonDidLoad

Fires after component has loaded.

Footer

Available as: Web ComponentShortcodeOxygen Element

Footer component for sections.

Properties

background

Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-section-footer-background

Component background property.

gap

Type: stringCSS variable: --spx-section-footer-gap

Gap between columns.

image-max-height

Type: stringDefault: '40px'

justify-content

Type: stringDefault: 'space-between'

max-width

Type: stringCSS variable: --spx-section-footer-max-width

Component max-width property.

padding-y-max

Type: numberDefault: 12CSS variable: --spx-section-footer-padding-y-max

y max padding.

padding-y-min

Type: numberDefault: 4CSS variable: --spx-section-footer-padding-y-min

y min padding.

space-before-max

Type: numberDefault: 12

space-before-min

Type: numberDefault: 5

text-color

Type: stringDefault: 'var(--spx-color-gray-500)'CSS variable: --spx-section-footer-text-color

Text color.

text-font-size-max

Type: numberDefault: 1.2CSS variable: --spx-section-footer-text-font-size-max

Text max font-size.

text-font-size-min

Type: numberDefault: 1CSS variable: --spx-section-footer-text-font-size-min

Text min font-size.

text-margin-top-max

Type: numberDefault: 1.2CSS variable: --spx-section-footer-text-margin-top-max

Text max margin-top.

text-margin-top-min

Type: numberDefault: 0.8CSS variable: --spx-section-footer-text-margin-top-min

Text min margin-top.

text-max-width

Type: stringDefault: '370px'CSS variable: --spx-section-footer-text-max-width

Text max-width.

title-font-size-max

Type: numberDefault: 1.6CSS variable: --spx-section-footer-title-font-size-max

Title max font-size.

title-font-size-min

Type: numberDefault: 1CSS variable: --spx-section-footer-title-font-size-min

Title min font-size.

title-margin-bottom-max

Type: numberDefault: 2CSS variable: --spx-section-footer-title-margin-bottom-max

Title max margin-bottom.

title-margin-bottom-min

Type: numberDefault: 1CSS variable: --spx-section-footer-title-margin-bottom-min

Title min margin-bottom.

Events

spxSectionFooterDidLoad

Fires after component has loaded.

Header

Available as: Web ComponentShortcodeOxygen Element

The introductory element of every website.

Properties

backdrop-filter

Type: stringDefault: 'blur(10px)'CSS variable: --spx-section-header-backdrop-filter

Component backdrop-filter property.

background

Type: stringDefault: 'rgba(255,255,255,0.85)'CSS variable: --spx-section-header-background

Component background property.

background-scroll

Type: numberCSS variable: --spx-section-header-background-scroll

Turns on background after scroll.

border-bottom

Type: stringCSS variable: --spx-section-header-border-bottom

Component border-bottom property.

has-scrolled

Type: boolean

logo-link

Type: string

URL the logo links to.

logo-max-height

Type: stringDefault: '50px'

logo-src

Type: string

Logo src.

logo-src-mobile

Type: string

Logo mobile src.

navigation-align

Type: stringDefault: 'center'Choices: 'center', 'right'

Where the navigation should be aligned to.

padding-y-max

Type: numberDefault: 1CSS variable: --spx-section-header-padding-y-max

y max padding.

padding-y-min

Type: numberDefault: 0.8CSS variable: --spx-section-header-padding-y-min

y min padding.

position

Type: "fixed" | "static"

Component positioning.

z-index

Type: numberDefault: 102CSS variable: --spx-section-header-z-index

Component z-index property.

Events

spxSectionHeaderDidLoad

Fires after component has loaded.

Two Column

Available as: Web ComponentShortcodeOxygen Element

Two-column text-media block component that can be used for a variety of layout options. The current homepage consists of this block only.

Properties

background

Type: stringCSS variable: --spx-section-two-column-background

Component background property.

background-image

Type: stringCSS variable: --spx-section-two-column-background-image

image background.

column-size

Type: stringDefault: '1fr 1fr'CSS variable: --spx-section-two-column-column-size

Column size.

first

Type: boolean

If set, component will transform the header offset to the top-padding value.

gap-max

Type: numberDefault: 6

gap-min

Type: numberDefault: 3

hide-media

Type: boolean

Hides the media column.

images-gap-max

Type: numberDefault: 2

images-gap-min

Type: numberDefault: 1

layout

Type: stringDefault: 'horizontal'Choices: 'horizontal', 'vertical'

Layout of the section.

media-background

Type: stringCSS variable: --spx-section-two-column-media-background

Background color for the media column.

media-background-overlap

Type: booleanCSS variable: --spx-section-two-column-media-background-overlap

Overlaps the background with the media column.

media-full

Type: boolean

Removes the outer spacing for the media column.

media-full-mobile-fix

Type: boolean

Adds padding to the media column on mobile.

media-margin

Type: stringDefault: '0'

media-padding-max

Type: numberDefault: 3CSS variable: --spx-section-two-column-media-padding-max

Media max padding.

media-padding-min

Type: numberDefault: 2CSS variable: --spx-section-two-column-media-padding-min

Media min padding.

reverse

Type: boolean

Reverses the column order.

reverse-mobile

Type: boolean

Reverses the column order on mobile.

tabs-animation

Type: booleanDefault: false

tabs-animation-color

Type: stringCSS variable: --spx-section-two-column-tabs-animation-color

Tabs animation color.

tabs-animation-duration

Type: numberCSS variable: --spx-section-two-column-tabs-animation-duration

Tabs animation-duration.

text-align-inner

Type: "center" | "left" | "right"Default: 'left'

Alignment for the inner text wrapper.

text-align-outer

Type: "center" | "left" | "right"Default: 'left'

Alignment for the outer text wrapper.

text-background

Type: stringCSS variable: --spx-section-two-column-text-background

Background color for the text column.

text-background-overlap

Type: booleanCSS variable: --spx-section-two-column-text-background-overlap

Overlaps the background with the text column.

Events

spxSectionTwoColumnDidLoad

Fires after component has loaded.

Docs

Available as: Web ComponentShortcodeOxygen Element

Renders a documentation page similar to the one you are currently seeing here. Every heading tag becomes a navigation entry, while navigation headings get created by applying the "data-spx-docs-heading" attribute to the first h1 of a new section.

Properties

bp-mobile

Type: numberDefault: 1024

content-heading-font-family

Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-docs-content-heading-font-family

Content heading font-family.

navigation-background

Type: stringDefault: 'var(--spx-color-gray-50)'CSS variable: --spx-page-docs-navigation-background

Navigation background.

navigation-font-family

Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-docs-navigation-font-family

Navigation font-family.

navigation-gap-max

Type: numberDefault: 0.4

navigation-gap-min

Type: numberDefault: 0.2

navigation-heading-tag

Type: stringDefault: 'h1'

navigation-height-adjust

Type: string

navigation-link-color

Type: stringDefault: 'var(--spx-color-800)'CSS variable: --spx-page-docs-navigation-link-color

Navigation link color.

navigation-link-color-active

Type: stringDefault: 'var(--spx-color-primary-600)'CSS variable: --spx-page-docs-navigation-link-color-active

Navigation link active color.

navigation-link-font-weight

Type: stringDefault: '500'CSS variable: --spx-page-docs-navigation-link-font-weight

Navigation link font-weight.

navigation-link-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-page-docs-navigation-link-letter-spacing

Navigation link letter-spacing.

navigation-link-line-height

Type: stringDefault: '1.25'CSS variable: --spx-page-docs-navigation-link-line-height

Navigation link line-height.

navigation-link-text-transform

Type: stringDefault: 'default'CSS variable: --spx-page-docs-navigation-link-text-transform

Navigation link text-transform.

navigation-space-y-max

Type: numberDefault: 4

navigation-space-y-min

Type: numberDefault: 2

navigation-title-color

Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-page-docs-navigation-title-color

Navigation title color.

navigation-title-font-weight

Type: stringDefault: '500'CSS variable: --spx-page-docs-navigation-title-font-weight

Navigation title font-weight.

navigation-title-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-page-docs-navigation-title-letter-spacing

Navigation title letter-spacing.

navigation-title-line-height

Type: stringDefault: '1.25'CSS variable: --spx-page-docs-navigation-title-line-height

Navigation title line-height.

navigation-title-margin-bottom-max

Type: numberDefault: 2CSS variable: --spx-page-docs-navigation-title-margin-bottom-max

Navigation title max margin-bottom.

navigation-title-margin-bottom-min

Type: numberDefault: 1CSS variable: --spx-page-docs-navigation-title-margin-bottom-min

Navigation title min margin-bottom.

navigation-title-text-transform

Type: stringDefault: 'uppercase'CSS variable: --spx-page-docs-navigation-title-text-transform

Navigation title text-transform.

navigation-top

Type: stringDefault: 'var(--spx-offset)'

offset-margin-top-max

Type: numberDefault: 1.2CSS variable: --spx-page-docs-offset-margin-top-max

Offset max margin-top.

offset-margin-top-min

Type: numberDefault: 0.7CSS variable: --spx-page-docs-offset-margin-top-min

Offset min margin-top.

padding-x

Type: stringDefault: state.paddingXCSS variable: --spx-page-docs-padding-x

Distance to the edge of the viewport on the x-axis.

padding-y-max

Type: numberDefault: 4CSS variable: --spx-page-docs-padding-y-max

y max padding.

padding-y-min

Type: numberDefault: 2CSS variable: --spx-page-docs-padding-y-min

y min padding.

unique-id

Type: boolean

Events

spxPageDocsDidLoad

Fires after component has loaded.

Single

Available as: Web ComponentShortcodeOxygen Element

Render a single post layout.

Properties

author-color

Type: stringDefault: 'var(--spx-color-800)'CSS variable: --spx-page-single-author-color

Author color.

author-font-family

Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-single-author-font-family

Author font-family.

author-font-size-max

Type: numberDefault: 1.2CSS variable: --spx-page-single-author-font-size-max

Author max font-size.

author-font-size-min

Type: numberDefault: 0.9CSS variable: --spx-page-single-author-font-size-min

Author min font-size.

author-font-weight

Type: stringDefault: '500'CSS variable: --spx-page-single-author-font-weight

Author font-weight.

author-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-page-single-author-letter-spacing

Author letter-spacing.

author-line-height

Type: stringDefault: '1.25'CSS variable: --spx-page-single-author-line-height

Author line-height.

author-margin-top-max

Type: numberDefault: 2CSS variable: --spx-page-single-author-margin-top-max

Author max margin-top.

author-margin-top-min

Type: numberDefault: 1CSS variable: --spx-page-single-author-margin-top-min

Author min margin-top.

author-text-transform

Type: stringDefault: 'uppercase'CSS variable: --spx-page-single-author-text-transform

Author text-transform.

content-margin-top-max

Type: numberDefault: 4CSS variable: --spx-page-single-content-margin-top-max

Content max margin-top.

content-margin-top-min

Type: numberDefault: 3CSS variable: --spx-page-single-content-margin-top-min

Content min margin-top.

content-max-width

Type: stringDefault: '700px'CSS variable: --spx-page-single-content-max-width

Content max-width.

content-padding-x

Type: stringDefault: 'var(--spx-container-padding-x)'CSS variable: --spx-page-single-content-padding-x

Content x padding.

date

Type: booleanDefault: true

Display date.

date-color

Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-page-single-date-color

Date color.

date-font-family

Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-single-date-font-family

Date font-family.

date-font-size-max

Type: numberDefault: 0.9CSS variable: --spx-page-single-date-font-size-max

Date max font-size.

date-font-size-min

Type: numberDefault: 0.9CSS variable: --spx-page-single-date-font-size-min

Date min font-size.

date-font-weight

Type: stringDefault: '500'CSS variable: --spx-page-single-date-font-weight

Date font-weight.

date-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-page-single-date-letter-spacing

Date letter-spacing.

date-line-height

Type: stringDefault: '1.25'CSS variable: --spx-page-single-date-line-height

Date line-height.

date-margin-top-max

Type: numberDefault: 2CSS variable: --spx-page-single-date-margin-top-max

Date max margin-top.

date-margin-top-min

Type: numberDefault: 1.5CSS variable: --spx-page-single-date-margin-top-min

Date min margin-top.

date-text-transform

Type: stringDefault: 'default'CSS variable: --spx-page-single-date-text-transform

Date text-transform.

header-border-bottom

Type: stringDefault: '1px solid var(--spx-color-gray-200)'CSS variable: --spx-page-single-header-border-bottom

Header bottom border.

header-padding-bottom-max

Type: numberDefault: 2CSS variable: --spx-page-single-header-padding-bottom-max

Header bottom max padding.

header-padding-bottom-min

Type: numberDefault: 1CSS variable: --spx-page-single-header-padding-bottom-min

Header bottom min padding.

image

Type: booleanDefault: true

Display image.

image-border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-page-single-image-border-radius

Image radius border.

image-height

Type: stringDefault: 'clamp(200px, 50vh, 600px)'

image-object-position

Type: stringDefault: '50% 50%'

image-padding-x

Type: stringDefault: 'var(--spx-container-padding-x-sm)'CSS variable: --spx-page-single-image-padding-x

Image x padding.

image-space-y-max

Type: numberDefault: 2

image-space-y-min

Type: numberDefault: 1

mobile

Type: numberDefault: 1024

Mobile breakpoint.

post

Type: string<?php spx\Get::post($postId, $dateFormat, $imageSize) ?>

Gets a WordPress post to render.

title-color

Type: stringDefault: 'var(--spx-color-800)'CSS variable: --spx-page-single-title-color

Space to edge of the viewport.

title-font-family

Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-single-title-font-family

Title font-family.

title-font-size-max

Type: numberDefault: 4CSS variable: --spx-page-single-title-font-size-max

Title max font-size.

title-font-size-min

Type: numberDefault: 2.7CSS variable: --spx-page-single-title-font-size-min

Title min font-size.

title-font-weight

Type: stringDefault: '500'CSS variable: --spx-page-single-title-font-weight

Title font-weight.

title-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-page-single-title-letter-spacing

Title letter-spacing.

title-line-height

Type: stringDefault: '1.25'CSS variable: --spx-page-single-title-line-height

Title line-height.

title-margin-top-max

Type: numberDefault: 2CSS variable: --spx-page-single-title-margin-top-max

Title max margin-top.

title-margin-top-min

Type: numberDefault: 1CSS variable: --spx-page-single-title-margin-top-min

Title min margin-top.

title-text-transform

Type: stringDefault: 'default'CSS variable: --spx-page-single-title-text-transform

Title text-transform.

Events

spxPageSingleDidLoad

Fires after component has loaded.

Stay in the loop

For:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing.

Learn more about Mailchimp's privacy practices here.

Products

A collection of web components
for WordPress developers.

A modern component-like
ACF blocks framework.

A minimal and feature-packed
WordPress theme.

Quicklinks

Playground Changelog Privacy Login Reset password

Help

Documentation Product support

Guides

Oxygen Edit Button

Latest Post

3.0 is here! 3.0 is here!

© 2021 Fabrikat. All rights reserved.

hi@fabrikatdigital.com