Takazudo Modular Styleguide

Type to search...

to open search from anywhere

← All components

Article Media & Embeds

9 components in this category.

ArticleImage

Full-width article figure with an optional caption and enlarge affordance.

4 variants

ExImg

Bordered figure wrapper around ResponsiveImage — supports float-left/right, auto-prefixes bare slugs with /images/p/, and includes a 13-shape prose-float alignment matrix.

4 variants

Img

MDX <img> override — resolves /images/p/ paths and bare pipeline slugs to a responsive ResponsiveImage with the click-to-zoom enlarge affordance, falling back to a plain <img> for external URLs.

3 variants

ImgsGrid

Multi-image grid — responsive column count via `divide`, optional per-image captions, a centered single-column layout when only one image is passed, and a per-cell click-to-enlarge (lightbox) affordance for images with pipeline variants.

3 variants

InstagramEmbed

Embeds Instagram posts and reels in MDX articles. Supports post (/p/) and reel (/reel/) URL formats, URL validation for instagram.com, lazy loading for performance.

4 variants

Mermaid

Client-only Mermaid diagram embed for MDX articles. Renders a fallback <pre> of the raw chart source until the client mounts and Mermaid finishes rendering the SVG.

2 variants

SynthDiagram

Pre-generated SVG diagram embed for synth-keyword articles (sub-packages/synth-svg output) — auto-prefixes a bare filename with /images/synth-svg/.

2 variants

Youtube

Embeds YouTube videos in MDX articles with privacy-enhanced mode. Supports multiple URL formats (youtube.com, youtu.be), uses youtube-nocookie.com, responsive 16:9 aspect ratio, lazy loading.

6 variants

YoutubeAt

Click-to-play YouTube embed facade that shows a video capture frame as a cover image with play button overlay and timestamp badge. Clicking replaces the cover with the actual YouTube iframe.

6 variants