Web Components
Introduced by Alex Rusell at the Fronteers Conference in 2011, Web Components have since
gained traction among web developers to create encapsulated and reusable elements for
the
web.
They look like that:
<my-component name="Dennis"/>
As you can see, it's not much different than your standard HTML elements like a div or li. Since web
components are built with Javascript, they are executed on the client-side, so when visited in a
browser. A custom component could be programmed in any way, depending on its purpose.
For example, the goal could be to create a card component that displays the 'name'
attribute in an H1 tag wrapped in a div once executed:
<my-card name="Dennis">
<div class="card-wrap">
<h1 class="card-title">Dennis</h1>
</div>
</my-card>
Components behave like standard HTML elements, so you can target them by using CSS:
my-card {
background: white;
padding: 1em;
border-radius: 0.125em;
}
That's it, for the most part. Let's dive deeper into how spx is utilizing the power of web
components.
Attributes
All settings for spx components are applied using attributes. These are no different to
attributes for standard HTML elements.
<spx-masonry
columns="4"
bp-columns="1000:2,600:1"
gap="2%">
<img src="img.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
...
</spx-masonry>
The above code would output a masonry layout of images that spans four columns, with a gap of 2% between
images. The number of columns will reduce to 2 when the screen size is under 1000px and to 1 when under
600px.
Every component has different possible attributes that can be applied. Please head to the
individual components to find out more.
CSS variables
Components which are not purely functional can also be styled using CSS variables.
The variable names correlate with their attribute counterpart like this:
:root {
--spx-masonry-gap: 10px;
}
That would create a gap of 10px between all images of all existing masonry components on
the site. If you want to target a specific instance, you could give an ID or class to the
component:
<spx-masonry id="my-masonry">
<img src="img.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
...
</spx-masonry>
#my-masonry {
--spx-masonry-gap: 1em;
}
While it is technically possible to style the components directly and without CSS variables, it is not
recommended. Since all CSS is generated dynamically, random classes are being applied by the
CSS-in-JS
engine (spx is using Emotion). These
classes change depending on the applied attributes. CSS variables are also future-proof in case
components will be switched over to use the new Shadow DOM API.
On top of that, some component attributes apply the same value to many different properties for
the element to function correctly, making styling without CSS variables not a viable option.
Tokens
Besides variables for all individual components, some general design tokens that affect all
components.
body {
--spx-font-family: var(--spx-token-font-family,helvetica,segoe,arial,sans-serif);
--spx-font-size: var(--spx-token-font-size,16px);
--spx-border-radius: var(--spx-token-border-radius,0.5em);
--spx-transition-duration: var(--spx-token-transition-duration,150ms);
--spx-transition-duration-2: var(--spx-token-transition-duration-2,500ms);
--spx-transition-timing-function: var(--spx-token-transition-timing-function,cubic-bezier(0.4,0,0.2,1));
}
Please note that all builder elements use a different system for the font-family and font-size and are
thus
not altered by the above values.
Responsive design
Creating responsive designs using spx components is straight forward and possible in two different ways.
Let's change the font-size of our navigation element for desktop screen sizes.
@media (min-width: 1280px) {
body {
--spx-navigation-font-size: 24px;
}
}
Using CSS variables is preferred, however, it is also possible to style elements responsively using
attributes.
<spx-navigation bp-1280="font-size: 24px">
</spx-navigation>
This will have the same result as styling the component with the CSS code from above but instead relies
on the
ResizeObserver
interface to apply the appropriate values. Of course, it is possible to create various
breakpoints
and add multiple attributes.
<spx-navigation
bp-1280="font-size: 24px; parent-item-padding: 18px;"
bp-1920="font-size: 30px">
</spx-navigation>
@media (min-width: 1280px) {
body {
--spx-navigation-font-size: 18px;
--spx-navigation-parent-item-padding: 24px;
}
}
@media (min-width: 1920px) {
body {
--spx-navigation-font-size: 30px;
}
}
Helpers
While many of the components will work without WordPress, the true, time-saving power of
spx comes from using it in conjunction with the provided PHP helper functions. At the
moment, helper functions exist for the masonry and navigation component. The navigation
component only works using the helper function.
<?php $images = spx\Get::gallery("myGallery", "acf") ?>
<spx-masonry images="<?php echo $images ?>"/>
This will automatically create a masonry layout from the ACF gallery!
Available helpers:
<?php
// gets images for masonry, slider, slideshow
spx\Get::gallery($fieldName, $fieldType)
// gets a menu for navigation
spx\Get::navigation($name)
// gets a single post for page-single
spx\Get::post($id, $dateFormat, $imageSize)
Helpers are also available as non class-based functions:
<?php
// gets images for masonry, slider, slideshow
spxGetGallery($fieldName, $fieldType)
// gets a menu for navigation
spxGetNavigation($name)
// gets a single post for page-single
spxGetPost($id, $dateFormat, $imageSize)
Slots
Some components have certain slots that can be filled with custom markup. For example,
the
accordion can be filled with custom slots for the header and content.
<spx-accordion>
<div slot="header">Click me to unveil the content</div>
<img slot="content" src="image.jpg"/>
</spx-accordion>
Events
Javascript events are being emitted by a couple of components. You can attach an event
listener to those just like you normally would.
document.addEventListener('spxEditButtonSave', function() {
// your functions
});
Methods
Components might expose public methods in Javascript:
(async () => {
await customElements.whenDefined('spx-typewriter');
const sT = document.querySelector('spx-typewriter');
await sT.play();
})();
The above code would start the animation of the typewriter component. Methods come in handy
when trying to interact with other libraries and functions.
API
spx contains a set of .json files that includes all of the component information. It is located in the
plugin folder and named data.
Inside each file, you'll find information about the component, attribute names, default values, data
types and more. The data can be used to integrate the components into page builders or other
systems with ease.
We are using the same set internally to automatically generate a good portion of this documentation
and all of the available shortcodes.
Since the data is recreated with every update, all information found inside the files is
always current and up to date.
Oxygen
Before version 2.0, components were integrated inside of Oxygen as separate elements.
2.0 is changing that behaviour. Instead of individual elements, there now is a master element, which can
become any of the core components. This has various advantages for the development team behind spx,
since it isn't necessary to implement every component and property again.
Instead, the wrapper now correlates with the core JavaScript components, meaning that every new element
and property is immediately available to be used inside Oxygen. Settings can be applied using the
"Attributes" text box just like outside of Oxygen. The single components are still available in
2.0, but will be removed with version 3.0. It is advised to use the wrapper element from
now on.
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 ElementThe classic method to show and hide elements on your website.
Can be used with custom markup for the header and/or content section.
<spx-accordion indicator-icon="happy"
header-text="Click me to show some more text">
<h1 slot="content">
Hello!
</h1>
</spx-accordion>
<style>
spx-accordion + spx-accordion {
margin-top: 12px;
}
</style>
<spx-accordion indicator-icon="cube"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close">
</spx-accordion>
<spx-accordion indicator-icon="aperture"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close">
</spx-accordion>
<spx-accordion indicator-icon="apps"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close">
</spx-accordion>
<style>
spx-accordion + spx-accordion {
margin-top: 12px;
}
</style>
<spx-accordion indicator-icon="cube"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle">
</spx-accordion>
<spx-accordion indicator-icon="aperture"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle">
</spx-accordion>
<spx-accordion indicator-icon="apps"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle">
</spx-accordion>
<spx-accordion indicator-icon="happy"
header-text="Click me to show some more text"
reverse>
<h1 slot="content">
Hello!
</h1>
</spx-accordion>
Properties
content-color
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-accordion-content-color
Content color.
content-text
Type: stringDefault: 'Default Content Text'
Content text.
content-text-tag
Type: stringDefault: 'span'
Content text tag.
content-transition-duration
Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-accordion-content-transition-duration
Content transition-duration.
content-transition-timing-function
Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-accordion-content-transition-timing-function
Content transition-timing-function.
disable-animation
Type: boolean
Disables the animation.
Set this attribute if the accordion is starting hidden in the DOM.
font-size
Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-accordion-font-size
Component font-size property.
gap
Type: stringDefault: '0.4em'CSS variable: --spx-accordion-gap
Space between header and content.
header-color
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-accordion-header-color
Header color.
header-gap
Type: stringDefault: '0.4em'CSS variable: --spx-accordion-header-gap
Gap between header text and icon.
header-text
Type: stringDefault: 'Default Header Text'
Header text.
header-text-open
Type: string
Header text when component is closed.
header-text-tag
Type: stringDefault: 'span'
Header text tag.
indicator-icon
Type: stringDefault: 'arrow-down'
Indicator icon.
indicator-icon-transform
Type: stringDefault: 'rotate(180deg)'
Indicator icon transform.
indicator-icon-type
Type: stringDefault: 'ionicons'
Indicator icon type.
link
Type: string
Sets the ID to link different accordions together.
link-type
Type: stringChoices: 'open', 'close', 'toggle'
Sets the type of link.
open-state
Type: booleanDefault: false
State of accordion.
reverse
Type: boolean
Reverse icon positioning.
Slots
content
Slot for the content.
header
Slot for the header.
Events
spxAccordionDidLoad
Fires after component has loaded.
Methods
close
Closes the accordion.
toggle
Toggles the accordion.
Animate
Available as: Web ComponentShortcodeOxygen ElementWrapper 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
restart
Restarts animation.
Class Toggle
Available as: Web ComponentShortcodeOxygen ElementToggle 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
Code
Available as: Web ComponentShortcodeOxygen ElementHighlight a block of code similar to a code editor.
<spx-code type="css">
@media (min-width: 1280px) {
body {
margin: 18px;
padding: 24px;
}
}
</spx-code>
Properties
background
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-code-background
Component background property.
border-radius
Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-code-border-radius
Component border-radius property.
clipboard
Type: booleanDefault: true
Enable clipboard button.
clipboard-button-background
Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-code-clipboard-button-background
Clipboard button background.
clipboard-button-color
Type: stringDefault: 'var(--spx-color-gray-400)'CSS variable: --spx-code-clipboard-button-color
Clipboard button color.
clipboard-button-font-size
Type: stringDefault: '12px'CSS variable: --spx-code-clipboard-button-font-size
Clipboard button font-size.
clipboard-button-font-weight
Type: anyDefault: 600CSS variable: --spx-code-clipboard-button-font-weight
Clipboard button font-weight.
clipboard-button-padding
Type: stringDefault: '6px 12px'CSS variable: --spx-code-clipboard-button-padding
Clipboard button padding.
clipboard-button-text
Type: stringDefault: 'Copy'
clipboard-button-text-copied
Type: stringDefault: 'Copied!'
clipboard-button-text-transform
Type: stringDefault: 'uppercase'CSS variable: --spx-code-clipboard-button-text-transform
Clipboard button text-transform.
display
Type: stringDefault: 'block'CSS variable: --spx-code-display
Component display property.
font-size
Type: stringDefault: 'clamp(12px, 1.6vw, 16px)'CSS variable: --spx-code-font-size
Component font-size property.
height
Type: stringDefault: 'auto'
hide-scrollbar
Type: boolean
Hide scrollbar.
line-numbers
Type: booleanDefault: true
Enable line numbers.
line-numbers-background
Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-code-line-numbers-background
Line numbers background.
line-numbers-color
Type: stringDefault: 'var(--spx-color-gray-400)'CSS variable: --spx-code-line-numbers-color
Line numbers color.
max-width
Type: stringDefault: '100%'CSS variable: --spx-code-max-width
Component max-width property.
overflow
Type: stringDefault: 'auto'
padding
Type: stringDefault: 'clamp(20px, 2.4vw, 40px)'CSS variable: --spx-code-padding
Component padding property.
theme
Type: stringDefault: 'default'Choices: 'default', 'dracula'
Colour theme.
type
Type: stringDefault: 'markup'Choices: 'markup', 'css', 'php'
Determines the programming language.
Events
spxCodeDidLoad
Fires after component has loaded.
Methods
Edit Button
Available as: Web ComponentShortcodeOxygen ElementLet your clients edit text on their site using this handy component.
<h1 data-spx-edit="test">Hello, I am test content.</h1>
<spx-edit-button test position="bottom-right"></spx-edit-button>
There is a guide available for this component.
Properties
background
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-edit-button-background
Component background property.
background-discard
Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-edit-button-background-discard
Discard button background.
border
Type: stringDefault: 'none'CSS variable: --spx-edit-button-border
Component border property.
border-radius
Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-edit-button-border-radius
Component border-radius property.
color
Type: stringDefault: '#ffffff'CSS variable: --spx-edit-button-color
Component color property.
color-discard
Type: stringDefault: '#ffffff'CSS variable: --spx-edit-button-color-discard
Discard button color.
distance-x
Type: stringDefault: '1em'CSS variable: --spx-edit-button-distance-x
Distance to the edge of the viewport on the x-axis.
distance-y
Type: stringDefault: '1em'CSS variable: --spx-edit-button-distance-y
Distance to the edge of the viewport on the y-axis.
edit-id
Type: string
Corresponding ID for editable fields. This property is needed when multiple edit-button components are used on the page. Simply apply a "data-spx-edit-id" attribute with the same value to editable elements.
font-family
Type: stringDefault: 'var(--spx-font-family)'CSS variable: --spx-edit-button-font-family
Component font-family property.
font-size
Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-edit-button-font-size
Component font-size property.
gap
Type: stringDefault: '0.4em'CSS variable: --spx-edit-button-gap
Gap between the buttons.
padding
Type: stringDefault: '0.8em 1.2em'CSS variable: --spx-edit-button-padding
Component padding property.
position
Type: stringDefault: 'bottom-right'Choices: 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'
Component position in page.
position-css
Type: "absolute" | "fixed" | "relative" | "static"Default: 'fixed'
CSS property position of button.
test
Type: booleanDefault: false
text-discard
Type: stringDefault: 'Discard'
Discard button text.
text-edit
Type: stringDefault: 'Edit site'
Edit button text.
text-save
Type: stringDefault: 'Save'
Save button text.
text-success
Type: stringDefault: 'Save was successful'
Success message.
z-index
Type: numberDefault: 99CSS variable: --spx-edit-button-z-index
Component z-index property.
Events
spxEditButtonDidLoad
Fires after component has loaded.
spxEditButtonDiscard
Fires after pressing the discard button.
spxEditButtonSave
Fires after pressing the save button.
Methods
Group
Available as: Web ComponentOxygen ElementPass 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
Icon
Available as: Web ComponentShortcodeOxygen ElementWrapper component for different kinds of icon sets. Currently comes included with Ionicons.
<spx-icon icon="cube"></spx-icon>
<spx-icon icon="cube-outline"></spx-icon>
<spx-icon icon="extension-puzzle"></spx-icon>
<spx-icon icon="extension-puzzle-outline"></spx-icon>
Properties
color
Type: stringDefault: 'inherit'CSS variable: --spx-icon-color
Component color property.
icon
Type: string
Icon code.
size
Type: stringDefault: '1em'
Icon size.
type
Type: stringDefault: 'ionicons'Choices: 'ionicons', 'caret'
Icon type.
Events
spxIconDidLoad
Fires after component has loaded.
Iframe
Available as: Web ComponentShortcodeA wrapper around a standard iframe element, which scales proportionally to its parent.
Great for showing desktop versions of a website on smaller screens or viewports.
<spx-iframe src="<?php echo site_url(); ?>" size="1920px">
</spx-iframe>
Properties
display
Type: stringDefault: 'block'CSS variable: --spx-iframe-display
Component display property.
document-border
Type: stringDefault: 'none'CSS variable: --spx-iframe-document-border
Document border.
document-border-radius
Type: stringDefault: 'none'CSS variable: --spx-iframe-document-border-radius
Document radius border.
document-height
Type: stringDefault: 'auto'
document-width
Type: stringDefault: '100%'
fit
Type: boolean
Automatically resize iframe to fit content.
lazy
Type: boolean
Lazy load content.
size
Type: stringDefault: '1440px'
Screen size of the site shown inside the iframe.
src
Type: stringDefault: 'https://spx.dev'
Source for the iframe.
type
Type: stringDefault: 'resize'Choices: 'resize', 'document', 'type'
Screen size of the site shown inside the iframe.
Events
spxIFrameDidLoad
Fires after component has loaded.
Methods
Image Comparison
Available as: Web ComponentShortcodeOxygen ElementCompare two images visually using a slider. Handy for showing subtle (or not so subtle) before/after differences.
<spx-image-comparison
src-before="https://source.unsplash.com/random/1201x300"
src-after="https://source.unsplash.com/random/1300x300"
height="300px">
</spx-image-comparison>
Properties
color
Type: stringDefault: '#ffffff'CSS variable: --spx-image-comparison-color
Component color property.
height
Type: stringDefault: '100%'
icon-color
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-image-comparison-icon-color
Icon color.
loading
Type: "auto" | "eager" | "lazy"
Lazy load attribute.
src-after
Type: stringDefault: 'https://source.unsplash.com/random/1200x300'
Image URL of the before image.
src-before
Type: stringDefault: 'https://source.unsplash.com/random/1201x300'
Image URL of the after image.
start
Type: numberDefault: 150
Opening state in pixels.
Events
spxImageComparisonDidLoad
Fires after component has loaded.
Methods
Lightbox
Available as: Web ComponentShortcodeOxygen ElementOverlay 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
Masonry
Available as: Web ComponentShortcodeOxygen ElementArrange 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
Mockup
Available as: Web ComponentShortcodeOxygen ElementDisplay 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
Navigation
Available as: Web ComponentRender a complete WordPress menu with nested submenus and automatic positioning.
<spx-navigation menu="<?php echo spx\Get::navigation( 'documentation' ); ?>" mobile="1">
</spx-navigation>
Properties
child-border
Type: stringDefault: '1px solid var(--spx-color-gray-200)'CSS variable: --spx-navigation-child-border
Child border.
child-border-radius
Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-navigation-child-border-radius
Child menu border-radius.
child-box-shadow
Type: stringDefault: '0 3px 10px 0 rgba(0,0,0,0.05)'CSS variable: --spx-navigation-child-box-shadow
Child menu box-shadow.
child-child-gap
Type: stringDefault: '0.8em'CSS variable: --spx-navigation-child-child-gap
Gap between nested child menus.
child-gap
Type: stringDefault: '0.5em'CSS variable: --spx-navigation-child-gap
Gap between top level menu items and child menus.
child-icon
Type: stringDefault: 'arrow-down'
Indicator icon..
child-icon-type
Type: stringDefault: 'ionicons'
Indicator icon type.
child-indicator-gap
Type: stringDefault: '0.2em'CSS variable: --spx-navigation-child-indicator-gap
Gap between child menu indicator and text.
child-item-background
Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-child-item-background
Child item background.
child-item-background-hover
Type: stringDefault: 'var(--spx-color-gray-100)'CSS variable: --spx-navigation-child-item-background-hover
Child item hover background.
child-item-color
Type: stringDefault: 'var(--spx-color-gray-700)'CSS variable: --spx-navigation-child-item-color
Child item color.
child-item-color-hover
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-navigation-child-item-color-hover
Child item hover color.
child-item-padding
Type: stringDefault: '0.6em 0.8em'CSS variable: --spx-navigation-child-item-padding
Child item padding.
child-placement
Type: stringDefault: 'start'CSS variable: --spx-navigation-child-placementChoices: 'start', 'end'
Child menu placement.
font-size
Type: stringDefault: 'clamp(18px, 1.6vw, 20px)'CSS variable: --spx-navigation-font-size
Component font-size property.
item-transition-duration
Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-navigation-item-transition-duration
Item transition-duration.
item-transition-timing-function
Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-navigation-item-transition-timing-function
Item transition-timing-function.
item-underline
Type: boolean
Underlines all links.
item-underline-hover
Type: boolean
Underlines all links on hover.
menu
Type: string<?php spx\Get::navigation("myMenu") ?>
Renders a WordPress menu.
mobile
Type: numberDefault: 768
Mobile breakpoint.
mobile-icon
Type: string
Mobile button icon.
mobile-icon-type
Type: stringDefault: 'ionicons'
Mobile button icon type.
mobile-item-background
Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-mobile-item-background
Mobile item background.
mobile-item-background-hover
Type: stringDefault: 'var(--spx-color-gray-100)'CSS variable: --spx-navigation-mobile-item-background-hover
Mobile item hover background.
mobile-item-color
Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-navigation-mobile-item-color
Mobile item color.
mobile-item-color-hover
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-navigation-mobile-item-color-hover
Mobile item hover color.
mobile-item-nested-margin-left
Type: stringDefault: '0.8em'CSS variable: --spx-navigation-mobile-item-nested-margin-left
Mobile item nested margin-left.
mobile-item-padding
Type: stringDefault: '0.6em'CSS variable: --spx-navigation-mobile-item-padding
Mobile item padding.
mobile-placement
Type: stringDefault: 'start'CSS variable: --spx-navigation-mobile-placementChoices: 'start', 'end'
Mobile placement.
parent-item-background
Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-parent-item-background
Parent item background.
parent-item-background-hover
Type: stringDefault: 'var(--spx-color-gray-100)'CSS variable: --spx-navigation-parent-item-background-hover
Parent item hover background.
parent-item-color
Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-navigation-parent-item-color
Parent item color.
parent-item-color-hover
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-navigation-parent-item-color-hover
Parent item hover color.
parent-item-gap
Type: stringDefault: '0.4em'CSS variable: --spx-navigation-parent-item-gap
Gap between parent menu items.
parent-item-padding
Type: stringDefault: '0.6em'CSS variable: --spx-navigation-parent-item-padding
Parent item padding.
vertical
Type: boolean
Renders menu vertically.
Events
spxNavigationDidLoad
Fires after component has loaded.
Methods
Notation
Available as: Web ComponentShortcodeAnnotate 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)
show
Draws the annotation.
Offset
Available as: Web ComponentShortcodeOxygen ElementThe 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
Scrollspy
Available as: Web ComponentOxygen ElementAutomatically add CSS classes to navigation items and content elements depending on the scroll position.
Properties
content-class
Type: stringDefault: 'spx-scrollspy__content--active'
Applied class to active content element.
display
Type: stringDefault: 'block'CSS variable: --spx-scrollspy-display
Component display property.
nav-class
Type: stringDefault: 'spx-scrollspy__nav--active'
Applied class to active navigation element.
offset
Type: any
Selects the height of an element (any querySelector value) or number that is used for offsetting how far from the top the next section is activated.
scrolling
Type: boolean
Automatically scroll to the active element
scrolling-offset
Type: numberDefault: 50
Scrolling offset from the top.
target
Type: stringDefault: 'a'
Target element. Can take any querySelector value. (id, class, tag etc.)
url-change
Type: booleanDefault: false
Appends the currently active link to the end of the URL.
Events
spxScrollspyDidLoad
Fires after component has loaded.
Methods
Share
Available as: Web ComponentShortcodeOxygen ElementSocial share buttons. Currently includes Facebook, Twitter, Whatsapp and E-Mail.
<spx-share item-background="black">
</spx-share>
Properties
font-size
Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-share-font-size
Component font-size property.
item-background
Type: stringCSS variable: --spx-share-item-background
Item background.
item-border-radius
Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-share-item-border-radius
Item radius border.
item-color
Type: stringCSS variable: --spx-share-item-color
Gap between buttons.
item-filter-hover
Type: stringDefault: 'brightness(110%) saturate(120%)'CSS variable: --spx-share-item-filter-hover
Filter hover.
item-gap
Type: stringDefault: '0.5em'CSS variable: --spx-share-item-gap
Gap between buttons.
item-padding
Type: stringDefault: '0.5em'CSS variable: --spx-share-item-padding
Item padding.
item-size
Type: stringDefault: '1em'
item-transition-duration
Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-share-item-transition-duration
Item transition-duration.
item-transition-timing-function
Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-share-item-transition-timing-function
Item transition-timing-function.
target
Type: stringDefault: '_blank'
Button href target.
theme
Type: stringDefault: 'default'Choices: 'default', 'outline', 'minimal'
Button theme.
vertical
Type: boolean
Render buttons vertically.
Events
spxShareDidLoad
Fires after component has loaded.
Methods
Slider
Available as: Web ComponentShortcodeOxygen ElementA 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-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
Slideshow
Available as: Web ComponentShortcodeOxygen ElementContinuously 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 ComponentNotification bars with a variety of options.
Great for success or failure messages.
In default mode, the snackbar will fade out and remove itself from the DOM.
<spx-snackbar text="Hello, I'm a snackbar.">
</spx-snackbar>
<style>
body {
min-height: 200px;
}
</style>
<spx-snackbar text="Hello, I'm a snackbar."
fixed
closeable
reverse>
</spx-snackbar>
<style>
body {
min-height: 100px;
}
</style>
<spx-snackbar text="Hello, I'm a snackbar."
fixed
closeable>
</spx-snackbar>
Properties
animation-delay
Type: stringDefault: '200ms'CSS variable: --spx-snackbar-animation-delay
Component animation-delay property.
animation-duration
Type: stringDefault: '2000ms'CSS variable: --spx-snackbar-animation-duration
Component animation-duration property.
background
Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-snackbar-background
Component background property.
border
Type: stringCSS variable: --spx-snackbar-border
Component border property.
border-radius
Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-snackbar-border-radius
Component border-radius property.
closeable
Type: boolean
Adds option to close snackbar after its creation.
color
Type: stringDefault: '#ffffff'CSS variable: --spx-snackbar-color
Component color property.
distance-x
Type: stringDefault: '1em'CSS variable: --spx-snackbar-distance-x
Distance to the edge of the viewport on the x-axis.
distance-y
Type: stringDefault: '1em'CSS variable: --spx-snackbar-distance-y
Distance to the edge of the viewport on the y-axis.
fixed
Type: boolean
Makes snackbar not removable.
font-size
Type: stringDefault: '18px'CSS variable: --spx-snackbar-font-size
Component font-size property.
identifier
Type: stringDefault: 'primary'
Unique identifier for snackbar instance.
padding
Type: stringDefault: '1em'CSS variable: --spx-snackbar-padding
Component padding property.
position
Type: stringDefault: 'bottom-right'Choices: 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'
Component position in page.
position-css
Type: "absolute" | "fixed" | "relative" | "static"Default: 'fixed'
CSS property position of button.
reverse
Type: boolean
Reverses the close button if "closable" prop is true.
space-between
Type: stringDefault: '12px'
Space between snackbars.
target
Type: stringDefault: 'body'
Element where snackbars should be created in.
text
Type: stringDefault: "Hello, I'm a snackbar."
Text inside snackbar.
z-index
Type: numberDefault: 103CSS variable: --spx-snackbar-z-index
Component z-index property.
Events
spxSnackbarDidLoad
Fires after component has loaded.
Methods
Text
Available as: Web ComponentShortcodeOxygen ElementThis component styles text coming from a markdown file or a rich-text editor appropriately.
It will eventually be 100% compatible with the Gutenberg editor as well.
Properties
h1-font-size-max
Type: numberDefault: 3.2CSS variable: --spx-text-h1-font-size-max
H1 max font-size.
h1-font-size-min
Type: numberDefault: 1.6CSS variable: --spx-text-h1-font-size-min
H1 min font-size.
h2-font-size-max
Type: numberDefault: 2.2CSS variable: --spx-text-h2-font-size-max
H2 max font-size.
h2-font-size-min
Type: numberDefault: 1.4CSS variable: --spx-text-h2-font-size-min
H2 min font-size.
h3-font-size-max
Type: numberDefault: 1.8CSS variable: --spx-text-h3-font-size-max
H3 max font-size.
h3-font-size-min
Type: numberDefault: 1.2CSS variable: --spx-text-h3-font-size-min
H3 min font-size.
h4-font-size-max
Type: numberDefault: 1.6CSS variable: --spx-text-h4-font-size-max
H4 max font-size.
h4-font-size-min
Type: numberDefault: 1CSS variable: --spx-text-h4-font-size-min
H4 min font-size.
heading-color
Type: stringDefault: 'var(--spx-color-black)'CSS variable: --spx-text-heading-color
Heading color.
heading-font-family
Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-text-heading-font-family
Heading font-family.
heading-font-weight
Type: stringDefault: '500'CSS variable: --spx-text-heading-font-weight
Heading font-weight.
heading-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-text-heading-letter-spacing
Heading letter-spacing.
heading-line-height
Type: stringDefault: '1.5'CSS variable: --spx-text-heading-line-height
Heading line-height.
heading-text-transform
Type: stringDefault: 'default'CSS variable: --spx-text-heading-text-transform
Heading text-transform.
link-decoration-color
Type: stringDefault: 'var(--spx-color-primary-600)'CSS variable: --spx-text-link-decoration-color
Link decoration color.
markdown
Type: booleanDefault: false
Parse markdown.
max-width
Type: stringDefault: '768px'CSS variable: --spx-text-max-width
Component max-width property.
padding-figure-max
Type: numberDefault: 3CSS variable: --spx-text-padding-figure-max
figure max padding.
padding-figure-min
Type: numberDefault: 0.9CSS variable: --spx-text-padding-figure-min
figure min padding.
space-before-h1-max
Type: numberDefault: 8
space-before-h1-min
Type: numberDefault: 4
space-between-max
Type: numberDefault: 2
space-between-min
Type: numberDefault: 0.9
space-between-pmax
Type: numberDefault: 1.5
space-between-pmin
Type: numberDefault: 0.9
text-color
Type: stringDefault: 'var(--spx-color-gray-700)'CSS variable: --spx-text-text-color
Text color.
text-font-family
Type: stringDefault: state.fontFamilySecondaryCSS variable: --spx-text-text-font-family
Text font-family.
text-font-size-max
Type: numberDefault: 1.4CSS variable: --spx-text-text-font-size-max
Text max font-size.
text-font-size-min
Type: numberDefault: 1CSS variable: --spx-text-text-font-size-min
Text min font-size.
text-font-weight
Type: stringDefault: '400'CSS variable: --spx-text-text-font-weight
Text font-weight.
text-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-text-text-letter-spacing
Text letter-spacing.
text-line-height
Type: stringDefault: '1.5'CSS variable: --spx-text-text-line-height
Text line-height.
text-text-transform
Type: stringDefault: 'default'CSS variable: --spx-text-text-text-transform
Text text-transform.
Events
spxTextDidLoad
Fires after component has loaded.
Typewriter
Available as: Web ComponentShortcodeOxygen ElementAnimates 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
Introduction
A new feature of version 2.0 is the page builder. It is a collection of components to create responsive,
full-page layouts. All of the following elements are part of an evolving system that is supposed to ease
the way modern sites are being built.
They are meant to be used together and in many cases are dependant on each other. This is not the case
with
the core component suite, as they are built (and will continue to be built) as standalone, boxed-off
elements. However, this doesn't mean that the core components can't be used with the new building
system.
Keep in mind that sections, pages, and the container component and related documentation are in beta, so
changes to properties and elements will happen without warning. If you want to see how they work under
the
hood, check out the source code of the homepage.
Container
Available as: Web ComponentShortcodeOxygen ElementThe container element is a special component, as it isn't outputting any visible markup.
Rather, it's purpose is to provide global styles for section and page components.
It does not affect single components and won't ever will.
Properties
bp-mobile
Type: numberDefault: 1024
Mobile breakpoint width.
button-background-primary
Type: numberDefault: 500CSS variable: --spx-container-button-background-primary
Button primary background.
button-background-secondary
Type: numberDefault: 100CSS variable: --spx-container-button-background-secondary
Button secondary background.
button-border-radius
Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-container-button-border-radius
Button radius border.
button-color-primary
Type: numberDefault: 50CSS variable: --spx-container-button-color-primary
Button primary color.
button-color-secondary
Type: numberDefault: 600CSS variable: --spx-container-button-color-secondary
Button secondary color.
button-font-size-max
Type: numberDefault: 1.3CSS variable: --spx-container-button-font-size-max
Button max font-size.
button-font-size-min
Type: numberDefault: 1CSS variable: --spx-container-button-font-size-min
Button min font-size.
button-font-weight
Type: stringDefault: 'bold'CSS variable: --spx-container-button-font-weight
Button font-weight.
button-margin-top-max
Type: numberDefault: 2CSS variable: --spx-container-button-margin-top-max
Button max margin-top.
button-margin-top-min
Type: numberDefault: 1CSS variable: --spx-container-button-margin-top-min
Button min margin-top.
button-margin-x-max
Type: numberDefault: 1
button-margin-x-min
Type: numberDefault: 0.5
button-padding-x-max
Type: numberDefault: 2CSS variable: --spx-container-button-padding-x-max
Button x max padding.
button-padding-x-min
Type: numberDefault: 1CSS variable: --spx-container-button-padding-x-min
Button x min padding.
button-padding-y-max
Type: numberDefault: 1.5CSS variable: --spx-container-button-padding-y-max
Button y max padding.
button-padding-y-min
Type: numberDefault: 1CSS variable: --spx-container-button-padding-y-min
Button y min padding.
button-text-transform
Type: stringDefault: 'uppercase'CSS variable: --spx-container-button-text-transform
Button text-transform.
color-gray
Type: stringDefault: 'blue-gray'CSS variable: --spx-container-color-grayChoices: 'blue-gray', 'cool-gray', 'gray', 'true-gray', 'warm-gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'light-blue', 'blue', 'indigo', 'violet', 'purple'; 'fuchsia', 'pink', 'rose'
Gray color which will be used for sections and pages.
color-primary
Type: stringDefault: 'teal'CSS variable: --spx-container-color-primaryChoices: 'blue-gray', 'cool-gray', 'gray', 'true-gray', 'warm-gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'light-blue', 'blue', 'indigo', 'violet', 'purple'; 'fuchsia', 'pink', 'rose'
Primary color which will be used for sections and pages.
color-secondary
Type: stringDefault: 'pink'CSS variable: --spx-container-color-secondaryChoices: 'blue-gray', 'cool-gray', 'gray', 'true-gray', 'warm-gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'light-blue', 'blue', 'indigo', 'violet', 'purple'; 'fuchsia', 'pink', 'rose'
Secondary color which will be used for sections and pages.
disable-colors
Type: booleanCSS variable: --spx-container-disable-colors
Disable color generation.
focus-color
Type: stringDefault: 'var(--spx-color-secondary-600)'CSS variable: --spx-container-focus-color
Focus color.
font-family-primary
Type: stringDefault: 'var(--spx-font-family-primary)'CSS variable: --spx-container-font-family-primary
Primary font-family.
font-family-secondary
Type: stringDefault: 'var(--spx-font-family-secondary)'CSS variable: --spx-container-font-family-secondary
Secondary font-family.
image-max-width
Type: stringDefault: 'none'CSS variable: --spx-container-image-max-width
Image max-width.
linear-base
Type: numberDefault: 16
Linear scaling root number.
linear-max-w
Type: numberDefault: 1440
Linear scaling maximum width.
linear-min-w
Type: numberDefault: 320
Linear scaling minimum width.
max-width
Type: stringDefault: '1440px'CSS variable: --spx-container-max-width
Section max-width.
max-width-mobile
Type: stringDefault: '500px'CSS variable: --spx-container-max-width-mobile
Section max-width on mobile.
offset-header
Type: boolean
Offsets first section to the height of the header.
padding-x
Type: stringDefault: 'var(--spx-container-padding-x)'CSS variable: --spx-container-padding-x
Space between content and outer edge of the viewport.
padding-x-sm
Type: stringDefault: 'var(--spx-container-padding-x-sm)'CSS variable: --spx-container-padding-x-sm
Space between content and outer edge of the viewport.
padding-yfirst-max
Type: numberDefault: 8CSS variable: --spx-container-padding-yfirst-max
yfirst max padding.
padding-yfirst-min
Type: numberDefault: 2CSS variable: --spx-container-padding-yfirst-min
yfirst min padding.
padding-y-max
Type: numberDefault: 10CSS variable: --spx-container-padding-y-max
y max padding.
padding-y-max-width
Type: numberDefault: 2560CSS variable: --spx-container-padding-y-max-width
y max width padding.
padding-y-min
Type: numberDefault: 3CSS variable: --spx-container-padding-y-min
y min padding.
padding-ymultiplier
Type: numberDefault: 1.5CSS variable: --spx-container-padding-ymultiplier
ymultiplier padding.
pre-title-background
Type: stringDefault: 'var(--spx-color-secondary-50)'CSS variable: --spx-container-pre-title-background
Pre title background.
pre-title-border-radius
Type: stringDefault: '9999px'CSS variable: --spx-container-pre-title-border-radius
Pre title radius border.
pre-title-color
Type: stringDefault: 'var(--spx-color-secondary-900)'CSS variable: --spx-container-pre-title-color
Pre title color.
pre-title-font-size-max
Type: numberDefault: 0.7CSS variable: --spx-container-pre-title-font-size-max
Pre title max font-size.
pre-title-font-size-min
Type: numberDefault: 0.6CSS variable: --spx-container-pre-title-font-size-min
Pre title min font-size.
pre-title-font-weight
Type: stringDefault: '400'CSS variable: --spx-container-pre-title-font-weight
Pre title font-weight.
pre-title-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-container-pre-title-letter-spacing
Pre title letter-spacing.
pre-title-line-height
Type: stringDefault: '1.6'CSS variable: --spx-container-pre-title-line-height
Pre title line-height.
pre-title-margin-bottom-max
Type: numberDefault: 2.5CSS variable: --spx-container-pre-title-margin-bottom-max
Pre title max margin-bottom.
pre-title-margin-bottom-min
Type: numberDefault: 1CSS variable: --spx-container-pre-title-margin-bottom-min
Pre title min margin-bottom.
pre-title-padding-x-max
Type: numberDefault: 1.2CSS variable: --spx-container-pre-title-padding-x-max
Pre title x max padding.
pre-title-padding-x-min
Type: numberDefault: 0.8CSS variable: --spx-container-pre-title-padding-x-min
Pre title x min padding.
pre-title-padding-y-max
Type: numberDefault: 0.4CSS variable: --spx-container-pre-title-padding-y-max
Pre title y max padding.
pre-title-padding-y-min
Type: numberDefault: 0.3CSS variable: --spx-container-pre-title-padding-y-min
Pre title y min padding.
pre-title-text-transform
Type: stringDefault: 'uppercase'CSS variable: --spx-container-pre-title-text-transform
Pre title text-transform.
tabs-first-margin-top-max
Type: numberDefault: 2CSS variable: --spx-container-tabs-first-margin-top-max
Tabs first max margin-top.
tabs-first-margin-top-min
Type: numberDefault: 1CSS variable: --spx-container-tabs-first-margin-top-min
Tabs first min margin-top.
tabs-margin-top-max
Type: numberDefault: 1CSS variable: --spx-container-tabs-margin-top-max
Tabs max margin-top.
tabs-margin-top-min
Type: numberDefault: 0.5CSS variable: --spx-container-tabs-margin-top-min
Tabs min margin-top.
tabs-opacity
Type: numberDefault: 0.5CSS variable: --spx-container-tabs-opacity
Tabs opacity.
text-color
Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-container-text-color
Text color.
text-font-size-max
Type: numberDefault: 1.8CSS variable: --spx-container-text-font-size-max
Text max font-size.
text-font-size-min
Type: numberDefault: 1CSS variable: --spx-container-text-font-size-min
Text min font-size.
text-font-weight
Type: stringDefault: '400'CSS variable: --spx-container-text-font-weight
Text font-weight.
text-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-container-text-letter-spacing
Text letter-spacing.
text-line-height
Type: stringDefault: '1.6'CSS variable: --spx-container-text-line-height
Text line-height.
text-link-decoration-color
Type: stringDefault: 'var(--spx-color-primary-400)'CSS variable: --spx-container-text-link-decoration-color
Text link decoration color.
text-link-decoration-color-hover
Type: stringDefault: 'var(--spx-color-primary-500)'CSS variable: --spx-container-text-link-decoration-color-hover
Text link decoration hover color.
text-margin-top-max
Type: numberDefault: 1.8CSS variable: --spx-container-text-margin-top-max
Text max margin-top.
text-margin-top-min
Type: numberDefault: 1CSS variable: --spx-container-text-margin-top-min
Text min margin-top.
text-max-width
Type: stringDefault: '800px'CSS variable: --spx-container-text-max-width
Text max-width.
text-transform
Type: stringDefault: 'default'CSS variable: --spx-container-text-transform
Component text-transform property.
title-color
Type: stringDefault: 'var(--spx-color-black)'CSS variable: --spx-container-title-color
Title color.
title-font-size-max
Type: numberDefault: 3CSS variable: --spx-container-title-font-size-max
Title max font-size.
title-font-size-min
Type: numberDefault: 1.7CSS variable: --spx-container-title-font-size-min
Title min font-size.
title-font-weight
Type: numberDefault: 500CSS variable: --spx-container-title-font-weight
Title font-weight.
title-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-container-title-letter-spacing
Title letter-spacing.
title-line-height
Type: stringDefault: '1.25'CSS variable: --spx-container-title-line-height
Title line-height.
title-max-width
Type: stringDefault: 'max-content'CSS variable: --spx-container-title-max-width
Title max-width.
title-text-transform
Type: stringDefault: 'default'CSS variable: --spx-container-title-text-transform
Title text-transform.
Events
spxContainerDidLoad
Fires after component has loaded.
Button
Available as: Web ComponentShortcodeOxygen ElementProperties
href
Type: string
Link href.
icon-gap-max
Type: numberDefault: 1
icon-gap-min
Type: numberDefault: 0.4
reverse
Type: boolean
Link href.
target
Type: string
Target.
transition-duration
Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-section-button-transition-duration
Component transition-duration property.
transition-timing-function
Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-section-button-transition-timing-function
Component transition-timing-function property.
type
Type: stringDefault: 'primary'Choices: 'primary', 'secondary'
Button type.
Events
spxSectionButtonDidLoad
Fires after component has loaded.
Footer
Available as: Web ComponentShortcodeOxygen ElementFooter component for sections.
Properties
background
Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-section-footer-background
Component background property.
gap
Type: stringCSS variable: --spx-section-footer-gap
Gap between columns.
image-max-height
Type: stringDefault: '40px'
justify-content
Type: stringDefault: 'space-between'
max-width
Type: stringCSS variable: --spx-section-footer-max-width
Component max-width property.
padding-y-max
Type: numberDefault: 12CSS variable: --spx-section-footer-padding-y-max
y max padding.
padding-y-min
Type: numberDefault: 4CSS variable: --spx-section-footer-padding-y-min
y min padding.
space-before-max
Type: numberDefault: 12
space-before-min
Type: numberDefault: 5
text-color
Type: stringDefault: 'var(--spx-color-gray-500)'CSS variable: --spx-section-footer-text-color
Text color.
text-font-size-max
Type: numberDefault: 1.2CSS variable: --spx-section-footer-text-font-size-max
Text max font-size.
text-font-size-min
Type: numberDefault: 1CSS variable: --spx-section-footer-text-font-size-min
Text min font-size.
text-margin-top-max
Type: numberDefault: 1.2CSS variable: --spx-section-footer-text-margin-top-max
Text max margin-top.
text-margin-top-min
Type: numberDefault: 0.8CSS variable: --spx-section-footer-text-margin-top-min
Text min margin-top.
text-max-width
Type: stringDefault: '370px'CSS variable: --spx-section-footer-text-max-width
Text max-width.
title-font-size-max
Type: numberDefault: 1.6CSS variable: --spx-section-footer-title-font-size-max
Title max font-size.
title-font-size-min
Type: numberDefault: 1CSS variable: --spx-section-footer-title-font-size-min
Title min font-size.
title-margin-bottom-max
Type: numberDefault: 2CSS variable: --spx-section-footer-title-margin-bottom-max
Title max margin-bottom.
title-margin-bottom-min
Type: numberDefault: 1CSS variable: --spx-section-footer-title-margin-bottom-min
Title min margin-bottom.
Events
spxSectionFooterDidLoad
Fires after component has loaded.
Header
Available as: Web ComponentShortcodeOxygen ElementThe introductory element of every website.
Properties
backdrop-filter
Type: stringDefault: 'blur(10px)'CSS variable: --spx-section-header-backdrop-filter
Component backdrop-filter property.
background
Type: stringDefault: 'rgba(255,255,255,0.85)'CSS variable: --spx-section-header-background
Component background property.
background-scroll
Type: numberCSS variable: --spx-section-header-background-scroll
Turns on background after scroll.
border-bottom
Type: stringCSS variable: --spx-section-header-border-bottom
Component border-bottom property.
has-scrolled
Type: boolean
logo-link
Type: string
URL the logo links to.
logo-max-height
Type: stringDefault: '50px'
logo-src
Type: string
Logo src.
logo-src-mobile
Type: string
Logo mobile src.
navigation-align
Type: stringDefault: 'center'Choices: 'center', 'right'
Where the navigation should be aligned to.
padding-y-max
Type: numberDefault: 1CSS variable: --spx-section-header-padding-y-max
y max padding.
padding-y-min
Type: numberDefault: 0.8CSS variable: --spx-section-header-padding-y-min
y min padding.
position
Type: "fixed" | "static"
Component positioning.
z-index
Type: numberDefault: 102CSS variable: --spx-section-header-z-index
Component z-index property.
Events
spxSectionHeaderDidLoad
Fires after component has loaded.
Two Column
Available as: Web ComponentShortcodeOxygen ElementTwo-column text-media block component that can be used for a variety of layout options.
The current homepage consists of this block only.
Properties
background
Type: stringCSS variable: --spx-section-two-column-background
Component background property.
background-image
Type: stringCSS variable: --spx-section-two-column-background-image
image background.
column-size
Type: stringDefault: '1fr 1fr'CSS variable: --spx-section-two-column-column-size
Column size.
first
Type: boolean
If set, component will transform the header offset to the top-padding value.
gap-max
Type: numberDefault: 6
gap-min
Type: numberDefault: 3
hide-media
Type: boolean
Hides the media column.
images-gap-max
Type: numberDefault: 2
images-gap-min
Type: numberDefault: 1
layout
Type: stringDefault: 'horizontal'Choices: 'horizontal', 'vertical'
Layout of the section.
media-background
Type: stringCSS variable: --spx-section-two-column-media-background
Background color for the media column.
media-background-overlap
Type: booleanCSS variable: --spx-section-two-column-media-background-overlap
Overlaps the background with the media column.
media-full
Type: boolean
Removes the outer spacing for the media column.
media-full-mobile-fix
Type: boolean
Adds padding to the media column on mobile.
media-margin
Type: stringDefault: '0'
media-padding-max
Type: numberDefault: 3CSS variable: --spx-section-two-column-media-padding-max
Media max padding.
media-padding-min
Type: numberDefault: 2CSS variable: --spx-section-two-column-media-padding-min
Media min padding.
reverse
Type: boolean
Reverses the column order.
reverse-mobile
Type: boolean
Reverses the column order on mobile.
tabs-animation
Type: booleanDefault: false
tabs-animation-color
Type: stringCSS variable: --spx-section-two-column-tabs-animation-color
Tabs animation color.
tabs-animation-duration
Type: numberCSS variable: --spx-section-two-column-tabs-animation-duration
Tabs animation-duration.
text-align-inner
Type: "center" | "left" | "right"Default: 'left'
Alignment for the inner text wrapper.
text-align-outer
Type: "center" | "left" | "right"Default: 'left'
Alignment for the outer text wrapper.
text-background
Type: stringCSS variable: --spx-section-two-column-text-background
Background color for the text column.
text-background-overlap
Type: booleanCSS variable: --spx-section-two-column-text-background-overlap
Overlaps the background with the text column.
Events
spxSectionTwoColumnDidLoad
Fires after component has loaded.
Docs
Available as: Web ComponentShortcodeOxygen ElementRenders a documentation page similar to the one you are currently seeing here.
Every heading tag becomes a navigation entry, while navigation headings get created by applying
the "data-spx-docs-heading" attribute to the first h1 of a new section.
Properties
bp-mobile
Type: numberDefault: 1024
content-heading-font-family
Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-docs-content-heading-font-family
Content heading font-family.
navigation-background
Type: stringDefault: 'var(--spx-color-gray-50)'CSS variable: --spx-page-docs-navigation-background
Navigation background.
navigation-font-family
Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-docs-navigation-font-family
Navigation font-family.
navigation-gap-max
Type: numberDefault: 0.4
navigation-gap-min
Type: numberDefault: 0.2
navigation-heading-tag
Type: stringDefault: 'h1'
navigation-height-adjust
Type: string
navigation-link-color
Type: stringDefault: 'var(--spx-color-800)'CSS variable: --spx-page-docs-navigation-link-color
Navigation link color.
navigation-link-color-active
Type: stringDefault: 'var(--spx-color-primary-600)'CSS variable: --spx-page-docs-navigation-link-color-active
Navigation link active color.
navigation-link-font-weight
Type: stringDefault: '500'CSS variable: --spx-page-docs-navigation-link-font-weight
Navigation link font-weight.
navigation-link-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-page-docs-navigation-link-letter-spacing
Navigation link letter-spacing.
navigation-link-line-height
Type: stringDefault: '1.25'CSS variable: --spx-page-docs-navigation-link-line-height
Navigation link line-height.
navigation-link-text-transform
Type: stringDefault: 'default'CSS variable: --spx-page-docs-navigation-link-text-transform
Navigation link text-transform.
navigation-space-y-max
Type: numberDefault: 4
navigation-space-y-min
Type: numberDefault: 2
navigation-title-color
Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-page-docs-navigation-title-color
Navigation title color.
navigation-title-font-weight
Type: stringDefault: '500'CSS variable: --spx-page-docs-navigation-title-font-weight
Navigation title font-weight.
navigation-title-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-page-docs-navigation-title-letter-spacing
Navigation title letter-spacing.
navigation-title-line-height
Type: stringDefault: '1.25'CSS variable: --spx-page-docs-navigation-title-line-height
Navigation title line-height.
navigation-title-margin-bottom-max
Type: numberDefault: 2CSS variable: --spx-page-docs-navigation-title-margin-bottom-max
Navigation title max margin-bottom.
navigation-title-margin-bottom-min
Type: numberDefault: 1CSS variable: --spx-page-docs-navigation-title-margin-bottom-min
Navigation title min margin-bottom.
navigation-title-text-transform
Type: stringDefault: 'uppercase'CSS variable: --spx-page-docs-navigation-title-text-transform
Navigation title text-transform.
navigation-top
Type: stringDefault: 'var(--spx-offset)'
offset-margin-top-max
Type: numberDefault: 1.2CSS variable: --spx-page-docs-offset-margin-top-max
Offset max margin-top.
offset-margin-top-min
Type: numberDefault: 0.7CSS variable: --spx-page-docs-offset-margin-top-min
Offset min margin-top.
padding-x
Type: stringDefault: state.paddingXCSS variable: --spx-page-docs-padding-x
Distance to the edge of the viewport on the x-axis.
padding-y-max
Type: numberDefault: 4CSS variable: --spx-page-docs-padding-y-max
y max padding.
padding-y-min
Type: numberDefault: 2CSS variable: --spx-page-docs-padding-y-min
y min padding.
Events
spxPageDocsDidLoad
Fires after component has loaded.
Single
Available as: Web ComponentShortcodeOxygen ElementRender a single post layout.
Properties
author-color
Type: stringDefault: 'var(--spx-color-800)'CSS variable: --spx-page-single-author-color
Author color.
author-font-family
Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-single-author-font-family
Author font-family.
author-font-size-max
Type: numberDefault: 1.2CSS variable: --spx-page-single-author-font-size-max
Author max font-size.
author-font-size-min
Type: numberDefault: 0.9CSS variable: --spx-page-single-author-font-size-min
Author min font-size.
author-font-weight
Type: stringDefault: '500'CSS variable: --spx-page-single-author-font-weight
Author font-weight.
author-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-page-single-author-letter-spacing
Author letter-spacing.
author-line-height
Type: stringDefault: '1.25'CSS variable: --spx-page-single-author-line-height
Author line-height.
author-margin-top-max
Type: numberDefault: 2CSS variable: --spx-page-single-author-margin-top-max
Author max margin-top.
author-margin-top-min
Type: numberDefault: 1CSS variable: --spx-page-single-author-margin-top-min
Author min margin-top.
author-text-transform
Type: stringDefault: 'uppercase'CSS variable: --spx-page-single-author-text-transform
Author text-transform.
content-margin-top-max
Type: numberDefault: 4CSS variable: --spx-page-single-content-margin-top-max
Content max margin-top.
content-margin-top-min
Type: numberDefault: 3CSS variable: --spx-page-single-content-margin-top-min
Content min margin-top.
content-max-width
Type: stringDefault: '700px'CSS variable: --spx-page-single-content-max-width
Content max-width.
content-padding-x
Type: stringDefault: 'var(--spx-container-padding-x)'CSS variable: --spx-page-single-content-padding-x
Content x padding.
date
Type: booleanDefault: true
Display date.
date-color
Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-page-single-date-color
Date color.
date-font-family
Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-single-date-font-family
Date font-family.
date-font-size-max
Type: numberDefault: 0.9CSS variable: --spx-page-single-date-font-size-max
Date max font-size.
date-font-size-min
Type: numberDefault: 0.9CSS variable: --spx-page-single-date-font-size-min
Date min font-size.
date-font-weight
Type: stringDefault: '500'CSS variable: --spx-page-single-date-font-weight
Date font-weight.
date-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-page-single-date-letter-spacing
Date letter-spacing.
date-line-height
Type: stringDefault: '1.25'CSS variable: --spx-page-single-date-line-height
Date line-height.
date-margin-top-max
Type: numberDefault: 2CSS variable: --spx-page-single-date-margin-top-max
Date max margin-top.
date-margin-top-min
Type: numberDefault: 1.5CSS variable: --spx-page-single-date-margin-top-min
Date min margin-top.
date-text-transform
Type: stringDefault: 'default'CSS variable: --spx-page-single-date-text-transform
Date text-transform.
header-border-bottom
Type: stringDefault: '1px solid var(--spx-color-gray-200)'CSS variable: --spx-page-single-header-border-bottom
Header bottom border.
header-padding-bottom-max
Type: numberDefault: 2CSS variable: --spx-page-single-header-padding-bottom-max
Header bottom max padding.
header-padding-bottom-min
Type: numberDefault: 1CSS variable: --spx-page-single-header-padding-bottom-min
Header bottom min padding.
image
Type: booleanDefault: true
Display image.
image-border-radius
Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-page-single-image-border-radius
Image radius border.
image-height
Type: stringDefault: 'clamp(200px, 50vh, 600px)'
image-object-position
Type: stringDefault: '50% 50%'
image-padding-x
Type: stringDefault: 'var(--spx-container-padding-x-sm)'CSS variable: --spx-page-single-image-padding-x
Image x padding.
image-space-y-max
Type: numberDefault: 2
image-space-y-min
Type: numberDefault: 1
mobile
Type: numberDefault: 1024
Mobile breakpoint.
post
Type: string<?php spx\Get::post($postId, $dateFormat, $imageSize) ?>
Gets a WordPress post to render.
title-color
Type: stringDefault: 'var(--spx-color-800)'CSS variable: --spx-page-single-title-color
Space to edge of the viewport.
title-font-family
Type: stringDefault: state.fontFamilyPrimaryCSS variable: --spx-page-single-title-font-family
Title font-family.
title-font-size-max
Type: numberDefault: 4CSS variable: --spx-page-single-title-font-size-max
Title max font-size.
title-font-size-min
Type: numberDefault: 2.7CSS variable: --spx-page-single-title-font-size-min
Title min font-size.
title-font-weight
Type: stringDefault: '500'CSS variable: --spx-page-single-title-font-weight
Title font-weight.
title-letter-spacing
Type: stringDefault: '0'CSS variable: --spx-page-single-title-letter-spacing
Title letter-spacing.
title-line-height
Type: stringDefault: '1.25'CSS variable: --spx-page-single-title-line-height
Title line-height.
title-margin-top-max
Type: numberDefault: 2CSS variable: --spx-page-single-title-margin-top-max
Title max margin-top.
title-margin-top-min
Type: numberDefault: 1CSS variable: --spx-page-single-title-margin-top-min
Title min margin-top.
title-text-transform
Type: stringDefault: 'default'CSS variable: --spx-page-single-title-text-transform
Title text-transform.
Events
spxPageSingleDidLoad
Fires after component has loaded.
