Callout

A title, a sentence and one or two calls to action, on a tinted panel that separates it from the prose around it.

Our technical machining guides

All our advice and information to broaden your skills and cut your machining costs.

import { CalloutBlock } from "mako-ui/blocks/callout";
import { BookOnHand } from "mako-ui/icons/book-on-hand";

export default function Particle() {
  return (
    <CalloutBlock
      actions={[{ label: "See the technical guides", url: "#guides" }]}
      icon={<BookOnHand aria-hidden="true" />}
      description="All our advice and information to broaden your skills and cut your machining costs."
      title="Our technical machining guides"
    />
  );
}

Props

CalloutBlock

Prop	Type	Default	Description
`title`	`string`	—	The callout's heading, rendered as an `h2`.
`description`	`string`	—	One or two sentences under the heading.
`tone`	`"neutral" \| "dark" \| "accent"`	`"neutral"`	The surface, mapped to intent: neutral for information, dark for a brand commitment, accent for an offer or a deadline.
`icon`	`ReactNode`	—	Optional icon beside the title — it says what kind of thing the callout is.
`actions`	`CalloutAction[]`	`[]`	At most two; extra actions are ignored.
`id`	`string`	—	Id of the section, and the prefix every element id inside is derived from.

CalloutAction

Prop	Type	Default	Description
`label`	`string`	—	The button's label.
`url`	`string`	—	The button's destination.
`emphasis`	`"primary" \| "secondary"`	—	Visual weight. The first action defaults to primary.
`icon`	`ReactNode`	—	Optional icon inside the button.

Examples

Dark

For a brand commitment. The primary action turns yellow, the strongest contrast the palette offers on the dark ground.

Need help? Our advisers are listening!

Our technical advisers answer your questions on tapping, drilling and tool selection.

Contact an adviser Find a branch

import { CalloutBlock } from "mako-ui/blocks/callout";
import { PhoneCall } from "mako-ui/icons/phone-call";

export default function Particle() {
  return (
    <CalloutBlock
      actions={[
        { label: "Contact an adviser", url: "#contact" },
        { label: "Find a branch", url: "#branches" },
      ]}
      icon={<PhoneCall aria-hidden="true" />}
      description="Our technical advisers answer your questions on tapping, drilling and tool selection."
      title="Need help? Our advisers are listening!"
      tone="dark"
    />
  );
}

Accent

For an offer or a deadline. The ink turns black and the action stays blue — both measured contrast decisions.

Offer valid until 30 September

Take advantage of reduced prices on the whole abrasives range.

See the offer

import { CalloutBlock } from "mako-ui/blocks/callout";
import { Promotion } from "mako-ui/icons/promotion";

export default function Particle() {
  return (
    <CalloutBlock
      actions={[{ label: "See the offer", url: "#offer" }]}
      icon={<Promotion aria-hidden="true" />}
      description="Take advantage of reduced prices on the whole abrasives range."
      title="Offer valid until 30 September"
      tone="accent"
    />
  );
}

On This Page

Props CalloutBlock CalloutAction Examples Dark Accent