wiz-card component in emails | Viseven Help Center

The wiz-card component is an image with a text caption. For more information, see Card.

Installation

To install the wiz-card component, run the following command in your email project root directory:

wiz install @email/wiz-card

For more information, see Install components.

Usage

NOTE: As best practice, use eWizard Editor to add and edit the components.

To add the wiz-card component to your email and change its properties, in the App.vue file:

1) Add the wiz-card component to your email template.

<!--./App.vue --><template>
<div>
<wiz-root align="center" style="background: #ffffff; width: 700px">
<wiz-card
:caption-text="$t('wiz_card_f694')"
id="wiz-card-1f42"
image-alt=""
image-src="./common/media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"
data-asset-id="prvmevam7f"
></wiz-card>
</wiz-root>
</div>
</template>

NOTE: The id attribute is required for correct display of the component styles in eWizard Editor.

The data-asset-id attribute is required for the Veeva Vault modules in the assets.json file. For more information, see Veeva Vault publish settings.

2) Change the caption text in the localization <i18n></i18n> tag.

<!--./App.vue --><i18n>
{
"eng": {
"wiz_card_f694": "<div style=\"line-height:20px;text-align:center;\"><span style=\"color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:14px;\">My card image</span></div>"
}
}
</i18n>

NOTE: For more information, see Localization.

Attributes

You can change the wiz-card component appearance and behavior using the following attributes within the <wiz-card></wiz-card> tag:

• image-src

Add a path to the image that appears in your card:

<wiz-card image-src="./common/media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"></wiz-card>

NOTE: The ./common/media/images/ path is the default path. You can rename the image and provide a new path.

• image-alt

Change the image alternative text in the attribute value:

<wiz-card image-alt="My image alternative text"></wiz-card>

• link

Enter the image link in the attribute value:

<wiz-card :link="'https://viseven.com/'"></wiz-card>

• image-width

To change the image container width, set the attribute value in percents:

<wiz-card image-width="20"></wiz-card>

NOTE: The image container width must be from 0 to 100%.

• caption-position

Change the caption text position in the attribute value:

<wiz-card :caption-position="'top'"></wiz-card>

• caption-vertical-align

Change the caption text vertical alignment in the attribute value:

<wiz-card :caption-vertical-align="'middle'"></wiz-card>

NOTE: To use the caption-vertical-align attribute, set the caption-position attribute value to left or right.

• indent

To change the caption text indent, set the attribute value in pixels:

<wiz-card :indent="5"></wiz-card>

• width

To change the image width, set the attribute value in pixels:

<wiz-card :width="150"></wiz-card>

NOTE: The width attribute doesn't affect the image container width.

Properties

The wiz-card component has the following properties:

Property	Type	Default	Description
`imageSrc`	String	`./node_modules/wiz-card/media/images/default-image.jpg`	The path to the card image.
`imageAlt`	String	`Image`	The alternative text for the card image.
`imageWidth`	Number	`50`	The image container width. The value must be from 0 to 100%.
`captionText`	String	`<div style='text-align: center;line-height: 20px'>` `<span style='font-size:14px;color:#000000;` `font-family:arial,helvetica neue,helvetica,sans-serif;'>Image card caption</span></div>`	The card image caption text.
`captionPosition`	String	`bottom`	The caption text position. Other possible values are: `left`, `right`, and `top`.
`captionVerticalAlign`	String	`top`	The caption text vertical alignment. Other possible values are: `middle` and `bottom`.
`indent`	Number	`20`	The caption text indent in pixels. The value must be more than 0.
`link`	String	N/A	The image clickable link.
`width`	Number	`0`	The image width in pixels.

For more information, see Component properties.