Back

FX Shortcodes

FX Shortcodes — Examples

All blocks use the same shortcode: [element type="..."]. Most accept paired form with content; spacers and separators support self-closing form (/]).

Common attributes

These work on (almost) every block type:

Attribute Accepts Notes
class space-separated CSS classes merged onto the wrapper
id string sets id="..." on the wrapper
tag div section article aside header footer main nav figure wrapper element (where applicable)
width full wide or any CSS length full → alignfull, wide → alignwide
align left center right text alignment
vertical-align top center bottom flex/grid item alignment
background image URL sets background-image
background-color CSS color
text / color CSS color text color (text= is the WP-cover-style alias)
padding CSS length / shorthand e.g. 2rem or 1rem 2rem
margin CSS length / shorthand
gap CSS length flex/grid gap
border-radius / radius CSS length
shadow CSS box-shadow value e.g. 0 4px 20px rgba(0,0,0,.1)
min-height CSS length
max-width CSS length

Cover

Full-bleed hero with optional background image, color overlay, and parallax.

<h1>Welcome</h1>
<p>A short tagline goes here.</p>
Get started

Cover-specific attributes:

Attribute Notes
background background image URL
overlay overlay color (rendered above image)
overlay-opacity 0–1, default 0.5
parallax yes / no — fixes background-attachment
focal CSS background-position, e.g. 30% 70%
height / min-height becomes min-height of the cover

Group

Generic container. Use it for sections of content with a shared background, padding, or layout.

Plain

<h2>About us</h2>
<p>Long-form text here.</p>

Flex layout

One

Lorem ipsum.

Two

Dolor sit amet.

Three

Consectetur.

Grid layout (auto-fit)

A

…

B

…

C

…

D

…

Group-specific attributes:

Attribute Notes
layout default (block), flex, grid
justify start center end space-between space-around

Columns / Column

Equal columns by default; per-column span overrides flex-basis.

Two equal columns

<h3>Left</h3>
<p>Some text.</p>
<h3>Right</h3>
<p>Other text.</p>

Three columns, no stack on mobile

One
Two
Three

Asymmetric columns (1/3 + 2/3)

<p>Sidebar.</p>
<p>Main content area.</p>

Columns-specific attributes:

Attribute Notes
columns integer; default 2
stack yes / no — collapse to single column under 781px
span (on column) flex-basis, e.g. 33%, 400px

Details / Accordion

Native <details> element. accordion is an alias.

Closed by default

What's your refund policy?
<p>30 days, no questions asked.</p>

Open by default

Important notice
<p>This panel is expanded on page load.</p>

Stack of accordions

Question 1
Answer 1.
Question 2
Answer 2.
Question 3
Answer 3.

Wait — layout="flex" on a group makes children sit in a row. For a vertical accordion list, just use a default group with margin/padding:

Question 1
Answer 1.
Question 2
Answer 2.
Question 3
Answer 3.

Details-specific attributes:

Attribute Notes
summary the always-visible header text
open yes / no — initial state

Media & Text

Image on one side, text on the other. media-text and mediatext are aliases.

Media on the left (default)

A photo
<h2>Heading</h2>
<p>Body text alongside the image.</p>
Learn more

Media on the right, stacks on mobile

<h2>Right-side image</h2>
<p>Stacks vertically below 781px.</p>

Media-text-specific attributes:

Attribute Notes
media image URL
media-alt alt text
media-position left (default) or right
media-width CSS length, default 50%
stack yes / no — stack at narrow widths

Button

Renders an <a> when url is set, otherwise a <button type="button">.

Every button has a background color and a text color. On hover both states darken automatically using color-mix(in oklch, ...) — perceptually-uniform darkening that works on any color you pass in, no need to pre-compute a hover variant.

Solid (default)

Sign up

The default palette is #2271b1 background with white text. Hover darkens the background by 15% in OKLCH space.

Outline, large

Contact us

Outline buttons borrow the background-color attribute as their accent. On hover they fill in with the darkened accent and switch to the text color.

External link, opens in new tab (auto adds rel="noopener noreferrer")

Visit site

Custom colors — hover darkens automatically

Buy now

You don’t specify a hover color. The CSS computes it from the background-color value you pass: color-mix(in oklch, #222, black 15%).

Brand-accent button using a CSS color name

Launch

Button row inside a flex group

Primary
Secondary
Tertiary

All three variants share the same color logic — fill, outline, and text all darken on hover via color-mix.

Tweaking the hover strength

The hover darkening percentage is exposed as a CSS variable on .fx-button (--fx-button-darken, default 15%). To override globally, in your theme CSS:

.fx-button { --fx-button-darken: 25%; }   /* stronger hover darkening */

Or per-button by adding a class via the class attribute and targeting it.

Button-specific attributes:

Attribute Notes
url href; if omitted, renders a <button> instead of <a>
target _blank, _self, etc. — _blank auto-adds safe rel
rel overrides the auto-rel
style fill (default), outline, text
size small, default, large
background-color sets --fx-button-bg; hover is derived from this
color (or text) sets --fx-button-color

Browser support: color-mix() requires Chrome 111+, Safari 16.4+, Firefox 113+ (all shipped 2023). On older browsers the hover rule is ignored and the button stays in its base state — still functional, just not animated.

Card

Optional image, title, body content, and an optional whole-card link.

Simple

My Card

<p>Card body text.</p>

Whole card linked

Card grid

Card-specific attributes:

Attribute Notes
image image URL
image-alt alt text
title rendered as <h3>
url optional — wraps the card in a link
target, rel applied to the wrapping link

Spacer

Invisible vertical (or horizontal) gap. Self-closing form is recommended.

Vertical (default)

Horizontal (inline)

Some text. More text.

Inside a flex layout

<span>Left</span>

<span>Right</span>

Spacer-specific attributes:

Attribute Notes
direction vertical (default) or horizontal
height vertical mode size, default 2rem
width horizontal mode size, default 1rem

Separator / HR

Visible thematic break (<hr>) with style variants. separator and hr are interchangeable.

Default short rule

Wide (full-container) rule

Dotted

Dashed

Double line

Colored, custom width, left-aligned

Inside a card

Section

<p>Intro paragraph.</p>

<p>Continued content.</p>

Separator-specific attributes:

Attribute Notes
style default (short), wide, dots, dashed, double
color (or text) line color
width full, wide, or any CSS length (length sets the line width directly)
align left center (default) right

Nesting

Any [element] may contain any other [element]. The plugin parses innermost-out, so deep trees work without escaping.

<h1>Big idea</h1>
<p>Subtitle.</p>

Start
Learn more

Self-closing vs paired

Form Use for

anything with content (cover, group, columns, column, details, media-text, button, card)

content-less blocks (spacer, separator, hr)

The paired form also works for content-less blocks, but the self-closing form reads cleaner.