---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/reference/element-reference'
title: 'Element reference | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Every element with its parameters, defaults and allowed values'
tags:
  - 'Elements and CSS'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Element reference'
      description: 'Every element with its parameters, defaults and allowed values'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/reference/element-reference'
      articleSection: 'Elements and CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/reference/element-reference'
      description: 'Every element with its parameters, defaults and allowed values'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Reference](/hc/documentation/learn-dxpr-builder/reference) /[Elements and CSS](/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Element reference.

Every element with its parameters, defaults and allowed values

 Learn DXPR BuilderReferenceElements and CSS

   ## In this guide

DXPR Builder provides 22 content elements and 6 layout elements. This page lists each element's machine name and the fields in its settings modal; the layout part also lists the Column inside each row. Drupal blocks and views, which the builder also offers as elements, are not covered.

## How to read this page

Each element's first table lists the fields in its **General** accordion. A field in another accordion sits in a separate table named after that accordion. Label is the field label as the modal shows it, in the interface's US spelling. Parameter is the `param_name` in the element definition. Options read `value` (Label).

Two General fields appear on every element and are not repeated in the tables:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| HTML ID | `hash` | text | empty; the field shows the generated ID as a placeholder | A letter first, then letters, numbers, hyphens and underscores | Custom ID for the element. |
| HTML classes | `el_class` | multi-select | empty; new sections get `py-5` | Bootstrap 5 utility classes and the classes that enabled themes declare; **Edit as text** accepts any class | Extra CSS classes for the element. |

Every element also has the **Style** and **Hover style**accordions, documented on the [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) page. All elements except Column and the panels inside Tabs, Collapse panel and Carousel also have the **Animation** accordion, documented on the [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab)page.

The Control column names what the modal shows. Each control comes from a parameter `type` in the element definition:

| Control | Code `type` |
|---|---|
| text | `textfield` |
| number | `numericfield` |
| link | `link` |
| radio | `dropdown` with fewer than 7 options |
| select | `dropdown` with 7 or more options |
| toggle | `checkbox` with one option |
| checkboxes | `checkbox` with several options |
| slider | `dxb_slider` |
| colour | `colorpicker` |
| icon, image, images, video, datetime | The `type` of the same name |
| ckeditor | `textarea` |
| ace | `html` |
| social | `social_links` |

A toggle that is on stores the value in its Allowed values cell; a toggle that is off stores `no` or an empty value. Checkboxes store the ticked values as a comma-separated list. An option listed as empty is stored as an empty string; in the modal its radio button has the key `dxpr-default`.

Image and images fields also offer an image style select: the site's `optimize` style first when it exists, then **Original image (No resizing)** and the other image styles. Some fields stay hidden until another field has a matching value; the Description column names that dependency.

## Content elements

### [Text](/hc/documentation/learn-dxpr-builder/elements/text)

Rich text edited in CKEditor. Machine name: `az_text`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder heading and paragraph | HTML | The text content. |

### [Image](/hc/documentation/learn-dxpr-builder/elements/image)

A single image, optionally wrapped in a link. Machine name: `az_image`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Image | `image` | image | empty | Image from the media browser | The image to show. |
| Image width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | A bare number counts as pixels. |
| Image height | `height` | text | empty | CSS length, for example `100px` | A bare number counts as pixels. |
| Image link | `link` | link | empty | URL or internal path | Wraps the image in a link. |
| Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Where the link opens. Shown when `link` is set. |

Fields in the **SEO** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Alt text of the image. |
| Title attribute | `title` | text | empty | Any text | Title attribute of the image. |

### [Image carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel)

A Bootstrap slideshow of several images. Machine name: `az_images_carousel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | empty | Images from the media browser | One slide per image. |
| Interval | `interval` | slider | 5000 | 0 to 10000, step 1 | Time between slides in milliseconds. At 0 the slides do not advance on their own. |
| Hide | `hide` | checkboxes | none ticked | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | Hides the indicators, the arrows or both. |

Fields in the **SEO** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Alt text of the images. |
| Title attribute | `title` | text | empty | Any text | Title attribute of the images. |

### [Video](/hc/documentation/learn-dxpr-builder/elements/video)

Embeds a YouTube or Vimeo video. Machine name: `az_video`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video link | `link` | text | empty | YouTube or Vimeo URL | The video to embed. |
| Video width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | A bare number counts as pixels. |
| Image | `image` | image | empty | Image from the media browser | Cover image; the player loads when the visitor clicks it. |
| Themed play button | `play` | toggle | off | `yes` when on | Shows the themed play button over the video. |

### [Local video](/hc/documentation/learn-dxpr-builder/elements/video-local)

Plays a self-hosted video file in an HTML5 player. Machine name: `az_video_local`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video | `video` | video | empty | MP4, WEBM, OGG or OGV file, up to the site's upload size limit | The video file. |
| Start playing automatically | `autoplay` | toggle | off | `autoplay` when on | Starts playback on page load. Autoplay always mutes the video. |
| Muted | `muted` | toggle | off | `muted` when on | Mutes the video. Shown while `autoplay` is off. |
| Controls | `controls` | toggle | off | `controls` when on | Shows the player controls. |
| Loop | `loop` | toggle | off | `loop` when on | Restarts the video when it ends. |
| Video width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Player width. |
| Image | `image` | image | empty | Image from the media browser | Poster image shown before playback. |

### [HTML](/hc/documentation/learn-dxpr-builder/elements/html)

Raw HTML edited in a code editor. Machine name: `az_html`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Raw HTML | `content` | ace | Placeholder message "Click the edit button to change this HTML" | HTML | The HTML content. |

### [Jumbotron](/hc/documentation/learn-dxpr-builder/elements/jumbotron)

Large banner with a title and lead text; other elements can be dropped inside it. Machine name: `az_jumbotron`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | Banner title. |
| Lead | `lead` | text | empty | Any text | Subtitle text shown below the title. |
| Type | `type` | select | `bg-light` (Light) | `bg-light` (Light), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `none` (Default) | Background and text colour classes. |
| Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | Padding size. |

### [Button](/hc/documentation/learn-dxpr-builder/elements/button)

A Bootstrap button that links to a URL. Machine name: `az_button`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | Click to add text | Any text | Text on the button. |
| Link | `link` | link | empty | URL or internal path | Button link. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Where the link opens. Shown when `link` is set. |
| Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; each label is the value with a capital letter | Bootstrap button style. |
| Block button | `block` | toggle | off | `btn-block` when on | Full-width button. |
| Outline style | `outlined` | toggle | off | `outline` when on | Renders `btn-outline-*` instead of `btn-*`. |
| Size | `size` | radio | empty (Normal) | empty (Normal), `btn-lg` (Large), `btn-sm` (Small) | Button size. |

### [Link element](/hc/documentation/learn-dxpr-builder/elements/link)

Container that wraps the elements inside it in one link. Machine name: `az_link`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Link | `link` | link | empty | URL or internal path | Content link. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Where the link opens. Shown when `link` is set. |

Fields in the **SEO** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title attribute | `title` | text | empty | Any text | Title attribute of the link. |
| Tell search engines not to follow | `nofollow` | toggle | off | `nofollow` when on | Adds `rel="nofollow"` to the link. |

### [Alert](/hc/documentation/learn-dxpr-builder/elements/alert)

A Bootstrap alert message. Machine name: `az_alert`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Message | `content` | ckeditor | Placeholder text | HTML | The message. |
| Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | Alert colour. |

### [Card](/hc/documentation/learn-dxpr-builder/elements/card)

A Bootstrap card container with an optional header and title. Machine name: `az_card`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Header | `header` | text | empty | Any text | Card header text. |
| Title | `title` | text | empty | Any text | Card title. |
| Type | `type` | select | empty (Default) | empty (Default), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `bg-light` (Light) | Card colour classes. |

### [Panel](/hc/documentation/learn-dxpr-builder/elements/panel)

A panel container with a title bar. Machine name: `az_panel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | Panel title. |
| Type | `type` | select | `panel-dxpr` (DXPR) | `panel-dxpr` (DXPR), `panel-default` (Default), `panel-primary` (Primary), `panel-success` (Success), `panel-info` (Info), `panel-warning` (Warning), `panel-danger` (Danger) | Panel style. |

### [Block quote](/hc/documentation/learn-dxpr-builder/elements/blockquote)

A quotation with an optional citation. Machine name: `az_blockquote`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder text | HTML | The quoted text. |
| Cite | `cite` | text | empty | Any text | Citation shown below the quote. |
| Reverse | `reverse` | toggle | off | `blockquote-reverse` when on | Aligns the quote to the end of the line (`text-end`). |

### [Social links](/hc/documentation/learn-dxpr-builder/elements/social-links)

A row or column of social network icons that link to profile pages. Machine name: `st_social`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Social links | `st_social_links` | social | Facebook and YouTube rows | One row per icon: a brand and the profile URL | The icons and their links. |
| Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | Icon layout. |
| Style | `st_style` | radio | empty (None) | empty (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | Icon background shape. |
| Size | `st_size` | radio | `lg` (Large) | `lg` (Large), empty (Small), `2x`, `3x`, `4x`, `5x`; the last four labels match their values | Icon size. |
| CSS3 hover effects | `st_css3_hover_effects` | radio | empty (None) | empty (None), `disc` (Disc), `pulse` (Pulse) | Hover effect. An effect makes the icon circle-style. |

Fields in the **Icon colors** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Source of the icon colour. |
| Color | `st_color` | colour | none | Any colour | Custom icon colour. Shown when `st_theme_color` is `custom`. |
| Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Source of the icon background colour. |
| Background color | `st_bgcolor` | colour | none | Any colour | Custom background colour. Shown when `st_theme_bgcolor` is `custom`. |

### [Number counter](/hc/documentation/learn-dxpr-builder/elements/number-counter)

A number that counts from a start value to an end value. Machine name: `az_counter`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Start | `start` | number | 0 | Number | Number to start counting from. |
| End | `end` | number | 100 | Number | Number to count up to. |
| Font size | `fontsize` | slider | 30 | 0 to 200, step 1 | Font size of the number in pixels. |
| Speed | `speed` | slider | 2000 | 0 to 10000, step 1 | Time in milliseconds for the count to finish. |
| Thousands separator | `seperator` | radio | empty (None) | empty (None), `,` (Comma), `.` (Dot), a space (Space) | Separates thousands in the end number. The code spells the parameter this way. |
| Prefix | `prefix` | text | empty | Any text | Characters before the number, for example `$`. |
| Suffix | `postfix` | text | empty | Any text | Characters after the number, for example `%`. |

### [Circle counter](/hc/documentation/learn-dxpr-builder/elements/circle-counter)

Circular progress indicator with optional text, an info line and an icon in the centre. Machine name: `az_circle_counter`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Foreground color | `fgcolor` | colour | `#333333` | Any colour | Colour of the progress arc. |
| Background color | `bgcolor` | colour | `#999999` | Any colour | Colour of the track behind the arc. |
| Fill color | `fill` | colour | none | Any colour | Fill colour inside the circle. |
| Percent | `percent` | slider | 50 | 0 to 100, step 1 | Progress value. |
| Dimension | `dimension` | slider | 250 | 100 to 500, step 1 | Circle diameter in pixels. |
| Foreground width | `width` | slider | 10 | 1 to 100, step 1 | Stroke width of the arc. |
| Animation | `animation` | toggle | on | `yes` when on | Animates the arc. |
| Animation duration | `duration` | slider | 1500 | 0 to 5000, step 1 | In milliseconds. Shown when `animation` is on. |
| Animation delay | `delay` | slider | 0 | 0 to 5000, step 1 | In milliseconds. Shown when `animation` is on. |
| Animation in-viewport | `in_viewport` | toggle | on | `yes` when on | Starts the animation when the element scrolls into view. Shown when `animation` is on. |

Fields in the **Circle content** accordion. Every field after **Show progress** is shown only while it is off:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Show progress | `show_progress` | toggle | off | `yes` when on | Shows the percentage instead of your own text and icon. |
| Text | `text` | text | empty | Any text | Centre text. |
| Font size | `fontsize` | slider | 16 | 0 to 100, step 1 | Centre text size in pixels. |
| Text color | `text_color` | colour | none | Any colour | Centre text colour. |
| Info | `info` | text | empty | Any text | Secondary info line. |
| Info font size | `info_fontsize` | slider | 14 | 0 to 100, step 1 | Info line size in pixels. |
| Info color | `info_color` | colour | none | Any colour | Info line colour. |
| Icon | `icon` | icon | empty | Icon from the sets your builder profile allows | Centre icon. |
| Icon size | `icon_size` | slider | 16 | 0 to 100, step 1 | Icon font size in pixels. |
| Icon color | `icon_color` | colour | none | Any colour | Icon colour. |

### [Progress bar](/hc/documentation/learn-dxpr-builder/elements/progress-bar)

Horizontal Bootstrap progress bar with a label. Machine name: `az_progress_bar`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Label | `label` | text | Click to add text | Any text | Text inside the bar. |
| Progress | `width` | slider | 50 | 0 to 100, step 1 | Progress as a percentage. |
| Bar height | `height` | slider | 45 | 0 to 100, step 1 | Bar height in pixels. |
| Back color | `bgcolor` | colour | `#e9ecef` | Any colour | Track colour behind the bar. |
| Front color | `fcolor` | colour | `#284ed9` | Any colour | Bar colour. |
| Grow animation | `grow_animation` | toggle | off | `yes` when on | Animates the bar from 0 to its value. |
| Stripes | `options` | checkboxes | none ticked | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | Striped pattern and moving stripes. |

### [Countdown timer](/hc/documentation/learn-dxpr-builder/elements/countdown-timer)

Counts down to a date, a time of day or the end of a repeating interval. Machine name: `az_countdown`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain), `style1` (Grid), `style6` (3D flip), `style9` (Disc), `style10` (Airport style), `style12` (Transparent) | Visual style. |
| Date / Time Limitations | `counter_scope` | radio | `date` (Specify date only) | `date` (Specify date only), `date_time` (Specify date and time), `repeating` (Specify time only (repeating every day)), `resetting` (Resetting counter (set interval up to 24 hours)) | What the timer counts down to. |
| Date | `date` | datetime | empty | Date in `d.m.Y` format | Target date. Shown when `counter_scope` is `date`. |
| Date / Time | `date_time` | datetime | empty | Date in `d.m.Y` format plus hour (`H`) | Target date and hour. Shown when `counter_scope` is `date_time`. |
| Time | `time` | datetime | empty | Hour (`H`) | Target hour of each day. Shown when `counter_scope` is `repeating`. |
| Reset in hours | `reset_hours` | slider | 0 | 0 to 24, step 1 | Hours in the interval. Shown when `counter_scope` is `resetting`. |
| Reset in minutes | `reset_minutes` | slider | 0 | 0 to 60, step 1 | Minutes in the interval. Shown when `counter_scope` is `resetting`. |
| Reset in seconds | `reset_seconds` | slider | 0 | 0 to 60, step 1 | Seconds in the interval. Shown when `counter_scope` is `resetting`. |
| Page referrer | `referrer` | link | empty | URL or internal path | Page opened when the countdown expires. Shown when `counter_scope` is `repeating` or `resetting`. |
| Automatic restart | `restart` | toggle | off | `yes` when on | Starts the interval again when it ends. Shown when `counter_scope` is `resetting`. |
| Display options | `display` | checkboxes | all five ticked | `years` (Show remaining years), `days` (Show remaining days), `hours` (Show remaining hours), `minutes` (Show remaining minutes), `seconds` (Show remaining seconds) | Units to show. |

### [Marquee](/hc/documentation/learn-dxpr-builder/elements/marquee)

Horizontal strip of images that scrolls without stopping. Machine name: `az_marquee`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | Three copies of the DXPR logo | Images from the media browser | The images in the strip. |
| Speed | `speed` | slider | 3 | 1 to 5, step 1 | Scroll speed; 1 is slowest, 5 is fastest. |
| Height | `height` | slider | 50 | 10 to 200, step 1 | Image height in pixels. |
| Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | Whether images share a height or a width. |
| Image width | `width` | slider | 400 | 50 to 500, step 1 | Image width in pixels. Shown when `image_layout` is `fw`. |
| Gray scale | `grayscale` | toggle | off | `apply` when on | Shows the images in greyscale. |
| Fade edges | `fade_edges` | toggle | off | `apply` when on | Fades the strip at both edges. |

Fields in the **SEO** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Alt text of the images. |
| Title attribute | `title` | text | empty | Any text | Title attribute of the images. |

### [Map](/hc/documentation/learn-dxpr-builder/elements/map)

Embedded Google Map for an address. Machine name: `az_map`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Address | `address` | text | empty | Street address | Location to show. |
| Map width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | A bare number counts as pixels. |
| Map height | `height` | text | `400px` | CSS length, for example `100px` | A bare number counts as pixels. |

### [Icon](/hc/documentation/learn-dxpr-builder/elements/icon)

Single icon, optionally linked. Machine name: `az_icon`. The module ships 14 icon sets. Themes and modules can add more, and a builder profile can limit which sets its users see.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Icon | `icon` | icon | `bi bi-heart` | Icon from the sets your builder profile allows | The icon. |
| Size | `size` | radio | `fa-lg` (Large) | `normal` (Normal), `fa-lg` (Large), `fa-2x` (Extra Large (2x)), `fa-3x` (Very Large (3x)), `fa-4x` (Huge (4x)), `fa-5x` (Gigantic (5x)) | Icon size. |
| Link | `link` | link | empty | URL or internal path | Icon link. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Where the link opens. Shown when `link` is set. |

Fields in the **Icon utilities** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Style | `st_style` | radio | empty (None) | empty (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | Background shape. |
| Icon animation | `animation` | radio | empty (No) | empty (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | Icon animation. |
| Icon orientation | `orientation` | radio | empty (Normal) | empty (Normal), `fa-rotate-90` (Rotate 90), `fa-rotate-180` (Rotate 180), `fa-rotate-270` (Rotate 270), `fa-flip-horizontal` (Flip horizontal), `fa-flip-vertical` (Flip vertical) | Rotation or flip. |

### [Divider](/hc/documentation/learn-dxpr-builder/elements/divider)

Horizontal rule. Machine name: `az_separator`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `bgcolor` | colour | none | Any colour | Line colour. |
| Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | Whether to override the theme thickness. |
| Thickness | `custom_thickness` | slider | 3 | 0 to 20, step 1 | Line thickness in pixels. Shown when `thickness` is `custom`. |
| Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | Whether to override the theme length. |
| Width | `custom_width` | slider | 100 | 0 to 500, step 10 | Line length in pixels; 0 renders full width. Shown when `width` is `custom`. |
| Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | Horizontal alignment. Shown when `width` is `custom`. |

## Layout elements

### [Section](/hc/documentation/learn-dxpr-builder/layout/sections)

Top-level container for rows, with full-width, full-height and background effect options. Machine name: `az_section`. New sections get the class `py-5` in **HTML classes**.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Full width | `fluid` | toggle | off | `yes` when on | Uses a full-width container (`container-fluid`). |
| 100% height | `fullheight` | toggle | off | `yes` when on | The section fills the viewport height. |
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Centres the content vertically. |

Fields in the **Background effects** accordion. All but **Background effect** depend on its value, as the Description column shows:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Background effect | `effect` | radio | empty (Simple image) | empty (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | Background effect. |
| Parallax speed | `parallax_speed` | slider | 0 | 0 to 100, step 1 | Parallax scroll speed. Shown when `effect` is `parallax`. |
| Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | Background attachment of the image. Shown when `effect` is `parallax`. |
| Disable on mobile | `parallax_mobile_disable` | toggle | off | `yes` when on | Turns parallax off on screens narrower than 481 px. Shown when `effect` is `parallax`. |
| Start color | `gradient_start_color` | colour | none | Any colour | Gradient start colour. Shown when `effect` is `gradient`. |
| End color | `gradient_end_color` | colour | none | Any colour | Gradient end colour. Shown when `effect` is `gradient`. |
| Gradient direction | `gradient_direction` | slider | 180 | 1 to 360, step 1 | Gradient angle in degrees. Shown when `effect` is `gradient`. |
| Start position | `gradient_start` | slider | 0 | 0 to 100, step 1 | Start colour position in percent. Shown when `effect` is `gradient`. |
| End position | `gradient_end` | slider | 100 | 0 to 100, step 1 | End colour position in percent. Shown when `effect` is `gradient`. |
| Video options | `video_options` | checkboxes | none ticked | `disMobile` (Disable on mobile devices), `loop` (Loop), `audio` (Unmute (Not reliable when auto-playing due to recent browser policy updates)), `noCrop` (Disable cropping out player), `resizeSection` (Resize section to match video), `showControls` (Show controls) | YouTube background options. Shown when `effect` is `youtube`. |
| YouTube video URL | `video_youtube` | text | empty | YouTube URL | YouTube background video. Shown when `effect` is `youtube`. |
| Start time in seconds | `video_start` | text | 0 | Seconds | Start time of the video. Shown when `effect` is `youtube`. |
| Stop time in seconds | `video_stop` | text | 0 | Seconds | Stop time of the video. Shown when `effect` is `youtube`. |

### [Row](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

Bootstrap grid row that holds columns. A new row starts with two half-width columns. Machine name: `az_row`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Equal-height columns | `equal` | toggle | off | `yes` when on | Gives all columns the same height. |
| Mirror row | `reverse_horizontal` | toggle | off | `yes` when on | Reverses the column order on screens 768 px and wider. |

### [Column](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

A column inside a row. Rows create their columns, so Column is not in the element picker. Machine name: `az_column`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Centres the column content vertically. |

### [Tabs](/hc/documentation/learn-dxpr-builder/layout/tabs-element)

Container with switchable tab panels; each tab is added with the **Add tab** control. Machine name: `az_tabs`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab direction | `az_dirrection` | radio | empty (Default) | empty (Default), `tabs-left` (Left), `tabs-right` (Right) | Position of the tab bar. The code spells the parameter this way. |
| Style | `tab_style` | radio | empty (Default) | empty (Default), `modern` (Modern), `accordion` (Accordion) | Tab style. |
| Mobile friendly | `responsive` | toggle | on | `yes` when on | Displays the tabs as a collapsible on small screens. |

Each tab (`az_tab`) has its own settings:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab title | `title` | text | Title | Any text | Label of the tab. |
| Tab description | `subtitle` | ckeditor | empty | HTML | Optional short byline shown on the active tab. |

### [Collapse panel](/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)

Container of collapsible panels; each panel is added with the **Add toggle** control. Machine name: `az_accordion`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Collapse | `collapsed` | toggle | off | `yes` when on | Starts with every panel closed. When off, the first panel starts open. |
| Expand icon | `expandicon` | radio | empty (None) | empty (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Icon next to each panel title. |

Each panel (`az_toggle`) has its own settings:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Toggle title | `title` | text | Title | Any text | Panel title. |

### [Carousel](/hc/documentation/learn-dxpr-builder/layout/carousel-layout)

Container of slides; each slide holds other elements and is added with the **Add slide** control. Slides (`az_slide`) have no fields of their own. Machine name: `az_carousel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Frames per slide | `items` | slider | 1 | 1 to 10, step 1 | Slides shown side by side. Narrower screens show fewer. |
| Disable auto-play | `autoplay` | toggle | off | `yes` when on | Stops the slides from advancing on their own. |
| Auto-play interval | `interval` | slider | 5000 | 1000 to 20000, step 100 | Time between slides in milliseconds. |
| Stop on hover | `stoponhover` | toggle | off | `yes` when on | Pauses auto-play while the pointer is over the carousel. |

Fields in the **Dots** accordion. Every field after **Dots navigation** is shown only while it is on:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Dots navigation | `pagination` | toggle | on | `yes` when on | Shows a dot for each slide. |
| Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Dots position. |
| Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | Dot shape. |
| Active dot transformation | `pagination_transform` | radio | empty (None) | empty (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | Effect on the active dot. |
| Dot color | `pagination_color` | colour | none | Any colour | Dot colour. |
| Active dot color | `pagination_active_color` | colour | none | Any colour | Active dot colour. |

Fields in the **Next/Previous** accordion. Every field after **Next/Previous** is shown only while it is on:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Next/Previous | `navigation` | toggle | off | `yes` when on | Shows the next and previous arrows. |
| Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Arrow position. |
| Dot shape | `navigation_shape` | radio | empty (No background) | empty (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | Arrow background shape. The modal labels it **Dot shape** too. |
| Icon color | `navigation_icon_color` | colour | none | Any colour | Arrow icon colour. |
| Icon hover color | `navigation_icon_hover_color` | colour | none | Any colour | Arrow icon hover colour. |
| Background color | `navigation_background_color` | colour | none | Any colour | Arrow background colour. |
| Background hover color | `navigation_background_hover_color` | colour | none | Any colour | Arrow background hover colour. |
| Outside navigation position | `navigation_position` | select | `adjacent` (Adjacent) | `adjacent` (Adjacent), `topCenter` (Top center), `topLeft` (Top left), `topRight` (Top right), `bottomCenter` (Bottom center), `bottomLeft` (Bottom left), `bottomRight` (Bottom right) | Position of the arrows outside the slider. |

### [Positioned layers](/hc/documentation/learn-dxpr-builder/layout/positioned-layers)

Canvas on which child elements are dragged and resized freely. A Positioned layers element cannot be nested inside another one. Machine name: `az_layers`. Each child stores its place in hidden parameters: `pos_left`, `pos_top`, `pos_width`, `pos_height` and `pos_zindex`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Canvas width. A bare number counts as pixels. |
| Height | `height` | slider | 500 | 0 to 10000, step 1 | Canvas height in pixels. |
| Responsive | `responsive` | toggle | off | `yes` when on | Scales the canvas height and font sizes with the available width. |

## What's next?

- [Elements overview](/hc/documentation/learn-dxpr-builder/elements)
- [Layout overview](/hc/documentation/learn-dxpr-builder/layout/overview)
- [Element settings](/hc/documentation/learn-dxpr-builder/element-settings)