Insites Docs Web Components V2Data DisplayThumbnails

Thumbnails

Published on February 18, 2021, updated on June 01, 2021

Element: < ins-thumbnail>

Defines a thumbnail UI where you can downloadable the file.

Complete Example

Code Snippet

<ins-thumbnail
  name="Insites Logo"
  alt="Insites Logo Image"
  src="https://insites.imgix.net/insites-template-icon.png"
  thumbnail="https://insites.imgix.net/insites-template-icon.png"
  label="Insites Logo"
  button-label="VIEW FILE"
  button-type="solid"
  button-color="green"
  button-icon="icon-file">
</ins-thumbnail>
Error State

Code Snippet

<ins-thumbnail
  name="Insites Logo"
  alt="Insites Logo Image"
  src=""
  label="Insites Logo">
</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, src will be 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

 

Have a suggestion for this page?

Send your suggestions using this form.