Takazudo Modular Styleguide

Type to search...

to open search from anywhere

← All components

Media & Icons

18 components in this category.

Media & Icons

BlurhashPlaceholder

Canvas-decoded blurhash blur-up placeholder that fades out once loaded.

2 variants

BrandSquareLogo

Brand logo centered in a white (or monochrome) square container, looked up by slug.

4 variants

ContactThumb

Stylized contact-page thumbnail: a centered mail icon with diagonal line decorations matching NewsThumb.

4 variants

IconsGallery

Inventory of the standalone components/icons/* SVG components.

1 variant

LogoWrapper

White background container for displaying brand logos consistently. Square aspect ratio, white background for logo visibility, centered content with grid layout — used in BrandBlock component.

5 variants

MetadocThumb

MetaModule documentation thumbnail: a document sheet with a folded corner carrying a gear, in the shared static-page thumb frame.

5 variants

MmRefThumb

MetaModule Module Reference thumbnail: a Eurorack module panel with a magnifier floating over its right edge, in the shared static-page thumb frame.

5 variants

NewsThumb

Stylized newsletter-article thumbnail: "NEWS" + volume number with diagonal line decorations, in grid/list/detail size variants.

7 variants

P4m2026Thumb

Stylized P4M 2026 form thumbnail: a centered p4m glyph with diagonal line decorations matching ContactThumb/NewsThumb.

5 variants

PhotoDialog

Stateful photos lightbox island: prev/next navigation, panel toggle, history sync.

2 variants

PhotoDialogContent

Presentational lightbox markup for the photos dialog: image, caption panel, nav.

4 variants

PhotoTile

Square photo thumbnail tile, optionally wrapped in a lightbox-opening anchor.

2 variants

RefChildThumbs

The four /ref/ hub child thumbnails side by side — MmRefThumb, ManualsThumb, MetadocThumb, WebSynthThumb — for checking glyph legibility and frame parity at row and hero sizes.

3 variants

ResponsiveImage

Optimized responsive image with a CSS-only blur-up placeholder. Self-resolves metadata from the slug when not pre-supplied.

4 variants

StaticPageThumbs

Gallery of the 10 static-page / guide-series thumbnail components: the shared glyph-cutout frame (about/airpay/manuals/support/tokushoho/warranty) plus the KumikoThumb-based family (mm-deep, series, synth-kw).

4 variants

SvgIconRegistry

Centralized zfb-safe SVG registry: brand logos + UI icons (components/svg/index.ts).

1 variant

ThumbFrame

Shared bordered-square / white-X-diagonal frame behind the 13 static-page and /ref/ glyph thumbs plus the NEWS volume thumbs (issue #2446). Renders the frame chrome only — the glyph or text block is passed as children.

4 variants

WebSynthThumb

Zudo Web Synth thumbnail: a wave display showing one sine cycle above three pointer knobs, in the shared static-page thumb frame.

5 variants