Buy me

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 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;   } }

Helper functions

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!

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.

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.

Accordion

<spx-accordion/>

Accordions are the classic method to show and hide elements on your website.

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.

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

Slots

content

Content.

header

Header.

icon

Icon.

Methods

reload

Reload component.

Animate

<spx-animate/>

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

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.

Methods

play

Plays animation.

reload

Reload component.

restart

Restarts animation.

Class Toggle

<spx-class-toggle/>

Toggle CSS classes on any element in the document.

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.

Methods

reload

Reload component.

Code

<spx-code/>

Highlight a block of code similar to a code editor.

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.

font-size

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

Component font-size property.

padding

Type: stringDefault: 'var(--spx-space-lg)'CSS variable: --spx-code-padding

Component padding property.

theme

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

Colour theme.

type

Type: stringDefault: 'markup'

Determines the programming language.

Methods

reload

Reload component.

Edit Button

<spx-edit-button/>

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

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

spxEditButtonDiscard

Fires after pressing the discard button.

spxEditButtonSave

Fires after pressing the save button.

Methods

reload

Reload component.

Group

<spx-group/>

Pass attributes to all inner (spx) child elements. All attributes that start with g-* will be passed on to child elements. For example, to change all icons for a group of accordions, the data attribute would look like that: g-icon-indicator='far fa-arrow-down'

Properties

display

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

Component display property.

target

Type: string

Specifies a target element.

Methods

reload

Reload component.

Icon

<spx-icon/>

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

Properties

color

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

Component color property.

icon

Type: string

Icon code.

size

Type: stringDefault: '20px'

Icon size.

type

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

Icon type.

Iframe

<spx-iframe/>

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.

Properties

size

Type: stringDefault: '1440px'

Screen size of the site shown inside the iframe.

src

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

Source for the iframe.

Methods

reload

Reload component.

Image Comparison

<spx-image-comparison/>

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

Properties

color

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

Component color property.

icon-color

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

Icon color.

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.

Methods

reload

Reload component.

Lightbox

<spx-lightbox/>

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%'

Methods

reload

Reload component.

Masonry

<spx-masonry/>

Arrange images in a masonry layout.

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

Methods

recalc

Recalculate grid.

reload

Reload component.

Mockup

<spx-mockup/>

Display device mockups around your content.

Properties

color-galaxy-s8

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

Samsung S8 color.

color-google-pixel

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

Google Pixel color.

color-ipad-pro

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

iPad Pro color.

color-iphone8

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

iPhone 8 color.

color-macbook

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

MacBook color.

color-macbook-pro

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

MacBook Pro color.

display

Type: stringDefault: '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.

Methods

reload

Reload component.

Navigation

<spx-navigation/>

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

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: 'var(--spx-font-size)'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 when component has loaded.

Methods

reload

Reload component.

Notation

<spx-notation/>

Annotate letters, words or whole sentences.

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.

Methods

clear

Remove the annotation.

hide

Hides the annotation. (non animated)

reload

Reload component.

show

Draws the annotation.

Offset

<spx-offset/>

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.

Methods

reload

Reload component.

Scrollspy

<spx-scrollspy/>

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

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

Methods

reload

Reload component.

Share

<spx-share/>

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

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.

Methods

reload

Reload component.

Slider

<spx-slider/>

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

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-primary-A700)'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-max-width

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

Pagination tabs max-width.

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.

Methods

reload

Reload component.

Slideshow

<spx-slideshow/>

Continuously playing slideshow.

Properties

duration

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

Duration of slideshow to complete one cycle.

gap

Type: stringDefault: 'var(--spx-space-lg)'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.

Snackbar

<spx-snackbar/>

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.

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: 'var(--spx-space-xs)'

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.

Methods

reload

Reload component.

Text

<spx-text/>

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

Properties

content-font-size-multiplier

Type: numberDefault: 1CSS variable: --spx-text-content-font-size-multiplier

Only works if text-type is set to 'multiply'.

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-underline-color

