Thumbnail

Small, fixed-size preview image with optional selectable/clickable affordances. For large content images use cg-image.

data-displayv0.8.0

Playground

Examples

Basic

<cg-stack direction="row" gap="sm"><cg-thumbnail src="https://i.pravatar.cc/80?img=1" alt="1"></cg-thumbnail><cg-thumbnail src="https://i.pravatar.cc/80?img=2" alt="2"></cg-thumbnail><cg-thumbnail alt="Empty"></cg-thumbnail></cg-stack>

Selectable gallery

<cg-stack direction="row" gap="sm"><cg-thumbnail src="https://i.pravatar.cc/80?img=3" alt="A" selectable selected></cg-thumbnail><cg-thumbnail src="https://i.pravatar.cc/80?img=4" alt="B" selectable></cg-thumbnail><cg-thumbnail src="https://i.pravatar.cc/80?img=5" alt="C" selectable></cg-thumbnail></cg-stack>

Sizes & rounding

<cg-stack direction="row" gap="sm" align="center"><cg-thumbnail src="https://i.pravatar.cc/80?img=6" alt="sm" size="sm"></cg-thumbnail><cg-thumbnail src="https://i.pravatar.cc/80?img=7" alt="lg" size="lg" rounded="full"></cg-thumbnail></cg-stack>

Import

import { CgThumbnail } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-thumbnail';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`src`	string	""	Image URL
`alt`	string	""	Alt text
`size`	"sm" \| "md" \| "lg"	"md"	Fixed tile size
`rounded`	"none" \| "sm" \| "md" \| "lg" \| "full"	"md"	Corner radius
`selectable`	boolean	false	Render as a toggle (checkbox role)
`selected`	boolean	false	Selected state
`disabled`	boolean	false	Non-interactive, dimmed

Events

Event	Detail	Description
`cg-thumbnail-select`	{selected: boolean}	Fired on toggle (selectable mode)