Design system
Thumbnail
Last updated 4 April 2025
Like your usual thumbnail, the Insites Thumbnail component works as a visual anchor or identifier for an object. This is usually used along with text to provide users context for the preview.
Requirements
To use these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of the component.
Figma Component Variant Properties
Thumbnail
| Properties | Options | Notes |
|---|---|---|
| State | Default, Hover, Error | Select what state to display for the component |
| Button Style | Solid, Outlined | Select the style to use for the button. This property is not available if Error is selected for the State. |
| Button Colour | Grey, Blue, Red, Green, Pink, Yellow, Orange, Turquoise | Select what colour to use for the button.This property is not available if Error is selected for the State. |
| Button Hover | True, False | Enable to use the hover state of the button.This property is not available if Error is selected for the State. |