BaseImageBox

A component with the primary purpose to display images in responsive boxes but also allowing for text only

Props

Prop name	Description	Type	Values	Default
title	The title of the item in question (max 2 lines), also used as img alt text	string	-	'No title'
altTitle	specify a separate title to display on title hover and for the image alt text. Useful for example if interpretTextAsHtml is set true and the title contains HTML	string	-	''
subtext	Text displayed directly below title (max two lines; max 3 lines with title)	string	-	''
altSubtext	specify a separate subtext to display on subtext hover. Useful for example if interpretTextAsHtml is set true and the subtext contains HTML	string	-	''
showTitle	should the title be displayed or box only display the image	boolean	-	true
showTitleOnHover	should the title be displayed on box hover	boolean	-	false
titleRows	define the number of rows before the title is truncated with ... auto: If subtext is defined, the title is displayed in one row, otherwise in two rows. 1: Title is displayed in one row.	string|number	auto, 1	'auto'
imageUrl	define a url to a single image data variants to render a single image using src or srcset for a responsive image: src: 'path' srcset: { '640w': 'path' }	string|object	-	null
images	define up to 4 image url to be displayed in a grid array variants to render a single image using src or srcset for a responsive image: src: ['path'] srcset: [{ '640w': 'path' }]	array	-	[]
imageShadow	display shadow overlays at the top and bottom of the image to make text easier to read	boolean	-	true
imageFooterMargin	define the margin (left, bottom, right) between the image footer and the image	string	large, small	'large'
description	descriptive element displayed at bottom of box (e.g. item type like "Bilderserie")	string	-	null
additional	descriptive element displayed at bottom of box (e.g. item type like "Bilderserie")	string	-	null
icon	set optional icon e.g. for items without image	string	-	''
iconSize	set optional icon size	string	small, medium, large, xlarge, xxlarge	'xxlarge'
playIcon	display play icon e.g. for Video, Audio files	boolean	-	false
selectable	determines if the box should be selectable and the checkbox is displayed	boolean	-	false
draggable	set prop true if box can be dragged - used solely for styling purposes	boolean	-	false
selected	set select status (checkbox checked) from outside	boolean	-	false
boxSize	specify the size of the box	object	-	{ width: 'auto', height: 'auto' }
boxText	specify any text that should be displayed instead of an image; each array element on new line	array	-	[]
lazyload	specify lazy image loading	boolean	-	false
imageFirst	specify position of image	boolean	-	false
centerHeader	specify if header should be centered horizontally (aligned left otherwise)	boolean	-	false
renderElementAs	define html element that should be rendered this could either be a native HTML element or a framework specific component name (e.g. 'RouterLink') or a component passed directly caveat: if you are using Nuxt the string 'NuxtLink' is not enough, but you need to import the component as import { NuxtLink } from '#components'; and pass the component to the prop!	string|object	-	'div'
linkTo	if element is rendered as vue link component, specify a value for the to attribute can either be a string or a vue-router Location object (= object with path property and optional params or query object) (this needs vue-router)	string|object	-	''
interpretTextAsHtml	if necessary box text (title, subtext, boxText) can be rendered as html tip: do not forget to set prop altTitle and/or altSubtext if the title text or subtext contains html - otherwise the complete html will be displayed on text hover and for image alt text caveat: setting this variable true can lead to XSS attacks. Only use this prop on trusted content and never on user-provided content.	boolean	-	false

Events

Event name	Properties	Description
clicked		event triggered when selectable is false and box is clicked
select-triggered	undefined Boolean - was box selected	event triggered when box is selectable and clicked upon

Slots

Name	Description	Bindings
title-right	create custom content (e.g. additional text or icon) right of the title
icon	create custom content (e.g. folder icon)
text	to display more advanced text - if you use this please specify the ref attribute with boxTextInner that has the line-height css attribute set - so the text display height can be calculated correctly!
footer-left	create custom content (e.g. featured icon for files) left of text
footer-right	create custom content (e.g. published icon for files) left of text

---

Demo

A variety of possibilities with image box