FX Shortcodes — samples & attribute coverage

Types: cover, group / section, columns + column, details / accordion, media-text / mediatext, button, card, spacer, separator / hr, line / colored-line, sticky / note. Legacy [sticky] shortcode is listed at the end.

How it reads on the site: For every sample, the rendered layout appears first (real shortcodes). The textarea under it is copy-ready text with encoded brackets so it never runs as shortcode inside the field.

Table of contents

• Common attributes (all types)
• Cover
• Group / section
• Columns / column
• Details / accordion
• Media & text
• Button
• Card
• Spacer
• Separator / hr
• Line / colored-line
• Sticky / note
• Composite nesting
• Legacy [sticky] shortcode

Back to top

---

Common attributes

Usable on almost every [element type="…"] wrapper: class, id, tag (allowed: div, section, article, aside, header, footer, main, nav, figure), width (full → alignfull, wide → alignwide, or any CSS length), align (left | center | right), vertical-align (top | center | bottom), background (image URL), background-color, color or text (same effect), padding, margin, gap, border-radius or radius, shadow (box-shadow), min-height, height (often maps to min-height on cover), max-width.

Sample — common set on group

[element type=”group” id=”fx-demo-block” class=”fx-demo-wrap” tag=”article” width=”wide” align=”left” vertical-align=”top” background-color=”#f4f4f5″ text=”#1a1a1a” padding=”1.5rem” margin=”1rem 0″ gap=”1rem” border-radius=”10px” shadow=”0 2px 10px rgba(0,0,0,.08)” max-width=”700px”]</p> <p>Uses <code>id</code>, <code>class</code>, <code>tag</code>, <code>width</code>, <code>align</code>, <code>vertical-align</code>, colours, spacing, radius, shadow, <code>max-width</code>.</p> <p>[/element]

Sample — background image + focal on section

[element type=”section” background=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” focal=”30% 70%” padding=”4rem 1rem” background-color=”#1e293b” text=”#f8fafc” align=”center”]</p> <p>Group/section accept <code>background</code> + <code>focal</code> like cover.</p> <p>[/element]

TOC · Top

---

Cover

Specific: background, overlay, overlay-opacity (0–1, default 0.5), parallax (1 / 0), focal, height / min-height, plus common + width full/wide.

Full hero — image, overlay, focal, button

[element type=”cover” tag=”section” height=”85vh” width=”full” background=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” focal=”40% 60%” overlay=”#0f172a” overlay-opacity=”0.55″ text=”#f8fafc” align=”center” vertical-align=”center” padding=”2rem”]</p> <h1>Cover headline</h1> <p>Overlay + focal + nested button.</p> <p>[element type=”button” url=”/contact” style=”outline” color=”#ffffff”]Contact[/element]<br> [/element]

Parallax background

[element type=”cover” height=”50vh” width=”full” background=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” parallax=”1″ overlay=”#000″ overlay-opacity=”0.4″ text=”#fff” vertical-align=”bottom” padding=”1.5rem”]</p> <p>Parallax uses <code>parallax="1"</code>.</p> <p>[/element]

Colour-only cover (no image)

[element type=”cover” min-height=”200px” background-color=”#2563eb” text=”#ffffff” align=”center” vertical-align=”center”]</p> <h2>No background image</h2> <p>[/element]

Wide alignment (not full bleed)

[element type=”cover” height=”40vh” width=”wide” background=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” overlay=”#111″ overlay-opacity=”0.35″ text=”#eee” align=”center” vertical-align=”center”]</p> <p><code>width="wide"</code> → theme alignwide.</p> <p>[/element]

TOC · Top

---

Group / section

Specific: layout — omit / default (block), flex, grid. With flex: justify — start, center, end, space-between, space-around. Plus all common attributes.

Block group (default layout)

[element type=”group” padding=”2rem” background-color=”#fafafa”]</p> <h2>Default layout</h2> <p>Stacked block content.</p> <p>[/element]

Flex — justify="space-between", vertical-align="center"

[element type=”group” layout=”flex” justify=”space-between” vertical-align=”center” gap=”1.5rem” padding=”1.25rem” background-color=”#eef2ff”]</p> <div><strong>Left</strong><br>Flex row</div> <p>[element type=”button” url=”/action”]Action[/element]<br> [/element]

Flex — justify="space-around"

[element type=”group” layout=”flex” justify=”space-around” gap=”1rem” padding=”1rem”]<br> <span>A</span><span>B</span><span>C</span><br> [/element]

Flex — justify="end"

[element type=”group” layout=”flex” justify=”end” gap=”0.75rem” padding=”1rem”]<br> [element type=”button” url=”/one”]One[/element]<br> [element type=”button” url=”/two” style=”outline”]Two[/element]<br> [/element]

Grid layout

[element type=”group” layout=”grid” gap=”1rem” padding=”1.5rem”]<br> [element type=”card” title=”North”]Cell A[/element]<br> [element type=”card” title=”East”]Cell B[/element]<br> [element type=”card” title=”South”]Cell C[/element]<br> [element type=”card” title=”West”]Cell D[/element]<br> [/element]

TOC · Top

---

Columns / column

On columns: columns (count), stack (1 collapse on narrow / 0 keep row), gap, width, vertical-align, common styles.

On column: span (flex-basis e.g. 33%, 320px), vertical-align, common styles.

Two equal columns

[element type=”columns” columns=”2″ gap=”2rem” width=”wide” vertical-align=”top”]<br> [element type=”column”]</p> <h3>Left</h3> <p>Column one.</p> <p>[/element]<br> [element type=”column”]</p> <h3>Right</h3> <p>Column two.</p> <p>[/element]<br> [/element]

Four columns, stack="0" (stay side‑by‑side on small screens)

[element type=”columns” columns=”4″ gap=”1rem” stack=”0″]<br> [element type=”column”]I[/element]<br> [element type=”column”]II[/element]<br> [element type=”column”]III[/element]<br> [element type=”column”]IV[/element]<br> [/element]

Asymmetric — span on columns

[element type=”columns” columns=”2″ gap=”2rem”]<br> [element type=”column” span=”35%”]</p> <p>Narrow sidebar (<code>span="35%"</code>).</p> <p>[/element]<br> [element type=”column” span=”65%”]</p> <p>Main column (<code>span="65%"</code>).</p> <p>[/element]<br> [/element]

TOC · Top

---

Details / accordion

Specific: summary (label), open (1 expanded / 0 collapsed). Types details and accordion are the same renderer.

Closed + open variants

[element type=”details” summary=”Closed panel (default open=0)”]</p> <p>Hidden until opened.</p> <p>[/element]</p> <p>[element type=”accordion” summary=”Open on load” open=”1″]</p> <p><code>open="1"</code> — expanded initially.</p> <p>[/element]

Stack with width + styling

[element type=”group” padding=”1rem” gap=”0.5rem” background-color=”#f8fafc”]<br> [element type=”details” summary=”First question” width=”wide”]Answer one.[/element]<br> [element type=”details” summary=”Second question”]Answer two.[/element]<br> [/element]

TOC · Top

---

Media & text

Specific: media, media-alt, media-position (left | right), media-width (CSS; empty or 50% → equal 1fr/1fr), stack (1/0), crop (1 = object-fit cover height). Aliases: mediatext.

Default (equal columns), image left

[element type=”media-text” media=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” media-alt=”Demo” gap=”2rem” vertical-align=”center”]</p> <h2>Beside image</h2> <p>Equal columns when <code>media-width</code> omitted.</p> <p>[/element]

media-position="right", media-width="40%"

[element type=”media-text” media=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” media-position=”right” media-width=”40%” stack=”1″ gap=”1.5rem”]</p> <h2>Image on the right</h2> <p>Narrower media track.</p> <p>[/element]

crop="1" — fill text column height

[element type=”media-text” media=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” crop=”1″ stack=”1″ padding=”1.5rem 0″ gap=”2rem”]</p> <h2>Cropped image</h2> <p>Image column matches text height (<code>object-fit: cover</code>).</p> <p>[/element]

Alias mediatext

[element type=”mediatext” media=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” media-alt=”Wide”]</p> <p>Same as <code>media-text</code>.</p> <p>[/element]

TOC · Top

---

Button

Specific: url (absent → <button type="button">), target, rel (empty + target="_blank" → noopener noreferrer), style — fill | outline | text, size — small | (default) | large, background-color, color or text, border-radius / radius, padding. Global: class, id.

Styles + sizes

[element type=”group” layout=”flex” justify=”center” gap=”0.75rem”]<br> [element type=”button” url=”/a” style=”fill” size=”small”]Small fill[/element]<br> [element type=”button” url=”/b” style=”outline”]Outline[/element]<br> [element type=”button” url=”/c” style=”text” size=”large”]Large text[/element]<br> [/element]

External link — auto rel for target="_blank"

[element type=”button” url=”https://example.com” target=”_blank”]Opens new tab[/element]

Custom rel override

[element type=”button” url=”https://example.com” target=”_blank” rel=”nofollow noopener noreferrer”]Custom rel[/element]

Real <button> (no url)

[element type=”button”]Button element[/element]

Colours, radius alias, padding

[element type=”button” url=”/cta” background-color=”#14532d” text=”#ecfccb” radius=”999px” padding=”0.75rem 1.75rem”]Promo[/element]

color vs text (equivalent)

[element type=”button” url=”/go” background-color=”#0ea5e9″ color=”#0f172a”]Uses color=[/element]<br> [element type=”button” url=”/go2″ background-color=”#9333ea” text=”#fdf4ff”]Uses text=[/element]

TOC · Top

---

Card

Specific: image, image-alt, title (<h3>), url (wraps entire card in a link), target, rel. Plus common + tag (default article).

Image + title + body

[element type=”card” image=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” image-alt=”Featured” title=”Card title”]</p> <p>Body markup inside the card.</p> <p>[/element]

Whole-card link

[element type=”card” image=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” title=”Linked card” url=”/article/example” target=”_blank”]</p> <p>Click anywhere — one anchor wraps the card.</p> <p>[/element]

No image — tag="figure", width, styling

[element type=”card” tag=”figure” title=”Quote card only” padding=”1.25rem” background-color=”#fffbeb” border-radius=”8px”]</p> <p>Text-only card with custom wrapper tag.</p> <p>[/element]

Three-up cards in columns

[element type=”columns” columns=”3″ gap=”1.25rem”]<br> [element type=”column”]<br> [element type=”card” image=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” title=”Alpha” url=”/alpha”]Summary.[/element]<br> [/element]<br> [element type=”column”]<br> [element type=”card” image=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” title=”Beta” url=”/beta”]Summary.[/element]<br> [/element]<br> [element type=”column”]<br> [element type=”card” image=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” title=”Gamma” url=”/gamma”]Summary.[/element]<br> [/element]<br> [/element]

TOC · Top

---

Spacer (void)

Specific: direction — vertical (default) | horizontal. Vertical: height (default 2rem). Horizontal: width (default 1rem).

Vertical gap

[element type=”spacer” height=”3rem” /]

Horizontal inline gap

Before [element type=”spacer” direction=”horizontal” width=”1.5rem” /] after

Horizontal spacer inside flex row

[element type=”group” layout=”flex” vertical-align=”center”]<br> <span>Left</span><br> [element type=”spacer” direction=”horizontal” width=”auto” /]<br> <span>Right</span><br> [/element]

TOC · Top

---

Separator / hr (void)

Specific: style — default | wide | dots | dashed | double. color or text. width — full, wide, or CSS length. align — left | center | right. margin, max-width. Alias: hr.

Variants

[element type=”separator” /]<br> [element type=”separator” style=”wide” /]<br> [element type=”hr” style=”dots” /]<br> [element type=”separator” style=”dashed” /]<br> [element type=”separator” style=”double” /]

Width keywords + numeric + align + colour + margin

[element type=”separator” width=”full” color=”#94a3b8″ /]<br> [element type=”separator” style=”dots” width=”180px” align=”left” text=”#be123c” margin=”2rem 0″ /]

TOC · Top

---

Line / colored-line (void)

Specific: style — striped | dotted | shade. height, width, padding (outer, default 32px 0), background-color inner bar, color/text (currentColor for striped/dotted), align left | center | right. Alias: colored-line.

Striped, dotted, shade

[element type=”line” style=”striped” height=”8px” width=”240px” color=”#64748b” align=”center” padding=”24px 0″ /]<br> [element type=”line” style=”dotted” height=”6px” width=”100%” color=”#334155″ /]<br> [element type=”line” style=”shade” height=”2px” width=”55%” align=”center” /]

Solid bar via background-color

[element type=”line” style=”striped” background-color=”#111827″ color=”#111827″ height=”5px” width=”160px” /]

Alias + left align

[element type=”colored-line” align=”left” height=”6px” width=”200px” color=”#c2410c” padding=”48px 0″ /]

TOC · Top

---

Sticky / note

Specific: rotate, aspect-ratio, shadow — 1 for default sticky shadow or any CSS box-shadow string. Plus common styles; width full/wide applies. Alias: note.

Default-style sticky

[element type=”sticky” background-color=”#fff9db” color=”#343a40″ padding=”1.25rem” rotate=”-2deg” shadow=”1″ aspect-ratio=”1/1″]</p> <p>Square-ish post-it with preset shadow flag.</p> <p>[/element]

Custom shadow string + alias note

[element type=”note” background-color=”#e0f2fe” rotate=”2deg” border-radius=”10px” shadow=”0 8px 24px rgba(15,23,42,.14)” padding=”1rem”]</p> <p>Custom <code>box-shadow</code> value.</p> <p>[/element]

Wide sticky with width

[element type=”sticky” width=”wide” aspect-ratio=”16/9″ background-color=”#fef3c7″ padding=”1.5rem”]</p> <p>Wider alignment class on wrapper.</p> <p>[/element]

TOC · Top

---

Composite nesting

Demonstrates nested [element] parsing (innermost-first).

[element type=”cover” height=”75vh” width=”full” background=”https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” overlay=”#020617″ overlay-opacity=”0.55″ text=”#f8fafc” align=”center” vertical-align=”center”]<br> [element type=”group” max-width=”880px” gap=”1rem”]</p> <h1>Nested layout</h1> <p>[element type=”columns” columns=”2″ gap=”1.25rem”]<br> [element type=”column”]<br> [element type=”button” url=”/start” style=”fill” size=”large”]Start[/element]<br> [/element]<br> [element type=”column”]<br> [element type=”button” url=”/learn” style=”outline” size=”large”]Learn[/element]<br> [/element]<br> [/element]<br> [element type=”spacer” height=”1.25rem” /]<br> [element type=”separator” style=”dots” color=”#cbd5e1″ /]<br> [/element]<br> [/element]

TOC · Top

---

Legacy [sticky] shortcode

Registered separately (FX Builder migrations). Alias attributes: bg-color → background-color, text-color → color, etc.

[sticky bg-color=”#fef3c7″ text-color=”#422006″]Legacy attribute names.[/sticky]