Editor Components

Reference for every visual component available in the portal editor — Cards, Alerts, Buttons, Images, Image Carousels, Headings and more.

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

Content

Property	Type	Default	Description
header	text	—	Optional card header text
title	text	”Card Title”	Main card title
subtitle	text	—	Subtitle below the title
bodyText	textarea	”Some quick example text…”	Body paragraph
footer	text	—	Optional card footer text
bodySlotItems	slot	—	Drop zone for additional components inside the card body
extraSlot	slot	—	Drop zone rendered after the body slot

Appearance

Property	Type	Default	Description
bg	select	None	Background colour: None, Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, White
textVariant	select	Default	Text colour: Default, White, Dark, Body, Muted
border	select	None	Border colour: None, Default, Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, White
align	select	Default	Text alignment: Default, Start, Center, End

Image

Property	Type	Default	Description
imageSrc	text	—	Image URL
imageAlt	text	—	Image alt text
imagePosition	select	None	Placement: None, Top, Bottom, Overlay
overlayTitle	text	—	Title displayed on overlay images
overlayText	textarea	—	Text displayed on overlay images

List

Property	Type	Default	Description
listGroupFlush	select	No	Flush list (no outer borders): No, Yes
listItems	textarea	—	One list item per line

Advanced

Property	Type	Default	Description
className	text	—	Additional CSS classes (Bootstrap utilities supported)

---

Alert

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

Properties

Content

Property	Type	Default	Description
heading	text	—	Alert heading
text	textarea	”Sample alert message”	Alert body text

Appearance

Property	Type	Default	Description
variant	select	primary	Colour variant: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark

Advanced

Property	Type	Default	Description
className	text	—	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

Content

Property	Type	Default	Description
text	text	”Click me”	Button label

Appearance

Property	Type	Default	Description
variant	select	primary	Colour: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark
outline	boolean	false	Use outline (border-only) style
size	select	—	Size modifier: default, Small (btn-sm), Large (btn-lg)
block	boolean	false	Full-width button

Link

Property	Type	Default	Description
href	text	—	URL to navigate to. If set, the button renders as an <a> tag.
target	select	—	Open in: same tab (default), new tab (_blank)

Spacing

Property	Type	Default	Description
marginTop	select	—	Top margin utility class
marginBottom	select	—	Bottom margin utility class

Advanced

Property	Type	Default	Description
className	text	—	Additional CSS classes

---

Image

Displays an image with Bootstrap responsive utilities.

Properties

Image

Property	Type	Default	Description
src	text	placeholder SVG	Image source URL
alt	text	—	Alt text for accessibility

Display

Property	Type	Default	Description
fluid	select	Yes	Responsive scaling (max-width: 100%): No, Yes
rounded	select	No	Rounded corners: No, Yes
roundedCircle	select	No	Circular crop: No, Yes
thumbnail	select	No	Thumbnail border: No, Yes

Size

Property	Type	Default	Description
width	text	—	Width in px or %
height	text	—	Height in px or %

Loading

Property	Type	Default	Description
loading	select	Auto	Loading strategy: Auto, Lazy, Eager

Advanced

Property	Type	Default	Description
className	text	—	Additional CSS classes

---

Image Carousel

A responsive image gallery where each thumbnail opens a full-screen lightbox (powered by GLightbox). Visitors can navigate through all images inside the lightbox without leaving the page.

Properties

Images

The Images field is a dynamic list. Use the + Add button to add images and the drag handle to reorder them.

Property	Type	Default	Description
src	text	—	Image URL. Use the Manage image files ↗ link below the field to upload images via the Nexudus dashboard.
alt	text	—	Alt text for accessibility and SEO
caption	text	—	Optional caption shown below the thumbnail (when captions are enabled) and inside the lightbox

Display

Property	Type	Default	Description
columns	select	3	Number of columns: 1, 2, 3, 4
imageHeight	text	200	Thumbnail height in pixels
gap	select	Medium	Gap between thumbnails: None, Small, Medium, Large
rounded	radio	Yes	Rounded corners on thumbnails: Yes, No
showCaptions	radio	No	Show caption text below each thumbnail: No, Yes

Advanced

Property	Type	Default	Description
className	text	—	Additional CSS classes applied to the outer grid wrapper

For a masonry-style layout, combine multiple Image Carousel components inside a Responsive Grid and set each carousel to 1 column with a different image height.

---

Heading

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

Properties

Content

Property	Type	Default	Description
text	text	”Sample Heading”	Heading text
level	select	h2	Semantic level: H1, H2, H3, H4, H5, H6
align	select	Start	Alignment: Start, Center, End
displaySize	select	None	Bootstrap display class: None, Display 1–6

Spacing

Standard margin and padding utilities.

Advanced

Property	Type	Default	Description
className	text	—	Additional CSS classes

---

Paragraph

A block of body text with alignment and emphasis options.

Properties

Content

Property	Type	Default	Description
text	textarea	”Sample paragraph text”	Paragraph content

Appearance

Property	Type	Default	Description
align	select	Default	Alignment: Default, Start, Center, End
lead	select	Normal	Lead paragraph (larger text): Normal, Lead
muted	select	Normal	Muted colour: Normal, Muted

Spacing

Standard margin and padding utilities.

Advanced

Property	Type	Default	Description
className	text	—	Additional CSS classes

---

Separator

A horizontal rule with configurable spacing.

Properties

Property	Type	Default	Description
size	select	4	Vertical margin: None, 1–9, Auto
showBorder	radio	Yes	Show a visible border line: No, Yes
className	text	—	Additional CSS classes

---

YouTube Video

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

Properties

Video

Property	Type	Default	Description
url	text	—	YouTube URL or Video ID (supports youtu.be, youtube.com/watch?v=, youtube.com/embed/ formats)
aspectRatio	select	16x9	Aspect ratio: 16x9, 4x3, 1x1, 9x16
maxWidth	text	100%	Maximum width (px or %)
align	select	start	Horizontal alignment: Start, Center, End

Playback

Property	Type	Default	Description
autoplay	boolean	false	Start playing automatically (forces mute)
mute	boolean	false	Mute audio
controls	boolean	true	Show player controls
loop	boolean	false	Loop video playback

Accessibility

Property	Type	Default	Description
title	text	—	Iframe title for screen readers

Advanced

Property	Type	Default	Description
className	text	—	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.