Page Header

The page template's header — the single h1, an optional description and an optional banner image. Blocks hardcode h2, so this is the only h1 on a page.

Machining guides and technical advice

Everything you need to know about pre-drilling diameters, thread standards and tool selection.

import { PageHeaderBlock } from "mako-ui/blocks/page-header";

export default function Particle() {
  return (
    <PageHeaderBlock
      description="Everything you need to know about pre-drilling diameters, thread standards and tool selection."
      title="Machining guides and technical advice"
    />
  );
}

Props

PageHeaderBlock

Prop	Type	Default	Description
`title`	`string`	—	The page title, rendered as the page's single `h1`.
`description`	`string`	—	One or two sentences introducing the page.
`imageUrl`	`string`	—	Optional banner above the title. Always decorative: the `h1` underneath states the subject.
`imageWidth`	`number`	—	Intrinsic pixel width of the banner. Required with `imageUrl`, so the browser reserves the box.
`imageHeight`	`number`	—	Intrinsic pixel height of the banner. Required with `imageUrl`, for the same reason.

Examples

With a banner image

Hydraulics

We keep your hydraulic applications running smoothly.

import { PageHeaderBlock } from "mako-ui/blocks/page-header";

export default function Particle() {
  return (
    <PageHeaderBlock
      imageHeight={480}
      imageUrl="/images/technicians-1600x480.jpg"
      imageWidth={1600}
      description="We keep your hydraulic applications running smoothly."
      title="Hydraulics"
    />
  );
}

On This Page

Props PageHeaderBlock Examples With a banner image