Header

Use Header to render a titled section header with an optional divider and call-to-action. The title and call-to-action render side by side, with the divider spanning the full width beneath them. The component renders nothing when title is empty.

Import

import { Header } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
title	string	Yes	Title text. The Header renders nothing when this is empty.
size	'medium' | 'large'	No	Change the header size. Defaults to medium.
divider	boolean	No	Show a divider beneath the title. Defaults to true.
cta	VNode	No	A call-to-action element, such as a Button or link, rendered beside the title.
level	1 | 2 | 3 | 4 | 5 | 6	No	Heading level for the title. Without it, the title renders as a span.

Header also accepts standard HTML attributes (for example, className), except size.

Example

Render a page header with a title, a heading level, and a divider:

import { Header, provider } from '/@dropins/tools/components.js';

await provider.render(Header, {
  title: 'Checkout',
  size: 'large',
  // Render the title as an <h1>; without level it renders as a plain span.
  level: 1,
  divider: true,
})(document.querySelector('.checkout-header'));

To render a call-to-action beside the title, pass the cta prop a VNode created with h — for example, a tertiary Button.

Related

• Divider — the separator the Header renders beneath its title.
• Button — a common choice for the cta prop.