Documentation

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 h2 tag wrapped in a div once executed:

<my-card name="Dennis"> <div class="card-wrap"> <h2 class="card-title">Dennis</h2> </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 with the help of CSS variables.

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

Styling

Some components can be styled using varying methods. If the styling attribute is present on a component, up to three different techniques are available:

Default

Styles are applied using CSS attributes.

<spx-accordion styling="default" gap="0.4em"> <style> :root { // alternatively using CSS variables. --spx-accordion-gap: 0.5em; { </style>

Fluid

In this mode, a value will responsively scale up or down in a linear fashion depending on a set min and max value.

<spx-accordion styling="fluid" gap-min="0.5" gap-max="1"> <style> :root { // alternatively using CSS variables. --spx-accordion-gap-min: 0.5; --spx-accordion-gap-max: 1; { </style>

Headless

Great for a utility-first workflow using a library like Tailwind. Please refer to the component docs for all possible class slots.

<spx-accordion styling="headless" class-header="grid gap-4">

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)

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)

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

class-content

Type: string

Apply classes to content.

class-content-active

Type: string

Apply classes to content active.

class-content-inactive

Type: string

Apply classes to content inactive.

class-content-text

Type: string

Apply classes to content text.

class-content-text-active

Type: string

Apply classes to content text active.

class-content-text-inactive

Type: string

Apply classes to content text inactive.

class-header

Type: string

Apply classes to header.

class-header-active

Type: string

Apply classes to header active.

class-header-icon

Type: string

Apply classes to header icon.

class-header-icon-active

Type: string

Apply classes to header icon active.

class-header-icon-container

Type: string

Apply classes to header icon container.

class-header-icon-container-active

Type: string

Apply classes to header icon container active.

class-header-icon-container-inactive

Type: string

Apply classes to header icon container inactive.

class-header-icon-inactive

Type: string

Apply classes to header icon inactive.

class-header-inactive

Type: string

Apply classes to header inactive.

class-header-text

Type: string

Apply classes to header text.

class-header-text-active

Type: string

Apply classes to header text active.

class-header-text-inactive

Type: string

Apply classes to header text inactive.

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.

font-size-max

Type: numberDefault: 1.2CSS variable: --spx-accordion-font-size-max

Component font-size-max property.

font-size-min

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

Component font-size-min property.

gap

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

Space between header and content.

gap-max

Type: numberDefault: 1.2

gap-min

Type: numberDefault: 1

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-gap-max

Type: numberDefault: 1

header-gap-min

Type: numberDefault: 0.6

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.

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid', 'headless'

Styling.

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'

lazy

Type: boolean

Load component when it enters the viewport.

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.

line-numbers-start

Type: number

Start of line number.

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.

scrollbar

Type: booleanDefault: true

Hide scrollbar.

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.

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-padding

Type: stringCSS variable: --spx-docs-content-padding

Content padding.

content-padding-y-max

Type: numberCSS variable: --spx-docs-content-padding-y-max

Content y max padding.

content-padding-y-min

Type: numberCSS variable: --spx-docs-content-padding-y-min

Content y min padding.

gap

Type: stringDefault: '3rem'

navigation-background

Type: stringCSS variable: --spx-docs-navigation-background

Navigation background.

navigation-gap

Type: string

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: stringCSS variable: --spx-docs-navigation-link-color

Navigation link color.

navigation-link-color-active

Type: stringCSS variable: --spx-docs-navigation-link-color-active

Navigation link active color.

navigation-link-font-size

Type: anyCSS variable: --spx-docs-navigation-link-font-size

Navigation link font-size.

navigation-link-font-size-max

Type: numberDefault: 1CSS variable: --spx-docs-navigation-link-font-size-max

Navigation link max font-size.

navigation-link-font-size-min

Type: numberDefault: 0.8CSS variable: --spx-docs-navigation-link-font-size-min

Navigation link min font-size.

navigation-link-font-weight

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

Navigation link font-weight.

navigation-link-letter-spacing

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

Navigation link letter-spacing.