Type: stringDefault: 'var(--spx-color-primary-A700)'CSS variable: --spx-text-link-underline-color

Link underline color.

markdown

Type: booleanDefault: false

Parse markdown.

max-width

Type: stringDefault: 'clamp(700px, 40vw, 1200px)'CSS variable: --spx-text-max-width

Component max-width property.

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

Type: numberDefault: 2560

Maximum viewport width when text-type is set to linear.

text-min-w

Type: numberDefault: 320

Minimum viewport width when text-type is set to linear.

text-text-transform

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

Text text-transform.

text-type

Type: stringDefault: 'linear'

Typewriter

<spx-typewriter/>

Animates text like it is being written on a 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.

Methods

play

Start animation.

stop

Stop animation.

Introduction

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

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

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

Container

<spx-container/>

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

Properties

bp-mobile

Type: numberDefault: c.bpMobileWidth

Mobile breakpoint width.

button-border-radius

Type: stringDefault: s.borderRadiusCSS variable: --spx-container-button-border-radius

Button radius border.

button-font-size-multiplier

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

Button multiplier font-size.

button-font-weight

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

Button font-weight.

button-margin-top

Type: stringDefault: 'var(--spx-space-lg)'CSS variable: --spx-container-button-margin-top

Button margin-top.

button-margin-x

Type: stringDefault: 'var(--spx-space-sm)'

button-reverse-color

Type: stringDefault: c.buttonReverseColorCSS variable: --spx-container-button-reverse-colorChoices: 'all', 'primary', 'secondary'

Reverse color of buttons.

button-text-transform

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

Button text-transform.

color-primary

Type: stringDefault: c.colorPrimaryCSS variable: --spx-container-color-primaryChoices: 'red', 'pink', 'purple', 'deep purple', 'indigo', 'blue', 'light blue', 'cyan', 'teal', 'green', 'light green', 'lime', 'yellow', 'amber', 'orange', 'deep orange', 'brown'

Primary color which will be used for sections and pages.

color-secondary

Type: stringDefault: c.colorSecondaryCSS variable: --spx-container-color-secondaryChoices: 'red', 'pink', 'purple', 'deep purple', 'indigo', 'blue', 'light blue', 'cyan', 'teal', 'green', 'light green', 'lime', 'yellow', 'amber', 'orange', 'deep orange', 'brown'

Secondary color which will be used for sections and pages.

focus-color

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

Focus color.

font-family-primary

Type: stringDefault: c.fontFamilyPrimaryCSS variable: --spx-container-font-family-primary

Primary font-family.

font-family-secondary

Type: stringDefault: c.fontFamilySecondaryCSS 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.

max-width

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

Section max-width on mobile.

offset-header

Type: boolean

Offsets first section to the height of the header.

pre-title-background

Type: stringDefault: 'none'CSS variable: --spx-container-pre-title-background

Pre title background.

pre-title-border-radius

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

Pre title radius border.

pre-title-color

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

Pre title color.

pre-title-font-size-multiplier

Type: numberDefault: 1CSS variable: --spx-container-pre-title-font-size-multiplier

Pre title multiplier 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

Type: stringDefault: 'var(--spx-space-md)'CSS variable: --spx-container-pre-title-margin-bottom

Pre title margin-bottom.

pre-title-padding

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

Pre title padding.

pre-title-text-transform

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

Pre title text-transform.

space-x

Type: stringDefault: c.spaceXCSS variable: --spx-container-space-x

Space between content and outer edge of the viewport.

space-xsm

Type: stringDefault: c.spaceXSmCSS variable: --spx-container-space-xsm

Space between content and outer edge of the viewport.

space-y

Type: stringDefault: 'var(--spx-space-3xl)'CSS variable: --spx-container-space-y

Space between the sections.

spacing

Type: stringDefault: 'clamp(0.8em, 1vw, 1em)'CSS variable: --spx-container-spacing

Space base for space-scale.

tabs-margin-between

Type: stringDefault: 'var(--spx-space-sm)'CSS variable: --spx-container-tabs-margin-between

Margin between tab items.

