wiz-card

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

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

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>

   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>

   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>

  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>

  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>

  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>

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

Properties

The following properties are available:

Property	Type	Default value	Description
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 caption for the card image
captionPosition	string	bottom	The location of the caption text relative to the card image. One of: bottom, left, right, top.
captionVerticalAlign	string	top	The caption text vertical alignment. One of: top, bottom, middle.
imageAlt	string	Image	The text displayed on the layout if a card image fails to load.
imageSrc	string	N/A	The path to the image.
imageWidth	number	50	The width of the card image container in percent. Must be 0 – 100
indent	number	20	The caption text indent in pixels. Must be > 0.
link	string	N/A	A URL or link target for the card.
width	number	0	The width of the card image in pixels.