navigation-link-line-height

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

Navigation link line-height.

navigation-link-text-transform

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

Navigation link text-transform.

navigation-padding-y

Type: stringCSS variable: --spx-docs-navigation-padding-y

Navigation y padding.

navigation-padding-y-max

Type: numberCSS variable: --spx-docs-navigation-padding-y-max

Navigation y max padding.

navigation-padding-y-min

Type: numberCSS variable: --spx-docs-navigation-padding-y-min

Navigation y min padding.

navigation-title-color

Type: stringCSS variable: --spx-docs-navigation-title-color

Navigation title color.

navigation-title-font-size

Type: anyCSS variable: --spx-docs-navigation-title-font-size

Navigation title font-size.

navigation-title-font-size-max

Type: numberDefault: 0.9CSS variable: --spx-docs-navigation-title-font-size-max

Navigation title max font-size.

navigation-title-font-size-min

Type: numberDefault: 0.8CSS variable: --spx-docs-navigation-title-font-size-min

Navigation title min font-size.

navigation-title-font-weight

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

Navigation title font-weight.

navigation-title-letter-spacing

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

Navigation title letter-spacing.

navigation-title-line-height

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

Navigation title line-height.

navigation-title-margin-bottom

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

Navigation title margin-bottom.

navigation-title-margin-bottom-max

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

Navigation title max margin-bottom.

navigation-title-margin-bottom-min

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

Navigation title min margin-bottom.

navigation-title-text-transform

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

Navigation title text-transform.

navigation-top

Type: stringDefault: '0'

offset-margin-top

Type: stringDefault: ''CSS variable: --spx-docs-offset-margin-top

Offset margin-top.

scrolling

Type: number

Activates automatic navigation scrolling and sets the offset.

separator

Type: string

Create a separator between sections.

styling

Type: stringDefault: 'fluid'Choices: 'default', 'fluid'

Styling.

unique-id

Type: boolean

Events

spxDocsDidLoad

Fires after component has loaded.

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.

class-button

Type: string

Apply classes to button.

class-button-discard

Type: string

Apply classes to button discard.

class-loader

Type: string

Apply classes to loader.

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.

font-size-max

Type: numberDefault: 1.2CSS variable: --spx-edit-button-font-size-max

Component font-size-max property.

font-size-min

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

Component font-size-min 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.

padding-x-max

Type: numberDefault: 1.4CSS variable: --spx-edit-button-padding-x-max

Component padding-x-max property.

padding-x-min

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

Component padding-x-min property.

padding-y-max

Type: numberDefault: 1.2CSS variable: --spx-edit-button-padding-y-max

Component padding-y-max property.

padding-y-min

Type: numberDefault: 0.7CSS variable: --spx-edit-button-padding-y-min

Component padding-y-min 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.

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid', 'headless'

Styling.

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

discard

Discard changes.

edit

Enable editing.

reload

Reload component.

save

Save changes.

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.

size-max

Type: numberDefault: 1

size-min

Type: numberDefault: 0.8

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid'

Styling.

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="https://spx.dev" 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', 'default'

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/1200x300" src-after="https://source.unsplash.com/random/1201x300" 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

