> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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](/editor/layout-components). For advanced embedding (Iframe, Script, CustomerType) see [Advanced Components](/editor/advanced-components).
***
## Card
A Bootstrap-based card with rich content options including images, lists and nested slot areas.
### Properties
| 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 |
| 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 |
| 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 |
| Property | Type | Default | Description |
| ---------------- | -------- | ------- | -------------------------------------- |
| `listGroupFlush` | select | No | Flush list (no outer borders): No, Yes |
| `listItems` | textarea | — | One list item per line |
| Property | Type | Default | Description |
| ----------- | ---- | ------- | ------------------------------------------------------ |
| `className` | text | — | Additional CSS classes (Bootstrap utilities supported) |
***
## Alert
A dismissible callout box for notices, warnings and informational messages.
### Properties
| Property | Type | Default | Description |
| --------- | -------- | ---------------------- | --------------- |
| `heading` | text | — | Alert heading |
| `text` | textarea | "Sample alert message" | Alert body text |
| Property | Type | Default | Description |
| --------- | ------ | ------- | ------------------------------------------------------------------------------- |
| `variant` | select | primary | Colour variant: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark |
| 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
| Property | Type | Default | Description |
| -------- | ---- | ---------- | ------------ |
| `text` | text | "Click me" | Button label |
| 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 |
| Property | Type | Default | Description |
| -------- | ------ | ------- | --------------------------------------------------------------- |
| `href` | text | — | URL to navigate to. If set, the button renders as an `` tag. |
| `target` | select | — | Open in: same tab (default), new tab (`_blank`) |
| Property | Type | Default | Description |
| -------------- | ------ | ------- | --------------------------- |
| `marginTop` | select | — | Top margin utility class |
| `marginBottom` | select | — | Bottom margin utility class |
| Property | Type | Default | Description |
| ----------- | ---- | ------- | ---------------------- |
| `className` | text | — | Additional CSS classes |
***
## Image
Displays an image with Bootstrap responsive utilities.
### Properties
| Property | Type | Default | Description |
| -------- | ---- | --------------- | -------------------------- |
| `src` | text | placeholder SVG | Image source URL |
| `alt` | text | — | Alt text for accessibility |
| 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 |
| Property | Type | Default | Description |
| -------- | ---- | ------- | ----------------- |
| `width` | text | — | Width in px or % |
| `height` | text | — | Height in px or % |
| Property | Type | Default | Description |
| --------- | ------ | ------- | ----------------------------------- |
| `loading` | select | Auto | Loading strategy: Auto, Lazy, Eager |
| 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](https://biati-digital.github.io/glightbox/)). Visitors can navigate through all images inside the lightbox without leaving the page.
### Properties
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 |
| 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 |
| 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](/editor/layout-components#responsive-grid) and set each carousel to 1 column with a different image height.
***
## Heading
A heading element (`` through ``) with optional display sizing.
### Properties
| 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 |
Standard margin and padding utilities.
| Property | Type | Default | Description |
| ----------- | ---- | ------- | ---------------------- |
| `className` | text | — | Additional CSS classes |
***
## Paragraph
A block of body text with alignment and emphasis options.
### Properties
| Property | Type | Default | Description |
| -------- | -------- | ----------------------- | ----------------- |
| `text` | textarea | "Sample paragraph text" | Paragraph content |
| 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 |
Standard margin and padding utilities.
| 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
| 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 |
| 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 |
| Property | Type | Default | Description |
| -------- | ---- | ------- | ------------------------------- |
| `title` | text | — | Iframe title for screen readers |
| 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](/editor/bootstrap-classes).