Media

One image or one embedded video with an optional caption. Video renders as a facade — poster and play button, iframe on click.

Two Rubix technicians examining a part in a machining centre. — Machining expertise centre — guidance on cutting tool selection.

import { MediaBlock } from "mako-ui/blocks/media";

export default function Particle() {
  return (
    <MediaBlock
      alt="Two Rubix technicians examining a part in a machining centre."
      caption="Machining expertise centre — guidance on cutting tool selection."
      imageHeight={800}
      imageUrl="/images/technicians-1200x800.jpg"
      imageWidth={1200}
    />
  );
}

Props

Image

Prop	Type	Default	Description
`imageUrl`	`string`	—	The image URL.
`imageWidth`	`number`	—	Intrinsic pixel width. Required: it lets the browser reserve the box and keep lazy loading working.
`imageHeight`	`number`	—	Intrinsic pixel height. Required, for the same reason.
`alt`	`string`	—	Description of the image. Required unless `isDecorative` is set — the type forces the choice.
`isDecorative`	`boolean`	—	Marks the image as decorative and renders an empty `alt`.
`caption`	`string`	—	Content everyone reads, not a substitute for `alt`.
`isPriority`	`boolean`	`false`	For media above the fold: loads eagerly at high priority instead of lazily.
`fill`	`boolean`	`false`	Makes the figure and the image fill their container with `object-cover`, for a column that has to match the height of the text beside it.

Video

Prop	Type	Default	Description
`kind`	`"video"`	—	Switches the block to the video facade.
`embedUrl`	`string`	—	The provider's embed URL, not a video file. The iframe mounts only when the reader presses play — include the provider's autoplay parameter (`autoplay=1`) so that click also starts playback.
`posterUrl`	`string`	—	Poster frame shown until then.
`title`	`string`	—	Accessible name for the embed and the play button.
`ratio`	`"16/9" \| "4/3"`	`"16/9"`	Aspect ratio of the embed.
`playLabel`	`string`	`title`	Accessible name of the play button.
`caption`	`string`	—	Optional caption under the media.

Examples

Video facade

Nothing third-party loads until the reader deliberately asks. Gating the click on the reader's consent choice stays the consumer's job.

The embed loads only when the reader presses play.

import { MediaBlock } from "mako-ui/blocks/media";

export default function Particle() {
  return (
    <MediaBlock
      caption="The embed loads only when the reader presses play."
      kind="video"
      posterUrl="/images/machining-1280x720.jpg"
      title="Rubix — company presentation"
      embedUrl="https://www.youtube-nocookie.com/embed/6stlCkUDG_s?autoplay=1"
    />
  );
}

On This Page

Props Image Video Examples Video facade