Recalculates 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="{&quot;27&quot;:{&quot;ID&quot;:27,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-1&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=27&quot;,&quot;menu_order&quot;:1,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:27,&quot;menu_item_parent&quot;:&quot;0&quot;,&quot;object_id&quot;:&quot;27&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;28&quot;:{&quot;ID&quot;:28,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-2&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=28&quot;,&quot;menu_order&quot;:2,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:28,&quot;menu_item_parent&quot;:&quot;0&quot;,&quot;object_id&quot;:&quot;28&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;29&quot;:{&quot;ID&quot;:29,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-3&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=29&quot;,&quot;menu_order&quot;:3,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:29,&quot;menu_item_parent&quot;:&quot;0&quot;,&quot;object_id&quot;:&quot;29&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;,&quot;spxChildren&quot;:{&quot;33&quot;:{&quot;ID&quot;:33,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-sub-3&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=33&quot;,&quot;menu_order&quot;:4,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:33,&quot;menu_item_parent&quot;:&quot;29&quot;,&quot;object_id&quot;:&quot;33&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;,&quot;spxChildren&quot;:{&quot;119&quot;:{&quot;ID&quot;:119,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:00:14&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:00:14&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 1&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-6-1&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=119&quot;,&quot;menu_order&quot;:5,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:119,&quot;menu_item_parent&quot;:&quot;33&quot;,&quot;object_id&quot;:&quot;119&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 1&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;120&quot;:{&quot;ID&quot;:120,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:00:14&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:00:14&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 1&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-6-2&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=120&quot;,&quot;menu_order&quot;:6,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:120,&quot;menu_item_parent&quot;:&quot;33&quot;,&quot;object_id&quot;:&quot;120&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 1&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;121&quot;:{&quot;ID&quot;:121,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:00:14&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:00:14&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 1&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-6-3&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=121&quot;,&quot;menu_order&quot;:7,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:121,&quot;menu_item_parent&quot;:&quot;33&quot;,&quot;object_id&quot;:&quot;121&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 1&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;}}},&quot;129&quot;:{&quot;ID&quot;:129,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:27:04&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:27:04&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=129&quot;,&quot;menu_order&quot;:8,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:129,&quot;menu_item_parent&quot;:&quot;29&quot;,&quot;object_id&quot;:&quot;129&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;,&quot;spxChildren&quot;:{&quot;132&quot;:{&quot;ID&quot;:132,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:28:07&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:28:07&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 2&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-4&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=132&quot;,&quot;menu_order&quot;:9,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:132,&quot;menu_item_parent&quot;:&quot;129&quot;,&quot;object_id&quot;:&quot;132&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 2&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;133&quot;:{&quot;ID&quot;:133,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:28:07&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:28:07&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 2&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-5&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=133&quot;,&quot;menu_order&quot;:10,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:133,&quot;menu_item_parent&quot;:&quot;129&quot;,&quot;object_id&quot;:&quot;133&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 2&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;134&quot;:{&quot;ID&quot;:134,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:28:07&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:28:07&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 2&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-6&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=134&quot;,&quot;menu_order&quot;:11,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:134,&quot;menu_item_parent&quot;:&quot;129&quot;,&quot;object_id&quot;:&quot;134&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 2&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;130&quot;:{&quot;ID&quot;:130,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:27:04&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:27:04&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 2&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-3&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=130&quot;,&quot;menu_order&quot;:12,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:130,&quot;menu_item_parent&quot;:&quot;129&quot;,&quot;object_id&quot;:&quot;130&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 2&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;}}},&quot;125&quot;:{&quot;ID&quot;:125,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-3-2&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=125&quot;,&quot;menu_order&quot;:13,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:125,&quot;menu_item_parent&quot;:&quot;29&quot;,&quot;object_id&quot;:&quot;125&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;,&quot;spxChildren&quot;:{&quot;126&quot;:{&quot;ID&quot;:126,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 3&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-3-2-1&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=126&quot;,&quot;menu_order&quot;:14,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:126,&quot;menu_item_parent&quot;:&quot;125&quot;,&quot;object_id&quot;:&quot;126&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 3&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;127&quot;:{&quot;ID&quot;:127,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 3&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-3-2-2&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=127&quot;,&quot;menu_order&quot;:15,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:127,&quot;menu_item_parent&quot;:&quot;125&quot;,&quot;object_id&quot;:&quot;127&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 3&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;128&quot;:{&quot;ID&quot;:128,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:25:11&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 3&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-3-2-3&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=128&quot;,&quot;menu_order&quot;:16,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:128,&quot;menu_item_parent&quot;:&quot;125&quot;,&quot;object_id&quot;:&quot;128&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 3&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;131&quot;:{&quot;ID&quot;:131,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-05-15 13:27:04&quot;,&quot;post_date_gmt&quot;:&quot;2020-05-15 13:27:04&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item 3&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-item-2&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/spx\/?p=131&quot;,&quot;menu_order&quot;:17,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:131,&quot;menu_item_parent&quot;:&quot;125&quot;,&quot;object_id&quot;:&quot;131&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item 3&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;}}}}},&quot;30&quot;:{&quot;ID&quot;:30,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-25 23:26:27&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-4&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=30&quot;,&quot;menu_order&quot;:18,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:30,&quot;menu_item_parent&quot;:&quot;0&quot;,&quot;object_id&quot;:&quot;30&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;39&quot;:{&quot;ID&quot;:39,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-27 17:10:36&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-27 17:10:36&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;custom&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=39&quot;,&quot;menu_order&quot;:19,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:39,&quot;menu_item_parent&quot;:&quot;0&quot;,&quot;object_id&quot;:&quot;39&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;,&quot;spxChildren&quot;:{&quot;34&quot;:{&quot;ID&quot;:34,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-sub-4&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=34&quot;,&quot;menu_order&quot;:20,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:34,&quot;menu_item_parent&quot;:&quot;39&quot;,&quot;object_id&quot;:&quot;34&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;31&quot;:{&quot;ID&quot;:31,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-sub-1&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=31&quot;,&quot;menu_order&quot;:21,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:31,&quot;menu_item_parent&quot;:&quot;39&quot;,&quot;object_id&quot;:&quot;31&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;},&quot;32&quot;:{&quot;ID&quot;:32,&quot;post_author&quot;:&quot;1&quot;,&quot;post_date&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_date_gmt&quot;:&quot;2020-04-26 20:50:47&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Menu Item&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;menu-sub-2&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_modified_gmt&quot;:&quot;2020-05-29 22:02:35&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;http:\/\/fabrikatdigital.com\/harmoni\/?p=32&quot;,&quot;menu_order&quot;:22,&quot;post_type&quot;:&quot;nav_menu_item&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;,&quot;db_id&quot;:32,&quot;menu_item_parent&quot;:&quot;39&quot;,&quot;object_id&quot;:&quot;32&quot;,&quot;object&quot;:&quot;custom&quot;,&quot;type&quot;:&quot;custom&quot;,&quot;type_label&quot;:&quot;Custom Link&quot;,&quot;title&quot;:&quot;Menu Item&quot;,&quot;url&quot;:&quot;#&quot;,&quot;target&quot;:&quot;&quot;,&quot;attr_title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;&quot;],&quot;xfn&quot;:&quot;&quot;}}}}" 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

