Skip to main content
When you select a component on the canvas, its configurable properties appear in the Properties bar on the right-hand side. Properties are organised into collapsible groups so you can find what you need quickly. This page documents the general-purpose editor components. For layout primitives (Container, Grid, Stack, etc.) see Layout Components. For advanced embedding (Iframe, Script, CustomerType) see Advanced Components.

​
Card

A Bootstrap-based card with rich content options including images, lists and nested slot areas.

​
Properties

PropertyTypeDefaultDescription
headertext—Optional card header text
titletext”Card Title”Main card title
subtitletext—Subtitle below the title
bodyTexttextarea”Some quick example text…”Body paragraph
footertext—Optional card footer text
bodySlotItemsslot—Drop zone for additional components inside the card body
extraSlotslot—Drop zone rendered after the body slot
PropertyTypeDefaultDescription
bgselectNoneBackground colour: None, Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, White
textVariantselectDefaultText colour: Default, White, Dark, Body, Muted
borderselectNoneBorder colour: None, Default, Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, White
alignselectDefaultText alignment: Default, Start, Center, End
PropertyTypeDefaultDescription
imageSrctext—Image URL
imageAlttext—Image alt text
imagePositionselectNonePlacement: None, Top, Bottom, Overlay
overlayTitletext—Title displayed on overlay images
overlayTexttextarea—Text displayed on overlay images
PropertyTypeDefaultDescription
listGroupFlushselectNoFlush list (no outer borders): No, Yes
listItemstextarea—One list item per line
PropertyTypeDefaultDescription
classNametext—Additional CSS classes (Bootstrap utilities supported)

​
Alert

A dismissible callout box for notices, warnings and informational messages.

​
Properties

PropertyTypeDefaultDescription
headingtext—Alert heading
texttextarea”Sample alert message”Alert body text
PropertyTypeDefaultDescription
variantselectprimaryColour variant: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark
PropertyTypeDefaultDescription
classNametext—Additional CSS classes
The Alert also has an items slot where you can drop additional components inside the alert body.

​
Button

A styled button (or link) with full control over appearance, sizing and navigation.

​
Properties

PropertyTypeDefaultDescription
texttext”Click me”Button label
PropertyTypeDefaultDescription
variantselectprimaryColour: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark
outlinebooleanfalseUse outline (border-only) style
sizeselect—Size modifier: default, Small (btn-sm), Large (btn-lg)
blockbooleanfalseFull-width button
PropertyTypeDefaultDescription
marginTopselect—Top margin utility class
marginBottomselect—Bottom margin utility class
PropertyTypeDefaultDescription
classNametext—Additional CSS classes

​
Image

Displays an image with Bootstrap responsive utilities.

​
Properties

PropertyTypeDefaultDescription
srctextplaceholder SVGImage source URL
alttext—Alt text for accessibility
PropertyTypeDefaultDescription
fluidselectYesResponsive scaling (max-width: 100%): No, Yes
roundedselectNoRounded corners: No, Yes
roundedCircleselectNoCircular crop: No, Yes
thumbnailselectNoThumbnail border: No, Yes
PropertyTypeDefaultDescription
widthtext—Width in px or %
heighttext—Height in px or %
PropertyTypeDefaultDescription
loadingselectAutoLoading strategy: Auto, Lazy, Eager
PropertyTypeDefaultDescription
classNametext—Additional CSS classes

​
Heading

A heading element (<h1> through <h6>) with optional display sizing.

​
Properties

PropertyTypeDefaultDescription
texttext”Sample Heading”Heading text
levelselecth2Semantic level: H1, H2, H3, H4, H5, H6
alignselectStartAlignment: Start, Center, End
displaySizeselectNoneBootstrap display class: None, Display 1–6
Standard margin and padding utilities.
PropertyTypeDefaultDescription
classNametext—Additional CSS classes

​
Paragraph

A block of body text with alignment and emphasis options.

​
Properties

PropertyTypeDefaultDescription
texttextarea”Sample paragraph text”Paragraph content
PropertyTypeDefaultDescription
alignselectDefaultAlignment: Default, Start, Center, End
leadselectNormalLead paragraph (larger text): Normal, Lead
mutedselectNormalMuted colour: Normal, Muted
Standard margin and padding utilities.
PropertyTypeDefaultDescription
classNametext—Additional CSS classes

​
Separator

A horizontal rule with configurable spacing.

​
Properties

PropertyTypeDefaultDescription
sizeselect4Vertical margin: None, 1–9, Auto
showBorderradioYesShow a visible border line: No, Yes
classNametext—Additional CSS classes

​
YouTube Video

Embeds a YouTube video with full control over playback and aspect ratio.

​
Properties

PropertyTypeDefaultDescription
urltext—YouTube URL or Video ID (supports youtu.be, youtube.com/watch?v=, youtube.com/embed/ formats)
aspectRatioselect16x9Aspect ratio: 16x9, 4x3, 1x1, 9x16
maxWidthtext100%Maximum width (px or %)
alignselectstartHorizontal alignment: Start, Center, End
PropertyTypeDefaultDescription
autoplaybooleanfalseStart playing automatically (forces mute)
mutebooleanfalseMute audio
controlsbooleantrueShow player controls
loopbooleanfalseLoop video playback
PropertyTypeDefaultDescription
titletext—Iframe title for screen readers
PropertyTypeDefaultDescription
classNametext—Additional CSS classes

​
Component properties bar

When you click on any component in the canvas, the Properties bar appears on the right side of the editor. It contains:
  1. Component name — displayed at the top.
  2. Collapsible groups — properties are organised into logical sections (Content, Appearance, Spacing, Advanced, etc.) that you can expand or collapse.
  3. Slot drop zones — some components have slot fields that appear as labelled drop zones where you can drag additional child components.
Every component that supports custom CSS classes exposes an Advanced group with a className field. This is where you can add Bootstrap utility classes.