Component library

Thumbnails

Last updated 2 November 2026

Defines a thumbnail UI where you can download the file.

Live demo

<ins-thumbnail
  name="Insites Logo"
  alt="Insites Logo Image"
  src="https://files.prod01-insites.io/instances/302/property_uploads/modules/insites_assets/assets_upload/asset/527703e7-75c8-446d-bbef-48742d34ea76/insites-template-logo.png?updated=1723195348"
  thumbnail="https://files.prod01-insites.io/instances/302/property_uploads/modules/insites_assets/assets_upload/asset/527703e7-75c8-446d-bbef-48742d34ea76/insites-template-logo.png"
  label="Insites Logo"
  button-label="VIEW FILE"
  button-type="solid"
  button-color="green"
  button-icon="icon-file">
</ins-thumbnail>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
name	string	-	any	Defines the name of the file to be downloaded
alt	string	-	any	Defines the alternative text when the image is broken
src	string	-	Source is required	Defines the source of the file
thumbnail	string	-	Should be an image. If not supplied, the "src" will be used for the thumbnail.	Defines an image thumbnail of the source
label	string	-	any	Defines the label of the thumbnail
button-label	string	DOWNLOAD	any	Defines the label of the button
button-color	string	blue	blue, green, orange, red, pink, yellow, turquoise, grey	Defines the color of the button
button-icon	string	-	Insites Font Icons	Defines the icon of the button
button-type	string	-	Solid or Outlined	Defines the type of the button

Examples

Error State

<ins-thumbnail
  name="Insites Logo"
  alt="Insites Logo Image"
  src=""
  label="Insites Logo">
</ins-thumbnail>