recalc

Recalculate distance.

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: number

Activates automatic navigation scrolling and sets the offset.

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

class-item

Type: string

Apply classes to item.

font-size

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

Component font-size property.

font-size-max

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

Component font-size-max property.

font-size-min

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

Component font-size-min 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-gap-max

Type: numberDefault: 1

item-gap-min

Type: numberDefault: 0.4

item-padding

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

Item padding.

item-padding-max

Type: numberDefault: 1.2CSS variable: --spx-share-item-padding-max

Item max padding.

item-padding-min

Type: numberDefault: 0.5CSS variable: --spx-share-item-padding-min

Item min padding.

item-size

Type: stringDefault: '1em'

item-size-max

Type: numberDefault: 1

item-size-min

Type: numberDefault: 0.7

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.

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid', 'headless'

Styling.

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.

class-button

Type: string

Apply classes to button.

class-text

Type: string

Apply classes to text.

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.

font-size-max

Type: numberDefault: 1.6CSS variable: --spx-snackbar-font-size-max

Component font-size-max property.

font-size-min

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

Component font-size-min property.

identifier

Type: stringDefault: 'primary'

Unique identifier for snackbar instance.

padding

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

Component padding property.

padding-max

Type: numberDefault: 1.4CSS variable: --spx-snackbar-padding-max

Component padding-max property.

padding-min

Type: numberDefault: 1CSS variable: --spx-snackbar-padding-min

Component padding-min 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.

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid', 'headless'

Styling.

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.

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.