wiz-card-list | Viseven Help Center

The wiz-card-list component is an HTML container with multiple cards. Each card comprises an image and text:

Installation

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

wiz install @site/wiz-card-list

For more information, see Install components.

Usage

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

To add the wiz-card-list component to the landing page template:

1) Add the wiz-card-list component in the App.vue file of your project.

<!--./App.vue --><template>
<wiz-root style="background: #ffffff; width: 880px;" class="editable-block">
<wiz-card-list
id="wiz-card-list-547f"
:items="[
{
'imageSrc':'./common/media/images/image1.jpg',
'imageAlt':$t('image1_alt_text'),
'text':$t('item1_text'),
'__id':'2-items-1'
},
{
'imageSrc':'./common/media/images/image2.jpg',
'imageAlt':$t('image2_alt_text'),
'text':$t('item2_text'),
'__id':'2-items-2'
}
]"
:image-width="549"
:top-image-offset="10"
:item-indent="25"
:text-offset="30"
data-asset-id="aguvi2xb"
></wiz-card-list>
</wiz-root>
</template>

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

The __id attribute is required for the correct display of the card 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) Add the card text and the image alternative text in the <i18n></i18n> localization tag.

<!--./App.vue --><i18n>
{
"eng": {
"image1_alt_text": "A picture of dogs",
"item1_text": "<p><span>This is a picture of dogs</span></p>",
"image2_alt_text": "A picture of cats",
"item2_text": "<p><span>This is a picture of cats</span></p>",
}
}
</i18n>

For more information, see Localization.

Attributes

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

• items

The items array includes the list of cards represented by the {} objects. Each card is an object with properties. To change the properties of each card, edit its attributes.

<wiz-card-list
:items="[
{
'imageSrc':'./common/media/images/image1.jpg',
'imageAlt':$t('image1_alt_text'),
'text':$t('item1_text'),
'__id':'2-items-1'
},
{
'imageSrc':'./common/media/images/image2.jpg',
'imageAlt':$t('image2_alt_text'),
'text':$t('item2_text'),
'__id':'2-items-2'
}
]"
></wiz-card-list>

The items attribute has the following properties:

— imageSrc—the path to the card image.

— imageAlt—the alternative text of the card image.

— text—the card text.

• image-width

To change the image width, set the value in pixels. Maximum value is 549.

<wiz-card-list :image-width="549"></wiz-card-list>

• top-image-offset

To change the margin at the top of the card image, set the value in pixels.

The attribute corresponds to the Image top spacing property in eWizard Editor.

<wiz-card-list :top-image-offset="10"></wiz-card-list>

• item-indent

To change the margin between the cards, set the value in pixels.

The attribute corresponds to the Entry spacing property in eWizard Editor.

<wiz-card-list :item-indent="21"></wiz-card-list>

• text-offset

To change the left margin of the card text, set the value in pixels.

The attribute corresponds to the Text indent property in eWizard Editor.

<wiz-card-list :text-offset="14"></wiz-card-list>

Properties

The wiz-card-list component has the following properties:

Property	Type	Default	Description
`imageWidth`	Number	`60`	The width of the card image. Maximum value is `549`.
`topImageOffset`	Number	`6`	The margin at the top of the card image
`textOffset`	Number	`24`	The left margin of the card text
`itemIndent`	Number	`12`	The margin between the cards
`items`	Array	`[...]`	The card settings. Includes properties of each card, such as `imageSrc`, `imageAlt`, and `text`.

Each card in the items array has the following properties:

Property	Type	Default	Description
`imageSrc`	String	`./media/images/placeholder.svg`	The path to the card image
`imageAlt`	String	`Add entry label`	The alternative text of the card image
`text`	String	`<p style='line-height:24px;text-align:left;'><span style='font-size:12px;color:#212121; font-family:OpenSans,sans-serif;'>Add entry label</span></p>"`	The card text

For more information, see Component properties.