Logo Band

A wrapping row of partner or brand logos at a uniform height, each optionally linked.

Brands and products for machining

A logo links out only when the brand has a dedicated page.

import { LogoBandBlock } from "mako-ui/blocks/logo-band";

export default function Particle() {
  return (
    <LogoBandBlock
      logos={[
        {
          imageUrl: "/images/logo-fuchs.png",
          name: "Fuchs",
          url: "#fuchs",
        },
        {
          imageUrl: "/images/logo-mahr.png",
          name: "Mahr",
        },
        {
          imageUrl: "/images/logo-suttontools.png",
          name: "Sutton Tools",
        },
        {
          imageUrl: "/images/logo-yamawa.png",
          name: "Yamawa",
        },
      ]}
      subtitle="A logo links out only when the brand has a dedicated page."
      title="Brands and products for machining"
    />
  );
}

Props

LogoBandBlock

Prop	Type	Default	Description
`logos`	`Logo[]`	—	The logos. The block renders nothing when the list is empty.
`title`	`string`	—	Optional section heading, rendered as an `h2`.
`subtitle`	`string`	—	Optional line under the heading.
`id`	`string`	—	Id of the section, and the prefix every element id inside is derived from.

Logo

Prop	Type	Default	Description
`imageUrl`	`string`	—	The logo image. Height is fixed, width free, so a row of logos reads as a row.
`name`	`string`	—	The brand name — the image's `alt`, and the link's accessible name when linked.
`url`	`string`	—	Optional destination. Without it the logo is not a link.

On This Page

Props LogoBandBlock Logo