Skip to main content
List of component properties

A list of component properties for all premade eWizard components

eWizard Team avatar
Written by eWizard Team
Updated over a year ago

This article describes what properties are used in the eWizard.js components.

Property

Type

Description

Used in

__id

String

The automatically generated item ID

e-Detailer components:
wiz-popup
wiz-tab-group

Email components:
wiz-agenda

align

String

Defines how the element is aligned on the page

Email components:
wiz-button
wiz-event-invitation
wiz-image
wiz-layout

Site components:
wiz-image
wiz-layout

alignIcons

String

Defines if the icons are aligned left, center, or right

Email components:
wiz-social-follow-icons

alt

String

The alternative text for the image

e-Detailer components:
wiz-image

Email components:
wiz-image

Site components:
wiz-image

autoplay

Boolean

Starts the video playback when opening the slide

e-Detailer components:
wiz-video

Site components:
wiz-video

captionText

String

The card image caption text

Email components:
wiz-card

captionPosition

String

The caption text position. Possible values are: bottom, left, right, and top

Email components:
wiz-card

captionVerticalAlign

String

The caption text vertical alignment. Possible values are: top, middle, and bottom.

Email components:
wiz-card

cellclass

String

Set the table data cell class

Email components:
wiz-layout

closeButtonIcon

String

The icon of the close button

e-Detailer components:
wiz-popup

closeButtonPosition

String

The position of the close button

e-Detailer components:
wiz-popup

closeOnOutsideTap

Boolean

You can close the pop-up by clicking outside of it if the value is true

e-Detailer components:
wiz-popup

componentName

String

The component label displayed on the component Properties tab in eWizard Editor

e-Detailer components:
wiz-card-carousel
wiz-container
wiz-image
wiz-text
wiz-video

Site components:
wiz-button
wiz-video

contentAlign

String

The element alignment in the table header cell: left, center, or right

Email components:
wiz-layout

controls

Boolean

Shows the video controls

e-Detailer components:
wiz-video

Email components:
wiz-video

css

Object

Add the CSS style to the table data cell element using an object

Email components:
wiz-layout

currentItem

Number

Defines the starting card number of the carousel by default

e-Detailer components:
wiz-carousel
wiz-card-carousel

day

String

The text of the calendar day

Email components:
wiz-calendar

description

String

The event description or the name of the presentation delivered by the speaker. This object is a part of the speakers array.

Email components:
wiz-agenda

direction

String

Controls the card rotation direction. Rotate the cards clockwise, counterclockwise, or set both to rotate the cards in both directions.

e-Detailer components:
wiz-carousel
wiz-card-carousel

dividerAlign

Number

The divider line alignment on the page. Possible values are center, left, and right. This property requires the dividerLength property value of less than 100%.

Email components:
wiz-divider

dividerColor

String

The hex code of the divider line color

Email components:
wiz-divider

dividerHeight

Number

The divider line width in pixels

Email components:
wiz-divider

dividerLength

Number

The divider line length from 0 to 100%

Email components:
wiz-divider

fullScreen

Boolean

Opens the video in full screen mode when you start the video playback

e-Detailer components:
wiz-video

Site components:
wiz-video

fullWidth

Boolean

Makes the button full width of the page

Email components:
wiz-button
wiz-event-invitation

grid

[String, Array]

Use the custom function to set the table data cell width and padding

Email components:
wiz-layout

hasTabLabel

Boolean

Shows or hides the tab names next to the tab on the layout: true or false

e-Detailer components:
wiz-tab-group

height

Number

The height of the component

Email components:
wiz-image

Site components:
wiz-button
wiz-image

hideOverflowedComponents

Boolean

Set the value to true to hide parts of child components that extend beyond the parent

e-Detailer components:
wiz-container

iconBorderColor

String

Social icon border color

Email components:
wiz-social-follow-icons

iconBorderStyle

String

Defines if the icon corners are squared or rounded

Email components:
wiz-social-follow-icons

imageAlt

String

The alternative text for the card image

Email components:
wiz-card

Site components:
wiz-card-list

imageSrc

String

The path to the card image

Email components:
wiz-card

Site components:
wiz-card-list

imageWidth

Number

The width of the image container

Email components:
wiz-card

Site components:
wiz-card-list

indent

Number

The caption text indent in pixels. The value must be more than 0

Email components:
wiz-card

isSnap

Boolean

If true, eWizard Editor centers the card you stop the rotation on. If false, the carousel stops on the exact place you leave it.

e-Detailer components:
wiz-carousel
wiz-card-carousel

isTime

Boolean

Shows or hides the time range column on the agenda

Email components:
wiz-agenda

itemBorderWidth

Number

Border width of the social icon

Email components:
wiz-social-follow-icons

itemIndent

Number

The indent between the items

Site components:
wiz-card-list

items

Array

Item settings. Includes the properties of each item.

e-Detailer components:
wiz-card-carousel

Email components:
wiz-social-follow-icons

itemWidth

Number

Social icon width

Email components:
wiz-social-follow-icons

lineHeight

Number

The line height of the button text

Email components:
wiz-button
wiz-event-invitation

link

String

The clickable link

