Shortcodes

Custom elements

Docs

Default shortcodes

(date: …) Adds a dynamic date to the text
(email: …) Creates an email address link
(file: …) Creates a download link for any file
(gist: …) Embeds a GitHub Gist by URL
(image: …) Embeds an image
(link: …) Creates a link
(tel: …) Embeds a linked telephone number
(twitter: …) Creates a link to a Twitter profile
(video: …) Embeds a YouTube or Vimeo video by URL

Reference: https://getkirby.com/docs/reference/text/kirbytags/

Custom shortcodes

Variants

Variant keywords:

default, primary, secondary, tertiary, quaternary, complementary, muted
Variants are based on site colors. Set colors from site panel.

Alignment

Alignment classes:

align-left, align-center, align-right, align-fill, align-wide, align-full

Columns

(row: start)
  (column: start) Paragraph... (column: end)
  (column: end) Paragraph... (column: end)
(row: end)

Description: Columns
Value: start, end
Attributes: class, style
Note: Columns break under 250px

Section

(section: start class: <className>)
  Content...
(section: end)

Description: Generic section to attach classes
Value: start, end
Attributes: class, style

Buttons

(button: <variant> text: <text> link: <url>)

Description: Button link
Value: <variant>
Attributes: text, link, class, target, rel

Video

(video: <url>)

Description: Embeds a video by URL (supports youtube, vimeo, and local file)
Value: url, filename
Attributes: class, caption, controls, autoplay, loop, poster

Audio

(audio: <url>)

Description: Embeds an audio by URL (supports URL or local file)
Value: url, filename
Attributes: class, caption, controls, autoplay, loop

Slider

(slider: start)
  (image: filename.jpg)
  (image: filename.jpg)
  (image: filename.jpg)
(slider: end)

Description: Carousel slider
Value: start, end
Attributes: class, caption, ratio: x/y
Note: The best way to add metadata to images is using panel image editor

Gallery

(gallery: start)
  (image: filename.jpg)
  (image: filename.jpg)
  (image: filename.jpg)
(gallery: end)

Description: Grid gallery with lightbox
Value: start, end
Attributes: class, caption, ratio: x/y
Note: The best way to add metadata to images is using panel image editor

SVG

(svg: filename.svg)

Description: Inline SVG
Value: Path to SVG file
Attributes: class, style, width, height, fill, stroke

Spacer

(spacer: 1)

Description: Vertical spacer
Value: 1, 2, 3, 4, 5

Separator

(separator: default)

Description: Vertical separator
Value: default, <string>, <symbol>, <cssEntity>
Attributes: class

Highlight

(highlight: <text>)

Description: Highlight text
Value: Text

Span

(span: <text> class: <className>)

Description: Generic span to attach classes
Value: Text
Attributes: class

Docs

Options