Media
Images, video, iframes, galleries, carousels, avatars, and logos. Every sample below is exhaustive — each labeled row shows every variant, size, and state.
Avatar
Image with initials fallback. Every size, shape, and tone — seeded with Sundanese sample people.
AvatarStack
Overlapping avatar group with overflow chip. Every size, spacing, and the reverse + max states — seeded with Sundanese sample people.
Image
Tokenised wrapper over native img. Every rounded step, every object-fit, and the aspectRatio wrapper.
'/></svg>)
VideoEmbed
YouTube / Vimeo / native player with an a11y title. Provider auto-detection plus custom aspect ratio.
IframeEmbed
Generic sandboxed iframe. Default and custom aspect ratios.
Gallery
Thumbnail grid. Every column count plus the clickable (onImageClick) state that wires into the Lightbox.
Purple surface 
Gold surface 
Emerald surface 
Indigo surface 
Rose surface 
Amber surface
Purple surface Gold surface Emerald surface Indigo surface Rose surface Amber surface
Purple surface Gold surface Emerald surface Indigo surface Rose surface Amber surface
Lightbox
Full-screen image viewer with arrow keys, counter, and optional thumbnails.
Carousel
Horizontal content carousel. Arrows + dots, autoplay with pause-on-hover, and multi-slide views.
LogoPlate
Consistent frame for client or partner logos. Every size, shape, and tone, plus bordered + shadow.
MapPlaceholder
Static map tile with an 'Open in Maps' action. With and without the action button.
Kagiswilerstrasse 17, 6060 Sarnen, Switzerland
Bandung, West Java, Indonesia
GenericMarquee
Infinite-scroll container with pause-on-hover and edge fades.
Masonry
CSS-column-based responsive masonry layout.