Email components:
wiz-button
wiz-calendar
wiz-card
wiz-image

Site components:
wiz-image

loop

Boolean

Loops the video playback

e-Detailer components:
wiz-video

Site components:
wiz-video

max

Number

The maximum number of email fragments you can insert into the email in Veeva Vault

Email components:
wiz-fragment

min

Number

The minimum number of email fragments you can insert into the email in Veeva Vault

Email components:
wiz-fragment

month

String

The text of the calendar month

Email components:
wiz-calendar

muted

Boolean

Mutes the video when you start the playback

e-Detailer components:
wiz-video

Site components:
wiz-video

notSelectedTabFill

String

The color for the not selected tabs. Use the hex code or RGBA to define the fill color.

e-Detailer components:
wiz-tab-group

orientation

String

Controls whether the items rotate horizontally or vertically

e-Detailer components:
wiz-carousel
wiz-card-carousel
wiz-tab-group

playingDuration

Number

Set the playback duration in seconds

e-Detailer components:
wiz-video

Site components:
wiz-video

perspective

Number

Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective

e-Detailer components:
wiz-carousel
wiz-card-carousel

playsinline

Boolean

Plays the video inline within the playback area

e-Detailer components:
wiz-video

Site components:
wiz-video

poster

String

Path to the poster image (thumbnail) that appears on the video

e-Detailer components:
wiz-video

Site components:
wiz-video

radius

Number

The radius of the carousel

e-Detailer components:
wiz-carousel
wiz-card-carousel

selectedTabBorder

String

The width, style, and color for the selected tab border

e-Detailer components:
wiz-tab-group

selectedTabFill

String

The color for a selected tab. Use the hex code or RGBA to define the fill color.

e-Detailer components:
wiz-tab-group

sensitivity

Number

Controls the rotation speed

e-Detailer components:
wiz-carousel
wiz-card-carousel

shift

Number

The angle that shows how far the current-item is shifted in the specified direction

e-Detailer components:
wiz-carousel
wiz-card-carousel

showCloseButton

Boolean

Displays the close button if the value is true

e-Detailer components:
wiz-popup

showOnEnter

Boolean

The pop-up appears when you open the slide if the value is true

e-Detailer components:
wiz-popup

showOverlay

Boolean

The area around the pop-up is grayed out if the value is true

e-Detailer components:
wiz-popup

showPoster

String

Shows the poster image on the video

e-Detailer components:
wiz-video

Site components:
wiz-video

speaker

String

The speaker name. This object is a part of the speakers array.

Email components:
wiz-agenda

speakers

Array

The array of rows with the time range, event description, and speaker name. This array includes the timeFrom, timeSeparator, description, and speaker objects.

Email components:
wiz-agenda

tabIcon

String

The path to the tab icon

e-Detailer components:
wiz-tab-group

tabIconPosition

String

The tab icon position relative to the tab name: top or left. The none value hides the tab icons for all the tabs in the tab group.

e-Detailer components:
wiz-tab-group

tabName

String

The readable tab name with the CSS text style. The default names are: TAB 1, TAB 2, and TAB 3.

e-Detailer components:
wiz-tab-group

tabs

Array

The tab group array where each tab is an object that includes individual tab properties: ID, name, and icon. By default, the tab group includes three tabs.

e-Detailer components:
wiz-tab-group

tabsBarFill

String

The tab bar color. Use the hex code or RGBA to define the fill color.

e-Detailer components:
wiz-tab-group

text

String

The editable text displayed on the slide layout in eWizard Editor

e-Detailer components:
wiz-text

Email components:
wiz-button
wiz-text
wiz-title

Site components:
wiz-button
wiz-text

textAlign

String

Aligns the button text in the full width mode. The property includes an array of the following options: left, center, right, and justify.

Email components:
wiz-button
wiz-event-invitation

textOffset

Number

The left margin of the card text

Site components:
wiz-card-list

timeFrom

String

The start time of the event. For example, 09 AM. This object is a part of the speakers array.

Email components:
wiz-agenda

timeSeparator

String

The symbol to visually separate the start time and the end time of the event. For example, use colon as a time separator: 09 AM : 10 AM. This object is a part of the speakers array.

Email components:
wiz-agenda

timeTill

String

The end time of the event. For example, 10 AM. This object is a part of the speakers array.

Email components:
wiz-agenda

topImageOffset

Number

The margin at the top of the card image

Site components:
wiz-card-list

type

String

The flexbox layout type. Two types are available: horizontal for rows and vertical for columns.

Email components:
wiz-layout

Site components:
wiz-layout

src

String

The path or link to the asset file, such as image or video

e-Detailer components:
wiz-image
wiz-video

Email components:
wiz-image

Site components:
wiz-image
wiz-video

videoAlt

String

The video alternative text. The maximum length is 100 characters.

Email components:
wiz-video

videoPoster

String

The path to the video thumbnail

Email components:
wiz-video

videoUrl

String

The video URL address. The video opens in a new browser tab.

Email components:
wiz-video

width

Number

The width of the component

Email components:
wiz-card
wiz-image
wiz-layout

Site components:
wiz-button
wiz-image
wiz-layout

Did this answer your question?