tabs-margin-first

Type: stringDefault: 'var(--spx-space-md)'CSS variable: --spx-container-tabs-margin-first

Top margin for first tab item.

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

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

Text multiplier 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-margin-top

Type: stringDefault: 'var(--spx-space-sm)'CSS variable: --spx-container-text-margin-top

Text 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-multiplier

Type: numberDefault: 1CSS variable: --spx-container-title-font-size-multiplier

Title multiplier 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.

Button

<spx-section-button/>

Properties

href

Type: string

Link href.

reverse-color

Type: booleanCSS variable: --spx-section-button-reverse-color

Reverse text color.

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.

Card

<spx-section-card/>

Card component for sections.

Properties

box-shadow

Type: stringDefault: '0px 2px 10px 0px rgba(0, 0, 0, 0.1)'CSS variable: --spx-section-card-box-shadow

Component box-shadow property.

padding

Type: stringDefault: 'var(--spx-space-lg)'CSS variable: --spx-section-card-padding

Component padding property.

text-color

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

Text color.

text-font-size-multiplier

Type: numberDefault: 1CSS variable: --spx-section-card-text-font-size-multiplier

Text multiplier font-size.

text-font-weight

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

Text font-weight.

text-letter-spacing

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

Text letter-spacing.

text-line-height

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

Text line-height.

text-margin-top

Type: stringDefault: 'var(--spx-space-lg)'CSS variable: --spx-section-card-text-margin-top

Text margin-top.

text-max-width

Type: stringCSS variable: --spx-section-card-text-max-width

Text max-width.

text-transform

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

Component text-transform property.

title-color

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

Title color.

title-font-size-multiplier

Type: numberDefault: 1CSS variable: --spx-section-card-title-font-size-multiplier

Title multiplier font-size.

title-font-weight

Type: stringDefault: '500'CSS variable: --spx-section-card-title-font-weight

Title font-weight.

title-letter-spacing

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

Title letter-spacing.

title-line-height

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

Title line-height.

title-max-width

Type: stringCSS variable: --spx-section-card-title-max-width

Title max-width.

title-text-transform

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

Title text-transform.

Footer

<spx-section-footer/>

Footer component for sections.

Properties

column-size-max

Type: stringDefault: 'auto'CSS variable: --spx-section-footer-column-size-max

Maximum column size.

column-size-min

Type: stringDefault: '0'CSS variable: --spx-section-footer-column-size-min

Minimum column size.

display

Type: stringDefault: 'grid'CSS variable: --spx-section-footer-displayChoices: 'grid', 'flex'

Display.

gap

Type: stringDefault: 'var(--spx-space-lg)'CSS variable: --spx-section-footer-gap

Gap between columns.

image-max-height

Type: stringDefault: '40px'

space-before

Type: stringDefault: 'var(--spx-space-4xl)'CSS variable: --spx-section-footer-space-before

Space before the footer.

space-y

Type: stringDefault: 'var(--spx-space-3xl)'CSS variable: --spx-section-footer-space-y

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

text-max-width

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

Text max-width.

theme

Type: stringDefault: 'dark'Choices: 'dark', 'light'

Footer theme.

Header

<spx-section-header/>

The introductory element of every website.

Properties

backdrop-filter

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

Component backdrop-filter property.

background

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

Component background property.

background-scroll

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

Turns on background after scroll.

border-bottom

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

Component border-bottom property.

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.

position

Type: "fixed" | "static"

Component positioning.

space-x

Type: stringDefault: 'var(--spx-space-md)'CSS variable: --spx-section-header-space-x

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

z-index

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

Component z-index property.

Text Media

<spx-section-text-media/>

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

Properties

background

Type: stringCSS variable: --spx-section-text-media-background

Component background property.

column-size

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

Column size.

first

Type: boolean

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

gap

Type: stringDefault: 'var(--spx-space-2xl)'CSS variable: --spx-section-text-media-gap

Gap between columns.

hide-media

Type: boolean

Hides the media column.

images-gap

Type: stringDefault: 'var(--spx-space-md)'CSS variable: --spx-section-text-media-images-gap

Gap between images.

layout

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

Layout of the section.

media-background

Type: stringCSS variable: --spx-section-text-media-media-background

Background color for the media column.

media-background-overlap

Type: booleanCSS variable: --spx-section-text-media-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.

reverse

Type: boolean

Reverses the column order.

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-text-media-text-background

Background color for the text column.

text-background-overlap

Type: booleanCSS variable: --spx-section-text-media-text-background-overlap

Overlaps the background with the text column.

Docs

<spx-page-docs/>

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

Properties

bp-mobile

Type: numberDefault: 1024

content-heading-font-family

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

Content heading font-family.

navigation-background

Type: stringDefault: 'var(--spx-color-gray-050)'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-font-size-multiplier

Type: numberDefault: 1CSS variable: --spx-page-docs-navigation-font-size-multiplier

Navigation multiplier font-size.

navigation-gap

Type: stringDefault: 'var(--spx-space-2xs)'

navigation-heading-tag

Type: stringDefault: 'h1'

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-A700)'CSS variable: --spx-page-docs-navigation-link-color-active

Navigation link active color.

navigation-link-font-size-multiplier

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

Navigation link multiplier font-size.

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-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-text-transform

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

Navigation title text-transform.

offset-margin-top

Type: stringDefault: 'var(--spx-space-md)'CSS variable: --spx-page-docs-offset-margin-top

Offset margin-top.

space-bottom

Type: stringDefault: 'var(--spx-space-3xl)'CSS variable: --spx-page-docs-space-bottom

Space from the last content element to the end of the component.

space-x

Type: stringDefault: state.spaceXCSS variable: --spx-page-docs-space-x

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

space-y

Type: stringDefault: 'var(--spx-space-xl)'CSS variable: --spx-page-docs-space-y

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

unique-id

Type: boolean

Events

spxPageDocsDidLoad

Single

<spx-page-single/>

Render a single post layout.

Properties

author-color

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

Author color.

author-font-family

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

Author font-family.

author-font-size-multiplier

Type: numberDefault: 1CSS variable: --spx-page-single-author-font-size-multiplier

Author multiplier 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

Type: stringDefault: 'var(--spx-space-lg)'CSS variable: --spx-page-single-author-margin-top

Author margin-top.

author-text-transform

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

Author text-transform.

content-margin-top

Type: stringDefault: 'var(--spx-space-xl)'CSS variable: --spx-page-single-content-margin-top

Content margin-top.

content-max-width

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

Content max-width.

content-space-x

Type: stringDefault: 'var(--spx-container-space-x)'

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

Type: numberDefault: 1CSS variable: --spx-page-single-date-font-size-multiplier

Date multiplier 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

Type: stringDefault: 'var(--spx-space-sm)'CSS variable: --spx-page-single-date-margin-top

Date 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

Type: stringDefault: 'var(--spx-space-xl)'CSS variable: --spx-page-single-header-padding-bottom

Header bottom 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-space-x

Type: stringDefault: 'var(--spx-container-space-x-sm)'

image-space-y

Type: stringDefault: 'var(--spx-space-md)'

mobile

Type: numberDefault: '768'

Mobile breakpoint.

post

Type: string<?php spx\get::post() ?>

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

Type: numberDefault: 1CSS variable: --spx-page-single-title-font-size-multiplier

Title multiplier 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

Type: stringDefault: 'var(--spx-space-md)'CSS variable: --spx-page-single-title-margin-top

Title margin-top.

title-text-transform

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

Title text-transform.

Stay in the loop

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

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

Learn more about Mailchimp's privacy practices here.

Projects

A collection of web components
for WordPress developers.

A minimal and feature-packed
WordPress theme.

Quicklinks

Playground Changelog Privacy Login Reset password

Help

Documentation Product support

Guides

Oxygen Edit Button

Latest Post

2.0 is here! 2.0 is here!

© 2020 Fabrikat. All rights reserved.

hi@fabrikatdigital.com