Components / Image Block
Image Block
Image with caption, loading skeleton, and error fallback.
data-display v0.1.0
Playground
Examples
With caption
<cg-image-block src="https://picsum.photos/400/250" alt="Demo" caption="A beautiful landscape photo" style="max-width: 400px;"></cg-image-block>Import
import { CgImageBlock } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-image-block';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL |
alt | string | — | Alt text |
caption | string | — | Caption text |
ratio | "16:9" | "4:3" | "1:1" | "3:2" | "auto" | "auto" | Aspect ratio |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |