wiz-card

UI element for displaying images with caption

Installation

Run following command in the terminal to install the module:

wiz install wiz-card

Link

import wizCard from 'wiz-card';

Add this link directly to the layout (App.vue) or block (./common/blocks/ or ./common/blocks-library/):

export default {
  components: {
    wizCard
  }
  ...

Basic usage

Markup:

 <wiz-card :image-src="image" :image-width="18" caption-position="right" caption-vertical-align="top" :caption-text="$t('caption_text')" :indent="10" image-alt="Image alt" :width="500" link="https://viseven.com/"></wiz-card>

Script:

import image from './public/placeholder.png';

export default {
	name: 'block1',
	data: function () {
		return {
			image
		}
	}
}

Localization:

<i18n>
    {
        "en": {
     	        "caption_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
    }
</i18n>

Parameters

Property	Type	Default	Description
captionText	String	"Image card caption"	string with text (e.g.:'My awesome text') or keypath to localized text ("$t('text')")
captionPosition	String	bottom	Defines caption position (left, right, top, bottom)
captionVerticalAlign	String	top	Defines caption vertical align (top, middle, bottom)
indent	Number	20	Text indent in pixels
link	String	""	Defines link which is opened by clicking on image
imageSrc	String	"./media/images/default-image.jpg"	Defines image source
imageWidth	String	50	Image width in pixels
imageAlt	String	"Image"	Defines alt text for images
width	Number	0	width image wrapper in pixels