Columns

import { ColumnsBlock } from "mako-ui/blocks/columns";
import { MediaBlock } from "mako-ui/blocks/media";
import { RichTextBlock } from "mako-ui/blocks/rich-text";

export default function Particle() {
  return (
    <ColumnsBlock>
      <MediaBlock
        alt="Two Rubix technicians examining a part in a machining centre."
        imageHeight={800}
        imageUrl="/images/technicians-1200x800.jpg"
        imageWidth={1200}
        fill
      />
      <RichTextBlock>
        <h3>Text beside an image</h3>
        <p>
          The pattern real pages actually use in two columns: one block per
          cell. A media block on one side, a text block on the other.
        </p>
      </RichTextBlock>
    </ColumnsBlock>
  );
}

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

export default function Particle() {
  return (
    <ColumnsBlock count={3}>
      <MediaBlock
        alt="A wall of labelled storage bins in a Rubix warehouse."
        caption="Storage and picking"
        imageHeight={600}
        imageUrl="/images/storage-800x600.jpg"
        imageWidth={800}
        fill
      />
      <MediaBlock
        alt="A technician measuring a machined part with a micrometer."
        caption="Metrology and quality control, from the incoming part to the certificate"
        imageHeight={600}
        imageUrl="/images/metrology-800x600.jpg"
        imageWidth={800}
        fill
      />
      <MediaBlock
        alt="Close-up of a CNC machine cutting metal."
        caption="Machining"
        imageHeight={600}
        imageUrl="/images/machining-800x600.jpg"
        imageWidth={800}
        fill
      />
    </ColumnsBlock>
  );
}